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

ホーム

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

テンプレート名 : cafe de raisin

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" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="cafe2.css" rel="stylesheet" media="screen,print">
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print">

</script>

</head>
<body id="{eid}" onload="javascript:initval();">
{gmo_header_src}

<div id="page">

<div id="header">
	
	
	<h1><a href="http://caferaisin.jugem.jp/"><img src="http://img-cdn.jg.jugem.jp/31e/549623/20070710_34234.gif" alt="cafe&nbsp;de&nbsp;raisin" width="325" height="199" /></a></h1>
	<p id="read"><em><img src="http://img-cdn.jg.jugem.jp/31e/549623/20070710_34235.gif" alt="1日だけのスペシャルなcafe&nbsp;カフェ・ド・レーズン！" width="475" height="85" /></em></p>
	
	
	<div id="cateMenu">
		
		{category_list}
		
	</div>
	
	
 	<div id="fanction">
	
		
		{selected_entry_list}
		
		
		
		{archives_list}
		
		
		
		<p class="entry_navi">
			{prev_entry}
			<a href="./">main</a>
			{next_entry} 
		</p>
		
		
	</div>
	
 </div>

<div id="main">

<div class="entry_area">
		<h2><span class="category">【{category_name}】</span>{entry_title}</h2>
		
		<div id="entry_description" class="entry">{entry_description}</div>
		<a name="sequel"></a>
		<div id="entry_sequel" class="entry">{entry_sequel}</div>
		
		{trackback_auto_discovery}
	</div>

<div class="comment">
		<a name="comments" id="comments"></a>
		<div class="comments_area">
			<dl id="com_area">
			<dt class="title">コメント</dt>
			
			<dt class="com_desc">{comment_description}</dt>
			<dd>
				<ul>
				<li>{comment_name}</li>
				<li>{comment_time}</li>
				</ul>
			</dd>
			
			</dl>
		</div>
		
		<div class="comments_area">
			<dl id="com_form">
			<dt class="title">コメントする</dt>
			<dd>
			<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
			<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
			
			<label for="name">name:</label><br/>
			<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /><br />
			
			<label for="email">email:</label><br>
			<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /><br />
			
			<label for="url">url:</label><br>
			<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /><br />
			
			<label for="description">comments:</label><br />
			<textarea tabindex="4" id="description" name="description" rows="5"></textarea><br />
			
			<input tabindex="5" type="image" src="./template/piano/img/submit.gif" value="コメント送信" /><br />
			<input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie">入力情報を登録しますか？</label>
			</form>
			</dd>
			</dl>
		</div>
		
	</div>

<div class="trackback">
		<a name="trackback" id="trackback"></a>
		<div class="trackback_area">
			<dl id="tb_form">
			<dt class="title">この記事のトラックバックURL</dt>
			<dd><input type="text" value="{trackback_url}" class="input" /></dd>
			</dl>
		</div>

<div class="trackback_area">
			<dl id="tb_area">
			<dt class="title">トラックバック</dt>
			
			<dt class="tb_title">{trackback_title}</dt>
			<dd>{trackback_excerpt}</dd>
			<dd class="tb_state">
				<ul>
					<li>{trackback_blog_name}</li>
					<li>{trackback_time}</li>
				</ul>
			</dd>
			
			</dl>
		</div>
		
	</div>

<div class="profile">
		<div class="profile_area">
			<dl id="profile_area">
			<dt class="title">プロフィール</dt>
			<dd class="txt_bold">{profile_name}</dd>
			<dd>{profile_description}</dd>
			</dl>
		</div>
	</div>

<div id="second">
	
	<p class="page_navi">{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</p>
	
	<ul id="others">
		<li><a href="./admin/">管理者ページ</a></li>
		<li><a href="./?mode=rss">RSS1.0</a></li>
		<li><a href="./?mode=atom">Atom0.3</a></li>
	</ul>
</div>

<div id="footer">
	<address class="copyright">{copyright}</address>
	
	{ad}
	
	{powered}
</div>

</div>

</body>
</html>

CSS

/* CSS Document */

/* 主要ブロック要素の初期化 */
html,
body,
table,
tr,
th,
td,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
pre,
dl,
dt,
dd,
blockqote,
form,
hr,
br,
fieldset,
address	{
	margin:0;
	padding:0;
	font-size:1em;
	font-weight:normal;
	font-style:normal;
	list-style:none;
	}
a img {
	border:none;
	}
a {
	color:#CC66FF;
	}
a:hover {
	color:#33CCFF;
	}

/* タグの再設定 */
body {
	font-size:75%;
	color:#ffffff;
	}

/* 共通クラス */
.crear {
	margin:0;
	padding:0;
	clear:both
	}

/* レイアウト */
body {
	text-align:center;
	background-color:#FFD900;
	}
div#page {
	margin:0 auto;
	width:800px;
	background-image:url(http://img-cdn.jg.jugem.jp/31e/549623/20070710_34238.gif);
	background-position:left;
	background-repeat:repeat-y;
	text-align:left;
	}

/* ヘッダー */
div#header {
	position:relative;
	height:200px;
	}
div#header a {
	color:#ffffff;
	}
div#header h1 {
	position:absolute;
	top:0;
	left:0;
	}
div#header p#read {
	position:absolute;
	top:0;
	left:325px;
	}
div#header div#cateMenu {
	position:absolute;
	width:475px;
	height:45px;
	top:85px;
	left:325px;
	background-image:url(http://img-cdn.jg.jugem.jp/31e/549623/20070710_34236.gif);
	background-position:top;
	background-repeat:no-repeat;
	}
div#header div#cateMenu ul li {
	float:left;
	width:150px;
	text-align:center;
	height:45px;
	line-height:45px;
	}
div#header div#fanction ul {
	border-left:1px solid #ffffff;
	}
div#header div#fanction ul li {
	display:inline;
	border-right:1px solid #ffffff;
	padding-left:10px;
	padding-right:10px
	}

/* メイン */
div#main {
	width:750px;
	margin:0 25px;
	padding-bottom:50px;
	}
div#main div.entry_area {
	position:relative;
	float:left;
	width:250px;
	height:250px;
	min-height:250px;
	overflow:hidden;
	}
body#eid div#main {
	width:700px;
	margin:0 50px;
	padding-bottom:50px;
	}
body#eid div#main div.entry_area {
	overflow:visible;
	width:430px;
	height:100%;
	background-color:#006666;
	}
body#eid div#main div.entry_area div#entry_description {
	text-align:center;
	padding:35px 10px 10px 10px;
	}
div#main div.entry_area h2 {
	position:absolute;
	top:0;
	left:0;
	width:98%;
	height:50px;
	padding:4px 1%;
	background-color:#000000;
	color:#FFFFFF;
	filter: alpha(opacity=80);
	opacity: 0.8;
	line-height:25px;
	font-weight:bold;
	}
div#main div.entry_area div#entry_sequel {
	position:absolute;
	bottom:3px;
	right:3px;
	background-color:#000000;
	color:#FFFFFF;
	filter: alpha(opacity=80);
	opacity: 0.8;
	font-size:83.333333%;
	text-align:right;
	}
div#main div.entry_area div#entry_sequel a {
	padding:3px;
	}
body#eid div#main div.entry_area div#entry_sequel {
	position:static;
	text-align:left;
	padding:10px;
	}

div#main div.comment {
	float:right;
	width:230px;
	}
div#main div.trackback {
	float:right;
	width:230px;
	}
div#main div.profile {
	float:right;
	width:230px;
	}

/* セカンド */
div#second {
	width:750px;
	margin:0 25px;
	text-align:center;
	}
div#second ul#others li {
	display:inline;
	}

/* フッター */
div#footer {
	width:750px;
	margin:0 25px;
	text-align:center;
	}

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