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

ホーム

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

テンプレート名 : poco8-original

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 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>
<script type="text/javascript">

</script>
</head>

<div id="header">
		
		<h1>{blog_name}</h1>
		
	</div>
	
	
	<div id="sidebar">
		<div class="description">
			{blog_description}
		</div>
		
		
		<div class="menu">
			<div class="m_caption">▼ latest entries</div>
			<div class="submenu">
				{latest_entry_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ categories</div>
			<div class="submenu">
				{category_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ latest comments</div>
			<div class="submenu">
				{recent_comment_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ latest trackbacks</div>
			<div class="submenu">
				{recent_trackback_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ archives</div>
			<div class="submenu">
				{archives_list}
			</div>
		</div>
		
		
		
		
		<div class="menu">
			<div class="m_caption">▼ links</div>
			<div class="submenu">
				{link_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ profiles</div>
			<div class="submenu">
				{user_list}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ recommend</div>
			<div class="submenu">
				{amazon_item}
			</div>
		</div>
		
		
		
		<div class="menu">
			<div class="m_caption">▼ {freespace_title1}</div>
			<div class="submenu">
				{freespace_contents1}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ {freespace_title2}</div>
			<div class="submenu">
				{freespace_contents2}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ {freespace_title3}</div>
			<div class="submenu">
				{freespace_contents3}
			</div>
		</div>
		
		
		
		<div class="menu">
			<div class="m_caption">▼ {freespace_title4}</div>
			<div class="submenu">
				{freespace_contents4}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ {freespace_title5}</div>
			<div class="submenu">
				{freespace_contents5}
			</div>
		</div>

<div class="menu">
			<div class="m_caption">▼ ad</div>
			<div class="ad">
			<ul>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01001n3p001lgd" target="_blank">◇◆◇ギリシャ旅行が当たる！☆ぐるなびSearchリニューアルキャンペーン♪◇◆◇<img src="http://www.accesstrade.net/at/r.html?rk=01001n3p001lgd" border="0"></a></li>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01001ml2001lgd" target="_blank">ニンテンドーDS Lite1円キャンペーン<img src="http://www.accesstrade.net/at/r.html?rk=01001ml2001lgd" border="0"></a></li>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01001lsv001lgd" target="_blank">その場で人気のIXYデジカメが当たる！<img src="http://www.accesstrade.net/at/r.html?rk=01001lsv001lgd" border="0"></a></li>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01001hte001lgd" target="_blank">パソコン買うなら必ずチェック！<img src="http://www.accesstrade.net/at/r.html?rk=01001hte001lgd" border="0"></a></li>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01001k3v001lgd" target="_blank">デジカメ・生活家電・メモリーカード<img src="http://www.accesstrade.net/at/r.html?rk=01001k3v001lgd" border="0"></a></li>
				<li><a href="http://www.accesstrade.net/at/c.html?rk=01000015001lgd" target="_blank">アフィリエイトプログラムの広告なら<img src="http://www.accesstrade.net/at/r.html?rk=01000015001lgd" border="0"></a></li>
			</ul>
		
			{ad}
		
			</div>
		</div>

</div>

<div id="main">
		<div id="search">
			<form method="get" action="./?">
			<a href="./?mode=rss">RSS</a> | <a href="./?mode=atom">ATOM</a> | search entries inside this blog: 
				<input class="keyword" name="search" size="16" />
				<input type="submit" value="search" class="btn" />
			</form>
		</div>

<div id="cal">
			<div>
				<a href="./?month={calendar_prev_yearmonth}">&lt;&lt;</a>
				{calendar_str_yearmonth}
				<a href="./?month={calendar_next_yearmonth}">&gt;&gt;</a>
			</div>
			<div class="days">
				{calendar_horizontal_only}
			</div>
		</div>

<div class="navi">
			<a href="{prev_permalink}">&lt;&lt; previous entry</a> |
			<a href="./">main page</a> |
			<a href="{next_permalink}">next entry &gt;&gt;</a>
		</div>

<dl>
			<dt>
				<ul>
					<li class="caption">▼ {entry_title}</li>
					<li class="date">{entry_eng_week}, 
<script type="text/javascript">

</script>
 {entry_day}, {entry_year} at {entry_time_only}</li>
				</ul>
			</dt>
			<dd>
				<div class="entry">
				{entry_description}
				<div class="entry_more">
				{entry_sequel}
				</div>
				</div>
				<div class="note">
					{user_name} | {category_name} | {comment_num} | {trackback_num}
				</div>
			</dd>
		</dl>

<a name="comments"></a>
		<div class="comments">▼ comments</div>
		
		<ul class="comment">
			<li class="commentby">{comment_name} さん</li>
			<li class="commentbody">{comment_description}</li>
			<li class="commentdate">{comment_eng_week}, 
<script type="text/javascript">

</script>
 {comment_day}, {comment_year}
				at {comment_hour_24}:{comment_minute}</li>
		</ul>

<div class="commentform">
			<form name="comment_area" action="./?mode=comment" method="post">
				<input type="hidden" name="entry_id" value="{entry_id}" />
				<table>
				<tr><th>name:</th><td><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="form" /></td></tr>
				<tr><th>email:</th><td><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="form" /></td></tr>
				<tr><th>url:</th><td><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="form" /></td></tr>
				<tr><th valign="top">comments:</th><td><textarea name="description" rows="8" id="description" tabindex="4" class="form"></textarea></td></tr>
				<tr><th><br /></th><td><input tabindex="5" type="submit" value="コメント送信" class="btn" />
						<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
						<label for="set_cookie" accesskey="C">cookieに登録</label>
				</td></tr>
				</table>
			</form>
		</div>

<a name="trackback"></a>
	    <div class="tb">▼ trackbacks</div>
	    	    <div class="tburl">trackback url: {trackback_url}</div>
		
		<ul class="comment">
			<li class="commentby">{trackback_title}</li>
			<li class="commentbody">{trackback_excerpt}</li>
			<li class="commentdate">{trackback_blog_name} | {trackback_eng_week}, 
<script type="text/javascript">

</script>
				{trackback_day}, {trackback_year} at {trackback_hour_24}:{trackback_minute}</li>
		</ul>

<div class="comments">▼ profile</div>
		<ul class="comment">
			<li class="commentby">{profile_name}</li>
			<li class="commentbody">{profile_description}</li>
		</ul>

<div class="navi">
			<a href="{prev_page_url}">&lt;&lt; previous page</a> | 
			{page_now} / {page_num} | 
			<a href="{next_page_url}">next page &gt;&gt;</a>
		</div>
		<div class="footer"></div>
		
	</div>
	<br class="clear" />
	<div class="copy">{copyright}</div>
</div>
</body>
</html>

CSS

/****************************************************************
 * 全体的な設定 
 ****************************************************************/
* {
	margin: 0px;
	padding: 0px;
}

body {
	color:#987;
	background-color:#fff;
	font: 12px/1.5 "Verdana", "MS UI Gothic", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
}

img {
	border:none;
}

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

/****************************************************************
 * リンクカラー 
 ****************************************************************/

a:link,
a:visited {color: #c60; text-decoration: none;}
a:active,
a:hover {color: #c60; text-decoration: underline;}

/****************************************************************
 * ページレイアウト
 ****************************************************************/

#wrap {				/* 全体：幅のみ */
	width: 820px;
}

#sidebar {			/* メニュー：左側 */
	width: 212px;
	float: left;
}

#main {				/* メインコンテンツ：右側 */
	width: 608px;
	float: right;
}

/****************************************************************
 * メニュー関連
 ****************************************************************/

#sidebar .menu{
	background-color: #fff;
	color: #963;
	border-right: solid 1px #963;
}

#sidebar .menu .m_caption {
	padding: 6px 0px 6px 8px;
	background-color: #963;
	background-image: url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16453.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #fff;
	font-weight: bold;
}

#sidebar .menu .submenu {
	padding-bottom: 8px;
	margin-left: 8px;
	background: #ffe url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_17497.gif) repeat-y scroll left top;
}

#sidebar .menu .submenu li {
	list-style-type: none;
	padding: 4px 4px 4px 16px;
	margin: 0px 6px;
	border-bottom: 1px dotted #999;
	display: block;
}

.description {			/* サイト説明はメニュー上部に */
	color: #fff;
	padding: 3px;
	font-size: 10px;
	margin-bottom: 4px;
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16431.gif) no-repeat scroll right bottom;
}

#sidebar .ad {
	border-left: solid 1px #963;
	margin-left: 8px;
	background-color: #fff;
	padding: 4px 0px;
	font-size: 10px;
}

#sidebar .ad li {
	list-style-type: none;
	padding: 4px 4px 4px 8px;
	margin: 0px 6px;
	border-bottom: 1px dotted #999;
	display: block;
}

#sidebar #ad {
	padding: 4px;
}

#sidebar .trail {
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16459.gif) no-repeat scroll left center;
	padding: 10px 0px 9px 16px;
}

/****************************************************************
 * ヘッダ関連（タイトルのみ）
 ****************************************************************/

#header H1 {			/* ブログタイトル */
	background-color: #963;
	color: #fff;
	padding: 3px;
	font-size: 32px;
}

#header h1 a {			/* ブログタイトル */
	color: #fff;
}

/****************************************************************
 * カレンダ関連（メインコンテンツ内）
 ****************************************************************/

#cal {
	background: #fff url(http://img-cdn.jg.jugem.jp/b63/297892/20061018_16417.gif) no-repeat scroll left top;
	font-size: 9px;
	padding: 16px 16px;
	color: #987;
}

#cal .days {
	text-align: right;
}

/****************************************************************
 * サーチフォーム（メインコンテンツ内）
 ****************************************************************/

#search {
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16431.gif) no-repeat scroll right bottom;
	color: #fff;
	padding: 6px 24px;
	text-align: right;
}

#search .keyword {		/* キーワード入力部 */
	font-family: "Tahoma", "Verdana", "MS UI Gothic", "ＭＳ ゴシック", "Osaka‐等幅";
	color: #666;
	font-size: 12px;
	margin-bottom: 1px;
	padding: 1px 2px;
	text-align: left;
}

#search a {
	color: #fff;
}

/****************************************************************
 * メインコンテンツ：投稿記事
 ****************************************************************/

#main dl {
	padding-bottom: 12px;
}
#main dl dd {
	padding: 8px 20px 8px 36px;
}

#main dl dt {
	margin: 6px;
	padding: 6px 12px;
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16463.gif) no-repeat scroll left top;
	color: #fff;
}

#main dl dt ul li {
	width: 571px;
	list-style-type: none;
}

#main li.caption {
	font-weight: bold;
}

#main li.date {
	text-align: right;
	font-size: 10px;
}

.entry {			/* 記事本文 */
	padding: 0px 12px;
}

.note {				/* 投稿者、投稿日時等 */
	border-top: dotted 1px #999;
	border-bottom: dotted 1px #999;
	margin: 12px 0px;
	padding: 8px 0px;
	text-align: right;
	font-size: 10px;
}

.pict {				/* 投稿記事の画像 */
	padding: 4px;
	border-top: 1px #ddd solid;
	border-right: 2px #aaa solid;
	border-bottom: 2px #aaa solid;
	border-left: 1px #ddd solid;
	margin: 6px;
}
/****************************************************************
 * メインコンテンツ：コメント、トラックバック
 ****************************************************************/

.comments {
	margin: 6px;
	padding: 6px 12px;
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16463.gif) no-repeat scroll left top;
	color: #fff;
}

ul.comment {
	padding: 8px 20px 18px 36px;
	list-style-type: none;
}

ul.comment li.commentby {
	padding: 4px 10px;
	color: #963;
	border-bottom: dotted 1px #999;
}

ul.comment li.commentdate {
	text-align: right;
	padding-bottom: 8px;
	color: #963;
	border-bottom: dotted 1px #999;
	font-size: 9px;
}

ul.comment li.commentbody {
	padding: 4px 6px 12px 18px;
}

.tb {
	margin: 6px 6px 0px 6px;
	padding: 6px 12px;
	background: #963 url(http://img-cdn.jg.jugem.jp/b63/297892/20061019_16463.gif) no-repeat scroll left top;
	color: #fff;
}

.tburl {
	margin: 0px 6px 6px 6px;
	padding: 6px 12px;
	color: #fff;
	text-align: right;
	background-color: #963;
}

.commentform {
	padding: 12px 48px 36px 64px;
	text-align: right;
}
.commentform th {
	text-weight: normal;
	text-align: right;
}

.commentform td {
	padding-left: 3px;
	text-align: left;
}

.commentform .form {
	width: 390px;
	font-family: "Tahoma", "MS UI Gothic", "ＭＳ ゴシック", "Osaka‐等幅";

}

textarea.form {
	height: 160px;
}

/****************************************************************
 * メインコンテンツ：その他
 ****************************************************************/

.footer {			/* メイン部のフッタ */
	border: none;
	background-color: #963;
	color: #963;
	height: 3px;
	margin-left: 6px;
	margin-right: 6px;
	font-size: 0px;
	line-height: 0px;
}

.navi {				/* メイン部上下のナビゲーション（ページ、エントリ） */
	padding-top: 16px;
	padding-right: 12px;
	text-align: right;
	color: #987;
}

.btn {				/* submitボタン（検索、コメントフォーム共通） */
	font-family: "Verdana", "MS UI Gothic", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size: 12px;
	padding: 1px 3px;
}

/****************************************************************
 * フッタ
 ****************************************************************/

.copy {				/* copyright */
	text-align: right;
	font-size: 9px;
	padding-right: 6px;
	margin-bottom: 100px;
}

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