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

ホーム

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

テンプレート名 : しかしかさんさん。

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" lang="ja" xml:lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<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>
</head>

<div id="main">

<div class="title_box">
	<h1  class="site_title" >{blog_name}</h1>
	<div class="description">{blog_description}</div>
</div>

<div class="calendar">
	{calendar_horizontal_only} 
	<span class="calendar_month">
		<a href="./?month={calendar_prev_yearmonth}" title="OLD"> ≪ </a>
		<a href="./?month={calendar_this_yearmonth}" title="THIS">{calendar_this_month}</a> <span class="calendar_m">{calendar_str_month}</span> {calendar_this_year}
		<a href="./?month={calendar_next_yearmonth}" title="NEW"> ≫ </a>
	</span>
</div>

<div class="entry">
	<h3  class="entry_title"><a href="{entry_permalink}" title="{entry_title}">{entry_title}</a></h3>
	<div class="entry_date" >DATE : {entry_year}.{entry_month}.{entry_day} ({entry_jpn_week}) {entry_time}</div>

<div class="entry_body">
		{entry_description}
		
		<div class="more_next"><a href="./?eid={entry_sequel_id}#sequel">...read more ?</a></div>
		
		
		{entry_sequel_text}
		
	</div>

<div class="entry_state">
		category:<span class="catenm">{category_name}</span> | 
		<a href="{entry_permalink}#comments">comment</a>:{comment_num_only} | 
		<a href="{entry_permalink}#trackback">tb</a>:{trackback_num_only} | 
		<a href="#top" title="TOPへ">top▲</a>
	</div>
</div>
{trackback_auto_discovery}

<a name="comments" id="comments"></a>
<div class="entry">
	<h2 class="entry_title">Comment</h2>

<div class="ct_box">
		<div class="ct_body">{comment_description}</div>
		<div class="entry_state">
			from：<span class="catenm">{comment_name}</span> | 
			datetime：{comment_year}.{comment_month}.{comment_day} {comment_hour_24}:{comment_minute}
		</div>
	</div>

<div class="entry_body">
		<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
			<input type="hidden" name="entry_id" value="{entry_id}" />
			<label for="name">name:</label><br />
			<input type="text" tabindex="1" name="name"  id="name"  value="{cookie_name}"  style="width:200px;" /><br />
			<label for="email">email:</label><br />
			<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" /><br />
			<label for="url">url:</label><br />
			<input type="text" tabindex="3" name="url"   id="url"   value="{cookie_url}"   style="width:200px;" /><br />
			<label for="description">comments:</label><br />
			<textarea tabindex="4" name="description" id="description" rows="10" cols="50" style="width:350px;"></textarea><br /><br />
			<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" />
			<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
			<label for="set_cookie">Cookieに登録</label>
		</form>
	</div>
</div>

<a name="trackback" id="trackback"></a>
<div class="entry">
	<h2 class="entry_title">Trackback</h2>

<div class="ct_box">
		<div class="ct_title">{trackback_title}</div>
		<div class="ct_body" >{trackback_excerpt}</div>
		<div class="entry_state">
			from：<span class="catenm">{trackback_blog_name}</span> | 
			datetime：{trackback_year}.{trackback_month}.{trackback_day} {trackback_hour_24}:{trackback_minute}
		</div>
	</div>

<div class="entry">
	<h2  class="entry_title">Profile</h2>
	<div class="entry_state">All written by : {profile_name}</div>
	<div class="entry_body" >{profile_description}</div>
</div>

<div class="navi">
	<a href="{prev_permalink}" title="{prev_title}">←Old</a> | 
	<a href="./" title="メインページへ">Main</a> | 
	<a href="{next_permalink}" title="{next_title}">New→</a>
</div>

<div class="navi">
	{prev_page_link} {page_now} / {page_num} PAGES {next_page_link}
</div>

<div id="admin">

<div class="ad_l">
	
	<div class="copy">{copyright}</div>

<div class="copy">
		<a href="./admin/">Login</a> | 
		<a href="./?mode=rss">RSS1.0</a> | 
		<a href="./?mode=atom">Atom0.3</a>
	</div>

<div class="copy">
		<form method="get" action="">
			<input id="search" name="search" size="20" style="width:150px" />
			<input type="image" src="http://img-cdn.jg.jugem.jp/a14/106684/20081211_513786.gif" alt="このブログ内を検索する" title="このブログ内を検索する" value="Search" align="absmiddle" style="border:none;" />
		</form>
	</div>

<div class="copy">{site_qrcode}</div>

</div>

<div class="ad_r">
	
	{ad}
</div>

</div>

</div>

<div id="side">

<div class="side_box">
	<div class="side_title">Recommend</div>
	<div class="side_text_sc" style="text-align:center;margin:2px auto;padding:0px 0px 5px 0px;">
		
		<div class="amazon_t">
			<a href="{amazon_url}" target="_blank" title="{amazon_ProductName}">
				<img src="{amazon_ImageUrlMedium}" alt="{amazon_ProductName}/{amazon_Creator}" class="amazon_pict" style="display:block;" />
			</a>
			<strong>{amazon_ProductName}</strong>
		</div>
		
	</div>
</div>

<div class="side_box">
	<div class="side_title">Profile</div>
	<div class="side_text" >{user_list}</div>
</div>

<div class="selectentry"><div class="side_box">
	<div class="side_title">SelectEntry</div>
	<div class="side_text side_li">
		<ul> 
		    <li><strong>{selected_entry_item_year}.{selected_entry_item_month}.{selected_entry_item_day}</strong><br />
		        <a href="./?eid={selected_entry_item_id}">{selected_entry_item_title}</a></li>
		     
		</ul>
	</div>
</div></div>

<div class="latestentry"><div class="side_box">
	<div class="side_title">NewEntry</div>
	<div class="side_text side_li">
		<ul> 
		    <li><strong>{latest_entry_item_year}.{latest_entry_item_month}.{latest_entry_item_day}</strong><br />
		        <a href="./?eid={latest_entry_item_id}">{latest_entry_item_title}</a></li>
		     
		</ul>
	</div>
</div></div>

<div class="side_box">
	<div class="side_title">Category</div>
	<div class="side_text">
		<ul>
		    <li><a href="./?cid={category_item_id}" title="{category_item_num} コあるよ">{category_item_name}</a></li>
		     
		</ul>
	</div>
</div>

<div class="side_box">
	<div class="side_title">Comment</div>
	<div class="side_text side_li" id="commentlist">
		<ul>
		    <li><a href="./?eid={recent_comment_item_entry_id}#comments" title="{recent_comment_item_title}" style="font-weight:bolder;">{recent_comment_item_title}</a><br />
		        →{recent_comment_item_month}.{recent_comment_item_day} {recent_comment_item_name}</li>
		     
		</ul>
	</div>
</div>

<div class="side_box">
	<div class="side_title">Trackback</div>
	<div class="side_text side_li">
		<ul>
		    <li><strong>{recent_trackback_item_year}.{recent_trackback_item_month}.{recent_trackback_item_day}</strong><br />
		        <strong>[{recent_trackback_item_blog_name}]</strong><br />
		        <a href="./?eid={recent_trackback_item_entry_id}#trackback" title="{recent_trackback_item_title}">{recent_trackback_item_title}</a></li>
		     
		</ul>
	</div>
</div>

<div class="side_box">
	<div class="side_title">Archive</div>
	<div class="side_text">
		<ul> 
		    <li><a href="./?month={archives_item_id}" title="{archives_item_num} コあるよ">{archives_item_year} / {archives_item_num_month} {archives_item_eng_month}</a></li>
		     
		</ul>
	</div>
</div>

<div class="side_box">
	<div class="side_title">Link</div>
	<div class="side_text" >{link_list}</div>
</div>

<div class="side_box">
	<div class="side_title">{freespace_title1}</div>
	<div class="side_text" >{freespace_contents1}</div>
</div>


<div class="side_box">
	<div class="side_title">{freespace_title2}</div>
	<div class="side_text" >{freespace_contents2}</div>
</div>


<div class="side_box">
	<div class="side_title">{freespace_title3}</div>
	<div class="side_text" >{freespace_contents3}</div>
</div>


<div class="side_box">
	<div class="side_title">{freespace_title4}</div>
	<div class="side_text" >{freespace_contents4}</div>
</div>


<div class="side_box">
	<div class="side_title">{freespace_title5}</div>
	<div class="side_text" >{freespace_contents5}</div>
</div>

</div>

</div>

</body>
</html>

CSS

/* ========================================================================== */
/* レイアウトの設定                                                           */
/* ====================================================== /幅/高さ/位置/余白/ */

* { margin: 0; padding: 0; }

/* 幅、高さ ----------------------------------------------------------------- */

/* 基本 */
#layout { width: 800px;  height: 100%; }
#main   { width: 585px;  height: 100%; } /* ﾒｲﾝ */
#side   { width: 200px;  height: 100%; } /* ｻｲﾄﾞ */
.title_box  { height: 270px; }                 /* ﾀｲﾄﾙ */

/* ｻｲﾄﾞ ｽｸﾛｰﾙ設定 */
#search .selectentry .side_text,
.side_text_sc { height: 146px; overflow: auto; }

/* ｶﾚﾝﾀﾞｰ */
.weekday    { width:  25px; height:  20px; }  
.cell       { width:  25px; height:  20px; }

/* ADMIN */
.ad_l       { width: 350px; } /* 左側 */

/* 配置 --------------------------------------------------------------------- */

.clear { clear: both;
         font: 0px/0px sans-serif; }

/* 全体 */
body    { text-align: center; }
#layout { text-align: left;   }

#main { float: left;  }
#side { float: right; }

/* ADMIN */
.ad_l { float: left;  } /* 左側 */
.ad_r { float: right; } /* 右側 */

/* 右揃え */
.site_title,
.calendar_month,                  /* ｶﾚﾝﾀﾞｰ 年月 */
.entry_date,                      /* ｴﾝﾄﾘｰ 日付 */
.more_next,                       /* ｴﾝﾄﾘｰ 続きへのﾘﾝｸ */
.entry_state                      /* ｴﾝﾄﾘｰ 本文下のﾘﾝｸetc. */
	{ text-align: right;  }

/* 左揃え */
.side_title,                      /* ﾒﾆｭｰ ﾀｲﾄﾙ */
.side_text                        /* ﾒﾆｭｰ 中身2 */
	{ text-align: left; }

/* 中央揃え */
.navi,                            /* ﾅﾋﾞｹﾞｰｼｮﾝ */
.calendar,                        /* ｶﾚﾝﾀﾞｰ 日 */
.amazon_t,
.ad_r
	{ text-align: center; }

/* 余白 --------------------------------------------------------------------- */

#layout { margin:  0px auto; }
#main   { margin:  0px; }
#side   { margin:  0px; }

input, textarea { padding:  1px  2px  1px  2px; } /* 入力ｴﾘｱ */
.pict           { padding:  3px  3px  3px  3px; } /* 画像の基本設定 */

/* ﾀｲﾄﾙ */
.title_box      { margin:  15px  0px  4px  0px; }
.site_title     { padding: 35px 50px  0px 25px; } /* ｻｲﾄ ﾀｲﾄﾙ */
.description    { padding: 140px 0px  8px 20px; } /* ｻｲﾄ 説明 */

/* ﾅﾋﾞｹﾞｰｼｮﾝ */
.navi           { padding:  5px  0px  5px  0px; } /* ﾅﾋﾞｹﾞｰｼｮﾝ */

/* ｴﾝﾄﾘｰ */
.entry          { margin:   0px  0px 15px  0px; } /* ｴﾝﾄﾘｰ 枠 */
.entry_title    { margin:   8px  9px  0px  9px;
                  padding:  5px  3px  3px  7px; } /* ｴﾝﾄﾘｰ ﾀｲﾄﾙ */
.entry_date     { padding:  0px  7px  0px  0px; } /* ｴﾝﾄﾘｰ 日付 */
.entry_body     { margin:  20px 12px 20px 18px; } /* ｴﾝﾄﾘｰ 本文 */
.more_next      { padding:  7px  5px  0px  0px; } /* ｴﾝﾄﾘｰ 続きへのﾘﾝｸ */
blockquote      { margin:  10px  5px 10px 10px;
                  padding:  5px  7px  5px  9px; } /* 引用文 */
.entry_state    { padding:  0px  5px  1px  0px; } /* ｴﾝﾄﾘｰ 本文下のﾘﾝｸetc. */

.ct_box         { margin:   0px 15px  0px 16px; }
.ct_title       { margin:  18px  0px  0px  7px; } /* TB ﾀｲﾄﾙ */
.ct_body        { margin:  18px  5px 10px  7px; } /* ｺﾒﾝﾄ,TB 本文 */

/* ｻｲﾄﾞ */
.side_box       { margin:  15px  0px  0px  0px;
                  padding:  0px  0px  4px  0px; }
.side_title     { margin:   0px  0px  5px  2px; }
.side_text      { padding:  0px  5px  2px 10px; }
.side_text_sc   { padding:  0px  3px  0px 10px; }
.side_li li     { margin:   0px  0px  3px  0px; }
.amazon_t       { margin:   2px auto  5px auto;
                  padding:  2px  1px  5px  1px; }
.linktext_r     { padding:  0px  0px  0px  5px; }

/* ｶﾚﾝﾀﾞｰ */
.calendar_month { padding:  0px  0px  0px 14px; } /* ｶﾚﾝﾀﾞｰ 年月 */
.calendar       { padding:  4px  0px  3px 10px; } /* ｶﾚﾝﾀﾞｰ 日 */

/* ADMIN */
.ad_r           { padding: 10px  0px 10px  0px; } /* admin 右側 */
.copy           { margin:   8px  0px  2px  7px; } /* admin */

/* その他の基本設定 --------------------------------------------------------- */

/* ﾘｽﾄ */
ul {
text-align: left;
text-indent: 0px;
list-style-type: none;
list-style-position: outside;
}

/* ﾒﾆｭｰ 中身のﾘｽﾄ */
.list_text ul {
list-style-type: square;
line-height: 130%;
}

/* ========================================================================== */
/* 罫線の設定                                                                 */
/* =========================================================== /位置/種類/色/ */

/* 画像の基本設定 */
img             { border:         none; } 
.pict           { border:         1px solid  #808080; }
.amazon_pict    { border:         1px solid  #999999; } /* amazon */

/* 枠 */
input, textarea { border:         1px solid  #009900; } /* 入力ｴﾘｱ */
.title_box      { border:         1px solid  #006633; } /* ﾀｲﾄﾙ */
.navi           { border:         1px solid  #006633; } /* ﾅﾋﾞｹﾞｰｼｮﾝ */
.entry          { border:         1px solid  #006633; } /* ｴﾝﾄﾘｰ */
.side_box       { border:         1px solid  #006633; } /* ｻｲﾄﾞ */

/* その他 */
blockquote      { border-left:   10px solid  #009900; } /* 引用文 */
.ct_box         { border-bottom:  1px dotted #006633; } /* ｺﾒﾝﾄ,TB */

/* ========================================================================== */
/* フォント・色の設定                                                         */
/* =================================== /ﾌｫﾝﾄ種類/文字ｻｲｽﾞ/行間/文字間/文字色/ */

/* 基本 --------------------------------------------------------------------- */

body {
font-size:   11px;
font-family: "Verdana","Arial","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
line-height: 150%;
color:       #006633;
}

/* フォントタイプ ----------------------------------------------------------- */

input, textarea { font-family: "Verdana","Arial","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; }
.site_title,
.side_title { font-family: "Comic Sans MS","Century Gothic","Verdana","Georgia",sans-serif; }
.entry_state,
.calendar_m,
.calendar,
.linkmenu   { font-family: "Century Gothic","Comic Sans MS","Verdana","Arial",sans-serif; }
.catenm     { font-family: "Verdana","Arial","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; }

/* 文字サイズ --------------------------------------------------------------- */

input, textarea { font-size: 11px; } /* 入力ｴﾘｱ */
label           { font-size: 10px; } /* ﾗﾍﾞﾙ */
.site_title     { font-size: 22px; } /* ｻｲﾄ ﾀｲﾄﾙ */
.description    { font-size:  9px; } /* ｻｲﾄ 説明 */
.entry_title    { font-size: 12px; } /* ｴﾝﾄﾘｰ ﾀｲﾄﾙ */
.entry_body,                         /* ｴﾝﾄﾘｰ 本文 */
blockquote      { font-size: 11px; } /* 引用文 */
.entry_date,                         /* ｴﾝﾄﾘｰ 日付 */
.more_next      { font-size: 10px; } /* ｴﾝﾄﾘｰ 続きへのﾘﾝｸ */
.entry_state    { font-size:  9px; } /* ｴﾝﾄﾘｰ 本文下のﾘﾝｸetc. */
.ct_title       { font-size: 11px; } /* TB ﾀｲﾄﾙ */
.ct_body        { font-size: 10px; } /* ｺﾒﾝﾄ,TB 本文 */
.calendar_month,                     /* ｶﾚﾝﾀﾞｰ 年月 */
.calendar,                           /* ｶﾚﾝﾀﾞｰ 日 */
.navi           { font-size: 11px; } /* ﾅﾋﾞｹﾞｰｼｮﾝ */
.side_title     { font-size: 14px; } /* ﾒﾆｭｰ ﾀｲﾄﾙ */
.side_text,
.side_text_sc   { font-size:  9px; } /* ﾒﾆｭｰ 中身 */

/* ﾃｷｽﾄの太さ */
.entry_title,                        /* ｴﾝﾄﾘｰ ﾀｲﾄﾙ */
.side_title,
.ct_title   { font-weight: bolder; } /* TB ﾀｲﾄﾙ */

/* 行間 --------------------------------------------------------------------- */

.description  { line-height: 120%; } /* ｻｲﾄ 説明 */
.entry_body   { line-height: 170%; } /* ｴﾝﾄﾘｰ 本文 */
.ct_body      { line-height: 150%; } /* ｺﾒﾝﾄ,TB 本文 */
.side_text,
.side_text_sc { line-height: 130%; } /* ﾒﾆｭｰ 中身 */
.side_text ul { line-height: 130%; }

/* 文字間 ------------------------------------------------------------------- */

.site_title  { letter-spacing: 4px; }
.description { letter-spacing: 3px; }
.entry_title,
.entry_date,
.entry_state,
.ct_title,
.ct_body,
.side_title  { letter-spacing: 2px; }
.entry_body  { letter-spacing: 1px; }
.copy,
br           { letter-spacing: normal; }

/* 文字色 ------------------------------------------------------------------- */

input, textarea { color: #336600; } /* 入力ｴﾘｱ */
label           { color: #006633; } /* ﾗﾍﾞﾙ */
.description    { color: #EEFFEE; } /* ｻｲﾄ 説明 */
.entry_body     { color: #336666; } /* ｴﾝﾄﾘｰ 本文 */
.side_title     { color: #006600; } /* ｻｲﾄﾞ ﾀｲﾄﾙ */
blockquote      { color: #009900; }

/* ========================================================================== */
/* 背景の設定                                                                 */
/* ============================================================ /背景色/画像/ */

/* 背景色 ------------------------------------------------------------------- */

body            { background-color: #FFFFFF; } /* 全体 */
input, textarea { background-color: #FFFFFF; } /* 入力ｴﾘｱ */
.entry_title    { background-color: #669933; } /* ｴﾝﾄﾘｰ ﾀｲﾄﾙ */

/* 画像 --------------------------------------------------------------------- */

.title_box {       /* ﾀｲﾄﾙ */
background-image:    url(http://img-cdn.jg.jugem.jp/a14/106684/20090509_552634.jpg);
background-repeat:   no-repeat;
background-position: 0px 0px;
}

/* ========================================================================== */
/* その他の設定                                                               */
/* ========================================================================== */

/* スクロールバー ----------------------------------------------------------- */

html,body {
scrollbar-base-color:       #FFFFFF;	/* ベース */	
scrollbar-face-color:       #FFFFFF;	/* 表面 */
scrollbar-arrow-color:      #006633;	/* 矢印 */
scrollbar-highlight-color:  #FFFFFF;	/* 明るいトコ */
scrollbar-3dlight-color:    #006633;	/* 左端上端 */
scrollbar-darkshadow-color: #006633;	/* 右端下端 */
scrollbar-shadow-color:     #FFFFFF;	/* ハイライト */
scrollbar-track-color:      #FFFFFF;	/* 通路 */
}

/* リンク ------------------------------------------------------------------- */

/* 全体のﾘﾝｸ色 */
a,
a:link,
a:visited { color: #336600; text-decoration: none; border: none; }
a:active,
a:hover   { color: #FFFFFF; text-decoration: none; background-color:#336600; border: none; }

.entry_body a strong { border-bottom: 1px dotted; }

.more_next a:link,
.more_next a:visited,
.more_next a:active { border-bottom: 1px dotted; }
.more_next a:hover  { border-bottom: none; }

.site_title a:link,
.site_title a:visited,
.site_title a:active { color: #FFFFFF; }
.site_title a:hover  { color: #99CC99; background: none; }

.entry_title a:link,
.entry_title a:visited,
.entry_title a:active { color: #FFFFFF; }
.entry_title a:hover  { color: #99CC99; background: none; }

/* 表示設定 ----------------------------------------------------------------- */

/* 表示・非表示切替 */

/* selected or latest ｴﾝﾄﾘｰﾘｽﾄ */
.selectentry       { display: none; }
#cid .selectentry,
#month .selectentry,
#search .selectentry,
#page .selectentry { display: block; }

.latestentry       { display: block; }
#cid .latestentry,
#month .latestentry,
#search .latestentry,
#page .latestentry { display: none; }

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