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

ホーム

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

テンプレート名 : Sakura

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="settimer()" onload="javascript:initval();">
<script type="text/javascript">
function settimer(){
timer2 = setInterval("watch()",1000);
document.onload = move;
}
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; }

<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-midashi">
<div class="kiji-top">{entry_year}/{entry_month}/{entry_day}</div>
<div class="kiji-title">{entry_title}</div></div>
<div class="kiji-top2">{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="460" class="line" />
コメント:{comment_num}|トラックバック:{trackback_num}<br />

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

{trackback_auto_discovery}
</div>
</div>

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

<div class="comment-read">
<div class="comment-main">{comment_description}</div>
<hr align="center" size="1" width="460" 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 id="trackback">
<div class="section-title">この記事へのトラックバック</div>

<div class="trackback-main">
<div class="trackback-title">{trackback_title}</div>
{trackback_excerpt}<br />
<hr align="center" size="1" width="460" 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";
/*基本設定*/
div#image1,div#image2,div#image3,div#image4,div#image5,div#image6,div#image7{
position: absolute;
z-index: 4;
top: 0px;
left: 0px;
}
a:link{
color: #600;
text-decoration: underline;
}

a:visited{
color: #933;
text-decoration: underline;
}

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

a:active{
text-decoration: none;
border-width: 0px;
border-style: none;
color: #903;
}
a:focus{
text-decoration: none;
border-width: 0px;
border-style: none;
color: #903;
}

img{
text-decoration: none;
border-width: 0px;
border-style: none;
}
a:link img{
text-decoration: none;
}
a:visited img{
text-decoration: none;
}
body{
padding: 0px;
margin: 0px;
font-size: 12px;
font-weight: normal;
color: #c36;
font-family: "Comic Sans MS","Monaco","Meiryo", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
line-height: 1.8;
letter-spacing: 2px;
word-spacing: 3px;
background-color: #000; 
voice-family: "\"}\"";
voice-family: inherit;
margin-left: auto;
margin-right: auto;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090402_977581.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: #fbd;
width: 800px;
}

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: 350px;
top: 0px;
left: 0px; 
z-index: 0;
margin-left: auto;
margin-right: auto;
color: #fbd;
letter-spacing: 6px;
}
div#top a:link,div#top a:visited{
text-decoration: none;
border-style: none;
color: #fbd;
}
div#title{
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 200px;
text-align: center;
z-index: 2;
}

/*ブログタイトルの設定*/
div#blog-title{
font-size: 200%;
}
/*ブログタイトルの設定ここまで*/

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

/*時計の設定*/
div#watch{
color: #fbd;
position: absolute;
top: 240px;
left: 10px;
width: 200px;
height: 70px;
padding: 5px 0px;
line-height: 1.2;
letter-spacing: 5px;
text-align: center;
z-index: 3;
font-size: 19px;
font-family: "Comic Sans MS","Monaco","ＭＳ Ｐゴシック",sans-serif;
font-weight: 300;
border-width: 1px 0 1px 0;
border-style: solid;
}
/*時計の設定ここまで*/

/*Welcome to my blog の設定*/
div#welcome{
position: absolute;
top: 20px;
left: 380px;
width: 400px;
height: 300px;
z-index: 1;
filter: Alpha(opacity=50);
opacity: 0.50;
}
/*Welcome to my blog の設定ここまで*/

/*横型カレンダーの設定*/
div#calender2{ 
position: absolute;
top: 330px;
left: 10px;
width: 770px;
height: 20px;
z-index: 2;
font-size: 12px;
text-align: center;
color: #c68;
letter-spacing: 0px;
word-spacing: 2px;
filter: Alpha(opacity=70);
opacity: 0.70;
border-width: 1px 5px 1px 5px;
border-style: solid;
border-color: #301 #967;
background-color:#fbd;
}
div#calender2 a:link,div#calender2 a:visited,div#calender2 a:hover,div#calender2 a:active{
color: #935;
text-decoration: none;
}
/*横型カレンダーの設定ここまで*/

div#fontsize{
position: absolute;
top: 290px;
left: 590px;
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;
position: relative;
top: 0px;
left: 0px;
}
div#container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#main-side{
position: relative;
top: 0px;
left: 0px;
width: 500px;
float: right;
margin: 0;
padding: 9px 15px 9px 4px;
filter: Alpha(opacity=70);
opacity: 0.70;
}
div#left-side{
width: 260px;
float: left;
margin: 0;
padding: 9px;
filter: Alpha(opacity=70);
opacity: 0.70;
}
/*メインの設定(カラム分割など)ここまで*/

/*記事の設定*/
/*記事全体の設定*/
div.kiji{
position: relative;
margin-top: 10px;
padding: 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #301;
background-color:#fbd;
}
/*記事全体の設定ここまで*/

/*記事のタイトルの設定*/
div.kiji-title{
padding: 5px 15px 5px 135px;
font-size: 133%;
margin: 0px 0px 0px 0px;
line-height: 1.2;
text-align: center;
background-color: #fff;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090402_978654.jpg");
background-position: center;
background-repeat: repeat-x;
border-width: 2px 8px 2px 8px;
border-style: solid;
border-color: #c9a #967 #634 #967;
color: #634;
}
div.kiji-midashi{
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
div.kiji-title a:link,div.kiji-title a:visited{
text-decoration: none;
border-style: none;
color: #634;
}
div.kiji-title a:hover,div.kiji-title a:active{
color: #fff;
text-decoration: none;
}
/*記事のタイトルの設定ここまで*/

/*記事上部の設定*/
div.kiji-top{
position: absolute;
top: 2px;
left: 10px;
width: 120px;
text-align: left;
color: #ddd;
font-size: 20px;
font-family: "Times New Roman","ＭＳ Ｐ明朝","New York",serif;
z-index: 2;
color: #634;
}
div.kiji-top2{
font-size: 20px;
text-align: right;
padding-right: 20px;
font-family: "Times New Roman","ＭＳ Ｐ明朝","New York",serif;
}
/*記事上部の設定ここまで*/

/*記事本文の設定*/
div.kiji-main{
padding: 10px 10px 10px 10px;
line-height: 2.0;
text-align: justify;
text-justify: inter-ideograph;
}
/*記事本文の設定ここまで*/

/*追記リンク表示の設定*/
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;
text-align: justify;
text-justify: inter-ideograph;
}
/*追記の設定ここまで*/

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

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

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

/*コメント・トラックバックの設定*/
div#comment{
padding: 0px 0px 5px 0px;
border-width: 1px 1px 1px 1px;
border-color: #301;
border-style: solid;
background-color:#fbd;
}
div#trackback{
padding: 0px 0px 5px 0px;
border-width: 1px 1px 1px 1px;
border-color: #301;
border-style: solid;
background-color:#fbd;
}
div.comment-read{
margin: 20px;
text-align: justify;
text-justify: inter-ideograph;
}
/*コメント・トラックバックなどのタイトル*/
div.section-title{
padding: 0px 15px 5px 15px;
font-size: 133%;
margin: 0px 0 5px 0;
line-height: 1.2;
text-align: center;
background-color: #000;
color: #634;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090402_978654.jpg");
background-position: center;
background-repeat: repeat-x;
border-width: 2px 8px 2px 8px;
border-style: solid;
border-color: #c9a #967 #634 #967;
}
div.comment-title, div.trackback-title{
margin: 0px 0px 5px 0px;
padding: 5px;
font-size: 133%;
line-height: 1.2;
color: #634;
text-align: center;
border-width: 1px 4px 1px 4px;
border-style: solid;
border-color: #c9a #967 #634 #967;
background-color: #000;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090402_978654.jpg");
background-position: center;
background-repeat: repeat-x;
}
div.trackback-main{
margin: 10px 20px 10px 20px;
}
/*コメント・トラックバックなどのタイトルここまで*/
/*コメント・トラックバックの設定ここまで*/

/*プラグインの設定*/
/*プラグイン内の設定*/
div.plugin{
margin-top: 20px;
font-size: 100%;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #301;
padding: 0px 0px 0px 0px;
background-color:#fbd;
}
div.plugin{
margin: 5px;
}
/*プラグイン内の設定ここまで*/

/*プラグインタイトルの設定*/
div.plugin_title{
margin: 0px 0px 0px 0px;
padding: 2px 10px 2px 10px;
font-size: 120%;
background-color: #000;
background-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090402_978654.jpg");
border-width: 1px 5px 1px 5px;
border-color: #c9a #967 #634 #967;
border-style: solid;
background-position: center;
background-repeat: repeat-x;
color: #634;
}
dd{
}
/*プラグインタイトルの設定ここまで*/
/*プラグインの設定ここまで*/

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

/*線の設定*/
hr.line{
}
/*線の設定ここまで*/
ul{
list-style-image: url("http://img-cdn.jg.jugem.jp/a86/1081417/20090403_980731.gif");
}

/*コメント書き込み欄の設定*/
dt.comment{
text-align: left;
padding: 2px 20px;
width: 380px;
background-color: #967;
border-width: 1px;
border-style: solid;
border-color:#301 #967 #fcd #967;
color: #eee;
margin-left: auto;
margin-right: auto;
}
dd.comment{
color: #eee;
padding: 2px 20px 2px 0px;
margin: 0px;
padding-left: 50px;
width: 350px;
background-color: #eaa;
border-width: 1px;
border-style: solid;
border-color:#301 #967 #fcd #967;
margin-left: auto;
margin-right: auto;
}
input{
border-width: 1px;
border-style: solid;
border-color:#301 #967 #fcd #967;
}
input:focus,textarea:focus{
background-color: #fbd;
}
textarea{
border-width: 1px;
border-style: solid;
border-color:#301 #967 #fcd #967;
}
form.comment-make{
}
/*コメント書き込み欄の設定ここまで*/

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