無料ブログ作成ならJUGEM(ジュゲム)

ホーム

テンプレートHTML・CSSについて: 公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について: 弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。

テンプレート名 : Sky-Black

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
<title>{site_title}</title>
</head>
<body onload="watch()" onload="javascript:initval();" link="#9999ff" vlink="#6666cc" alink="#ccffff">
<script type="text/javascript">
function watch(){

function _HpbDays()
{
  this[0] = "Sun"; this[1] = "Mon"; this[2] = "Tue"; this[3] = "Wed";
  this[4] = "Thu"; this[5] = "Fri"; this[6] = "Sat";
}
var now = new Date();
var yr  = now.getYear();
var mn  = now.getMonth() + 1;
var dt  = now.getDate();
var dy  = now.getDay();

var fyr = (yr < 1900) ? 1900 + yr : yr;

var dys = new _HpbDays();
var dyj = dys[dy];
var sec = now.getSeconds();
var min = now.getMinutes();
var hou = now.getHours();

if(mn < 10) { mn = "0" + mn; }
if(dt < 10) { dt = "0" + dt; }
if(hou < 10) { hou = "0" + hou; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

document.getElementById("sec").innerHTML = fyr + "/" + mn + "/" + dt  + "<br />" + "(" + dyj + ")"+ "<br />" + hou+":"+min+":"+sec;
}
setInterval("watch()",1000)
</script>

<div id="all">
<div id="top">

<div id="title">
<div id="blog-title">
{blog_name}</div>
<div id="introduction">
{blog_description}
</div> 
</div>

<div id="calender2"> 
{calendar_horizontal}
</div>

</div>

<div id="container">
<div id="main-side">

<div class="kiji">
<div class="kiji-title">
{entry_title}</div>
<div class="kiji-top">{entry_year}/{entry_month}/{entry_day}({entry_eng_week_short}){entry_time_only}</div>
<div class="kiji-main">
{entry_description} 
<div class="more">
{entry_sequel} 
</div>
<br />
投稿者：{user_name}|カテゴリ:{category_name}
</div>
<div class="kiji-bottom">
<hr align="center" size="1" width="500" class="line" />
コメント:{comment_num}|トラックバック:{trackback_num}<br />

<div class="prevnext">
 {prev_entry} | <a href="./">ＴＯＰへ</a> | {next_entry} 
</div>

{trackback_auto_discovery}
</div>
</div>

<div class="comment">
<div class="section-title">コメント一覧</div>

<div class="comment-read">
<div class="comment-main">{comment_description}</div>
<hr align="center" size="1" width="500" class="line" />
<div class="comment-bottom">{comment_name}│{comment_year}/{comment_month}/{comment_day}({comment_eng_week_short}){comment_hour_24}：{comment_minute}│
<a href="<%comment_edit_link>">編集する</a></div></div>

<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<div class="section-title">コメントを書く</div>
<dl>
<dt class="comment"><label for="comment_hn">ハンドルネーム(HN)：</label></dt>
<dd class="comment"><input id="comment_hn" type="text" name="name" value="{cookie_name}" size="25" /><br /></dd>
<dt class="comment"><label for="comment_mail">メールアドレス：</label></dt>
<dd class="comment"><input id="comment_mail" type="text" name="email" value="{cookie_email}" size="25" /><br /></dd>
<dt class="comment"><label for="comment_url">URL：</label></dt>
<dd class="comment"><input type="text" id="comment_url" name="url" value="{cookie_url}" size="25" /><br /></dd>
<dt class="comment"><label for="comment_main">コメントの内容：</label></dt>
<dd class="comment"><textarea id="comment_main" rows="5" cols="25" name="description" >コメントをどうぞ</textarea><br /></dd>
<dt class="comment"><input type="submit" value="送信する" /><input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie">入力情報を登録する</label></dt>
</dl>
</form>
</div>


<div class="kiji">
<div class="kiji-title">プロフィール</div>
<div class="kiji-top">Author:{profile_name}</div>
<div class="kiji-main">{profile_description}</div>
</div>


<div class="trackback">
<div class="section-title">この記事へのトラックバック</div>

<div class="trackback-title">{trackback_title}</div>
<div class="trackback-main">{trackback_excerpt}<br />
<hr align="center" size="1" width="500" class="line" />
{trackback_year}/{trackback_month}/{trackback_day}({trackback_eng_week_short}){trackback_hour_24}：{trackback_minute}｜{trackback_blog_name}</div> 

<br />この記事のトラックバックURL<br />
<input type="text" size="35" value="{trackback_url}" /><br />

※トラックバックの際はこのURLをコピーして、トラックバック送信先の欄に貼り付けてください。
</div>

<div class="prevnext">{prev_page_link}｜<a href="./">ＴＯＰへ</a>｜{next_page_link}</div>

</div>

<div id="left-side">

<div class="plugin">
<div class="plugin_title">過去の記事</div>
<div class="plugin_main">{archives_list}</div> 
</div>


<div class="plugin">
<div class="plugin_title">カテゴリ</div>
<div class="plugin_main">{category_list}</div> 
</div>  


<div class="plugin">
<div class="plugin_title">最近の記事</div>
<div class="plugin_main">{selected_entry_list}</div> 
</div>
 
 
<div class="plugin">
<div class="plugin_title">最近のコメント</div>
<div class="plugin_main">{recent_comment_list}</div> 
</div>  


<div class="plugin">
<div class="plugin_title">最近のトラックバック</div>
<div class="plugin_main">{recent_trackback_list}</div>
</div>


<div class="plugin">
<div class="plugin_title">プロフィール</div>
<div class="plugin_main">{user_list}</div> 
</div>


<div class="plugin">
<div class="plugin_title">リンク集</div>
<div class="plugin_main">{link_list}</div> 
<a href="./admin/">管理者ページ</a>
</div>


<div class="plugin">
<div class="plugin_title">{freespace_title1}</div>
<div class="plugin_main">{freespace_contents1}</div>
</div>


<div class="plugin">
<div class="plugin_title">{freespace_title2}</div>
<div class="plugin_main">{freespace_contents2}</div>
</div>


<div class="plugin">
<div class="plugin_title">{freespace_title3}</div>
<div class="plugin_main">{freespace_contents3}</div>
</div>


<div class="plugin">
<div class="plugin_title">{freespace_title4}</div>
<div class="plugin_main">{freespace_contents4}</div>
</div>


<div class="plugin">
<div class="plugin_title">{freespace_title5}</div>
<div class="plugin_main">{freespace_contents5}</div>
</div>

<div class="plugin">
<div class="plugin_title">QRコード</div>
<div class="plugin_main">{site_qrcode}</div> 
</div>

<div class="plugin">
<div class="plugin_title">スポンサー広告</div>
<div class="plugin_main">{ad}</div>
</div>

<div class="plugin">
<div class="plugin_title">Powered By JUGEM</div>
<div class="plugin_main">{powered}</div> 
</div>
</div>
</div>

<div id="foot">
{copyright} <br />
Designed&#32;by<a href="http://nk16.jugem.jp/" target="blank">空雄</a><br />
<a href="./?mode=rss">RSS1.0</a><br /><a href="./?mode=atom">Atom0.3</a>
</div>
</div>
</body>
</html>

CSS

@charset "EUC-JP";
/*基本設定*/
a:link{
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
}

a:visited{
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
}

a:hover{
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
cursor: crosshair;
color: #ffffff;
}

a:active{
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
color: #ffffff;
}

#all img{
border-width: 0px;
border-style: none;
}
#all a:link img, #all a:visited link{
border-width: 0px;
border-style: none;
}

body{
font-size: 12px;
font-weight: normal;
color: #bbf;
font-family: "Verdana", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 3px;
background-color: #000; 
voice-family: "\"}\"";
voice-family: inherit;
margin-left: auto;
margin-right: auto;
}

h6{
font-size: 125%;
text-align: center;
}
h5{
font-size: 133%;
text-align: center;
}
h4{
font-size: 150%;
text-align: center;
}
h3{
font-size: 166%;
text-align: center;
}
h2{
font-size: 200%;
text-align: center;
}
h1{
font-size: 250%;
text-align: center;
}
/*基本設定ここまで*/

/*ブログTopの設定*/
div#top{
position: relative;
width: 800px;
height: 300px;
top: 0px;
left: 0px; 
z-index: 0;
margin-left: auto;
margin-right: auto;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090202_674405.jpg");
background-repeat: no-repeat;
background-position: top;
color: #ccf;
letter-spacing: 6px;
}
div#top a:link,div#top a:visited{
text-decoration: none;
border-style: none;
color: #ccf;
}
/*タイトルの設定*/
div#title{
position: absolute;
top: 25px;
left: 200px;
width: 400px;
height: 200px;
text-align: center;
z-index: 2;
}
/*ブログタイトルの設定*/
div#blog-title{
font-size: 200%;

}
/*ブログタイトルの設定ここまで*/

/*ブログ紹介文の設定*/
div#introduction{
padding-top: 20px;
}
/*ブログ紹介文の設定ここまで*/
/*タイトルの設定ここまで*/

/*時計の設定*/
div#watch{
color: #ccf;
position: absolute;
top: 150px;
left: 50px;
width: 250px;
height: 120px;
line-height: 1.2;
text-align: center;
z-index: 3;
font-size: 22px;
font-family: "Times New Roman","ＭＳ Ｐ明朝","New York",serif;
}
/*時計の設定ここまで*/

/*横型カレンダーの設定*/
div#calender2{ 
position: absolute;
top: 280px;
left: 0px;
width: 800px;
height: 20px;
z-index: 2;
font-size: 12px;
font-family: "Times New Roman","ＭＳ Ｐ明朝","New York",serif;
text-align: center;
color: #99c;
background-color: #000;
filter: Alpha(opacity=50);
opacity:0.50;
letter-spacing: 1px;
}
/*横型カレンダーの設定ここまで*/

div#fontsize{
position: absolute;
top: 240px;
left: 600px;
width: 200px;
height: 40px;
z-index: 2;
filter: Alpha(opacity=50);
opacity:0.50;
}
img.size{
margin: 0;
padding: 0;
}
/*ブログTopの設定ここまで*/

/*メインの設定(カラム分割など)*/
div#all{
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: #000;
}
div#container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#main-side{
width: 540px;
float: right;
margin: 4px 0;
padding: 0;
}
div#left-side{
width: 260px;
float: left;
margin: 4px 0;
padding: 0;
}
/*メインの設定(カラム分割など)ここまで*/

/*記事の設定*/
/*記事全体の設定*/
div.kiji{
margin: 0px 5px;
padding: 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #6666cc;
}
/*記事全体の設定ここまで*/

/*記事のタイトルの設定*/
div.kiji-title{
padding: 10px 5px 10px 45px;
font-size: 133%;
margin: 0px 0px 5px 0px;
line-height: 1.2;
text-align: center;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090202_673588.jpg");
border-width: 1px 10px 1px 10px;
border-color:  #000099 #6677cc #cccccc #6677cc;
background-repeat: no-repeat;
background-position: center;
border-style: solid;
}
div.kiji-title a:link,div.kiji-title a:visited{
border-style: none;
}
div.kiji-title a:hover,div.kiji-title a:active{
color: #fff;
text-decoration: none;
}
/*記事のタイトルの設定ここまで*/

/*記事上部の設定*/
div.kiji-top{
text-align: right;
}
/*記事上部の設定ここまで*/

/*記事本文の設定*/
div.kiji-main{
padding: 20px 10px 10px 10px;
line-height: 2.2;
}
/*記事本文の設定ここまで*/

/*追記リンク表示の設定*/
div.more-start{
text-align: center;
font-size: 133%;
}
div.more-start a:link,div.more-start a:visited{
}
div.more-start a:hover,div.more-start a:active{
color: #fff;
}
/*追記リンク表示の設定ここまで*/

/*追記の設定*/
div.more{
margin: 15px 5px 5px 5px;
padding: 5px;
line-height: 2;
}
/*追記の設定ここまで*/

/*記事下部の設定*/
div.kiji-bottom{
text-align: right;
letter-spacing: 0;
font-size: 91%;
}

/*記事下部の設定ここまで*/

/*前記事・次記事などの表示*/
div.prevnext{
text-align: center;
margin: 10px 30px 5px 30px;
}
/*前記事・次記事などの表示ここまで*/
/*記事の設定ここまで*/

/*コメント・トラックバックの設定*/
div.comment{
margin: 0px 5px;
padding: 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #6666cc;
}
div.trackback{
margin: 0px 5px;
padding: 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #6666cc;
}
div.comment-read{
margin: 15px;
}
/*コメント・トラックバックなどのタイトル*/
div.section-title{
padding: 10px 5px 10px 45px;
font-size: 133%;
margin: 12px 0 5px 0;
line-height: 1.2;
text-align: center;
border-width: 1px 10px 1px 10px;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090202_673588.jpg");
border-color:  #000099 #6677cc #cccccc #6677cc;
background-position: center;
background-repeat: no-repeat;
border-style: solid;
}
div.trackback-title{
margin: 5px 20px 5px 20px;
padding: 5px;
font-size: 133%;
line-height: 1.2;
text-align: center;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090202_673588.jpg");
border-width: 1px 4px 1px 4px;
border-color:  #000099 #6677cc #cccccc #6677cc;
border-style: solid;
background-position: center;
background-repeat: no-repeat;
}
div.trackback-title a:link,div.trackback-title a:visited{
color: #bbf;
border-style: solid;
}
div.trackback-main{
margin: 10px 20px 10px 20px;
}
/*コメント・トラックバックなどのタイトルここまで*/
/*コメント・トラックバックの設定ここまで*/

/*プラグインの設定*/
/*プラグイン内の設定*/
div.plugin{
font-size: 100%;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #cccccc #3333cc #000099 #3333cc;
padding: 0px;
margin: 0px;
}
/*プラグイン内の設定ここまで*/

/*プラグインタイトルの設定*/
div.plugin_title{
margin: 0px;
padding: 0px;
font-size: 133%;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090202_673588.jpg");
border-width: 1px 10px 1px 10px;
border-color:  #000099 #6677cc #cccccc #6677cc;
background-repeat: no-repeat;
background-position: center;
border-style: solid;
text-align: center;
}
div.plugin_title a:link,div.plugin_title a:visited{
color: #ccf;
text-decoration: none;
border-width: 0;
}
/*プラグインタイトルの設定ここまで*/
/*プラグイン本文の設定*/
.plugin_main{
margin: 5px;
}
/*プラグイン本文の設定ここまで*/
/*プラグインの設定ここまで*/

/*ブログ下部の設定*/
div#foot{
clear: both;
width: 800px;
height: 150px;
padding-top: 30px;
text-align: center;
background-color: #000;
border-width: 1px 0px 0px 0px;
border-style: solid;
margin-left: auto;
margin-right: auto;
}
div#foot a:link,div#foot a:visited{
}
div#foot a:hover,div#foot a:active{
color: #fff;
}
/*ブログ下部の設定ここまで*/

/*線の設定*/
hr.line{
}
/*線の設定ここまで*/
/*コメント書き込み欄の設定*/
dt.comment{
text-align: left;
padding: 2px 20px;
width: 380px;
background-color: #447;
border-width: 2px;
border-style: solid;
border-color:#002 #668 #cce #668;
color: #ccf;
margin-left: auto;
margin-right: auto;
}
dd.comment{
padding: 2px 20px 2px 0px;
margin: 0px;
padding-left: 50px;
width: 350px;
background-color: #88a;
border-width: 2px;
border-style: solid;
border-color:#003;
color: #ccf;
border-color:#002 #668 #cce #668;
margin-left: auto;
margin-right: auto;
}
input{
background-color: #002;
color: #ccf;
}
textarea{
background-color: #002;
color: #ccf;
}
form.comment-make{
}
/*コメント書き込み欄の設定ここまで*/

高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成！: 今すぐ 無料ブログ をはじめよう！ ≫ブログ作成