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

ホーム

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

テンプレート名 : Hot Chocolate

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>

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

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

<div id="page">

<div id="container">
	
	
	<div id="contents">
	
		<div id="header">
		
			<h1>{blog_name}</h1>
			<p id="site_description">{blog_description}</p>
		
		</div>
		
		
		<div id="main">
			
			
			<div class="entry">
				
				<div class="entry_date">{entry_date}</div>
				
				<div class="entry_body">
					<h2><a href="./?eid={entryarea_id}">{entry_title}</a></h2>
					<div class="entry_description">
					{entry_description}
					
					<div class="entry_more" id="sequel_id_{entry_sequel_id}">{entry_sequel}</div>
					
					</div>
					<div class="entry_author">author : {user_name} </div>
				</div>
				
				<ul class="entry_state">
					<li>| {category_name} | </li>
					<li>{entry_time} | </li>
					<li>{comment_num} | </li>
					<li>{trackback_num} | </li>
					<li>{pookmark_link} | </li>
					<li>{logpi_link} | </li>
				</ul>
			
			</div>
			{trackback_auto_discovery}
			
			
			
			<div class="entry"><div id="comments">

<h3>Comment</h3>
				
				<div id="comment_body">
				
				
				<div class="comment_box" id="comment_id_{comment_id}">
					{comment_description}
					<ul><li>| {comment_name} | </li><li>{comment_time} |</li></ul>
				</div>
				
				
				<form action="./?mode=comment" method="post">
				<input type="hidden" name="entry_id" value="{entry_id}" />
				<table summary="コメントフォーム" id="comment_form" border="0" cellspacing="0" cellpadding="0">
				<tr>
				<td><label for="name">Name :</label></td>
				<td><input type="text" tabindex="1" class="form_style" name="name" id="name" value="{cookie_name}" /></td>
				</tr>
				<tr>
				<td><label for="email">E-mail :</label></td>
				<td><input type="text" tabindex="2" class="form_style" name="email" id="email" value="{cookie_email}" /></td>
				</tr>
				<tr>
				<td><label for="url">URL :</label></td>
				<td><input type="text" tabindex="3" class="form_style" name="url" id="url" value="{cookie_url}" /></td>
				</tr>
				<tr>
				<td valign="top"><label for="description">Comments :</label></td>
				<td><textarea tabindex="4" class="form_style" name="description" id="description" rows="10" cols="50" style="width:240px;"></textarea></td>
				</tr>
				<tr>
				<td></td>
				<td><input type="submit" value="コメント送信" />
				<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
				<label for="set_cookie">Cookieに登録</label>
				</td>
				</tr>
				</table>
				</form>

</div>
			
			</div></div>
			
			
			
			<div class="entry"><div id="trackback">

<h3>Trackback</h3>
				
				<div id="trackback_body">
				
				<div id="trackback_url_title">この記事のトラックバックURL : </div>
				<input type="text" value="{trackback_url}" id="trackback_url" name="trackback_url" onfocus="this.select()" />
				
				
				<div class="trackback_box">
				{trackback_title} : {trackback_excerpt}
				<ul><li>| {trackback_blog_name} | </li><li>{trackback_time} |</li></ul>
				</div>
				
				
				</div>
			
			</div></div>
			
			
			
			<div class="entry" id="profile">
				<h2>プロフィール</h2>
				<div class="entry_body">
					<h3>名前 : {profile_name}</h3>
					<div class="entry_description">{profile_description}</div>
				</div>
				<ul class="entry_state">
					<li><a href="./">&#187; トップページに戻る</a></li>
				</ul>
			</div>
			
			
			
			<div id="entry_navi">
				{prev_entry} | <a href="./">TOP</a> | {next_entry}
			</div>
			
			
			
			<div id="page_navi">
				{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</p>
			</div>
			
		
		</div>
		
		
	</div>
	
	
	
	
	<div id="side">
	
		
		<div id="calendar">
		<table summary="カレンダー" id="calendar_cell" border="0" cellspacing="1" cellpadding="0">
		<tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
		</table>
		{calendar}
		</div>
		
		
		
		<div id="search_area">
		<form method="get" action="./">
		<input id="search" name="search" size="20" align="center" class="form" />
		<input type="submit" value="Search" class="button" />
		</form>
		</div>

<dl id="side_contents">
		
		
		<dt>Recent Entries</dt>
		<dd>{latest_entry_list}</dd>
		
		
		
		<dt>Categories</dt>
		<dd>{category_list}</dd>
		
		
		
		<dt>Archives</dt>
		<dd>{archives_list}</dd>
		
		
		
		<dt>Recent Comments</dt>
		<dd>{recent_comment_list}</dd>
		
		
		
		<dt>Recent Trackbacks</dt>
		<dd>{recent_trackback_list}</dd>
		
		
		
		<dt>Recommend</dt>
		<dd>{amazon_item}</dd>
		
		
		
		<dt>Profile</dt>
		<dd>{user_list}</dd>
		
		
		
		<dt>{freespace_title1}</dt>
		<dd>{freespace_contents1}</dd>
		
		
		
		<dt>{freespace_title2}</dt>
		<dd>{freespace_contents2}</dd>
		
		
		
		<dt>{freespace_title3}</dt>
		<dd>{freespace_contents3}</dd>
		
		
		
		<dt>{freespace_title4}</dt>
		<dd>{freespace_contents4}</dd>
		
		
		
		<dt>{freespace_title5}</dt>
		<dd>{freespace_contents5}</dd>
		
				
		
		<dt>Links</dt>
		<dd>{link_list}</dd>

<dt>Other</dt>
		<dd>
		<ul>
		<li><a href="/manage/">管理者ページ</a></li>
		<li><a href="/?mode=rss">RSS1.0</a></li>
		<li><a href="/?mode=atom">Atom0.3</a></li>
		<li><a href="https://jugem.jp/">Powered by JUGEM</a></li>
		</ul>
		</dd>
		
		
		
		<dt>Sponsored Link</dt>
		<dd style="padding:0;">{ad}</dd>
		
		
		</dl>
		
	</div>
	
	
	</div>
	
	
	
	<div id="footer">
		<address>{copyright}</address>
	</div>
	
	
</div>

</body>
</html>

CSS

/* =============================================

Template [ Hot Chocolate ]  
	
============================================= */

* { 
	margin:0;
	padding:0
}

h1,h2,h3,h4,h5,h6 { font-size:100%; }
img { border:none; vertical-align:top; }
hr { display:none; clear:both; }
br.clear, br.clearer { clear:both; }

fieldset,form,label,legend {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

body { 
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size:12px;
	color:#FFF;
}

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

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

/* ブログタイトルのリンクカラー */
h1 a:link { color:#FFF; text-decoration:none; }
h1 a:visited { color:#FFF; text-decoration:none; }
h1 a:active { color:#FFF; text-decoration:underline; }
h1 a:hover { color:#FFF; text-decoration:underline; }

/* 記事タイトルのリンクカラー */
div.entry h2 a:link { text-decoration:none; }
div.entry h2 a:visited { text-decoration:none; }
div.entry h2 a:active { text-decoration:underline; }
div.entry h2 a:hover { text-decoration:underline; }

/* 記事本文のリンクカラー */
div.entry a:link { color:#EA3F68; text-decoration:underline; }
div.entry a:visited { color:#EA3F68; text-decoration:underline; }
div.entry a:active { color:#0099ff; text-decoration:none; }
div.entry a:hover { color:#0099ff; text-decoration:none; }

/* カレンダーのリンクカラー */
div#calendar a:link { color:#CB454B; text-decoration:underline; }
div#calendar a:visited { color:#CB454B; text-decoration:underline; }
div#calendar a:active {color:#0099ff;  text-decoration:none; }
div#calendar a:hover { color:#0099ff; text-decoration:none; }

/*----------------------------------------
	レイアウト
----------------------------------------*/

div#page {
	margin:0 auto;
	width:700px;
	background:url(./template/valentine/img/bg_blog.gif) repeat-y;
}

div#container {
	padding:0 15px 0 30px;
	width:655px;
	background:url(./template/valentine/img/bg_header.gif) no-repeat;
}
	/* ----- Float Clearfix ----- */
	div#container { zoom:1;/*for IE 5.5-7*/ }
	div#container:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

div#contents {
	float:left;
	width:400px;
}

div#header {
		padding-top: 110px;
		height:60px;
		text-align:right;
	}
	
	div#main {
	
	}
	
div#side {
	float:right;
	width:215px;
}

div#footer {
	padding:0 0 30px 30px;
}

/*----------------------------------------
	ヘッダー
----------------------------------------*/

h1 {

/* ブログタイトルの文字サイズ */
	font-size: 18px;

font-family:verdana;
	font-weight: bolder;
}

p#site_description {

/* ブログ説明の文字サイズ */
	font-size: 10px;
	
	font-weight: bolder;
	color: #FFFFCC;
}

/*----------------------------------------
	エントリー
----------------------------------------*/

div.entry {
	margin-bottom:20px;
	background:url(./template/valentine/img/entry_top2.gif) no-repeat top;
}

div.entry_body {
	padding:2px 20px 5px;
	background:#ffebde;
}

div.entry_date {
	font-size: 12px;
	font-family:verdana;
	font-weight: bolder;
	color: #FF7182;
	padding: 15px 20px 0;
}

h2 {

/* 記事タイトルの文字サイズ */
	font-size: 13px;

font-weight: bolder;
	color: #EA3F68;
	margin-bottom: 9px;
}

div.entry_description {
	
	/* 記事の文字サイズ */
	font-size:12px;

width:340px;
	margin-bottom:7px;
	padding:10px;
	background:#FFF;
	color:#333;
	line-height:1.8;
	overflow:hidden;
}

div.entry_more {
	
}

blockquote {
	border: 3px dotted #CCC;
	padding:0.2em;
	margin:10px;
}

.entry_author {
	font-size:10px;
	font-family:verdana;
	color:#EA3F68;
	text-align:right;
}

ul.entry_state {
	padding: 5px 0 28px 20px;
	background:url(./template/valentine/img/entry_bottom2.gif) no-repeat bottom;
}

ul.entry_state li {
		display:inline;
		list-style-type:none;
		color:#EA3F68;
		font-size:10px;
	}

ul.entry_state li img {
		vertical-align:middle;
	}

/*----------------------------------------
	コメント＆トラックバックエリア
----------------------------------------*/

div#comments,
div#trackback {
	padding:0 0 35px 0;
	background:url(./template/valentine/img/entry_bottom2.gif) no-repeat bottom;
}

div#comments h3,
div#trackback h3 {
	padding:15px 20px 5px;
	font-size:13px;
	font-weight:bold;
	color:#F15A61;
	margin-bottom:9px;
}

div#comment_body,
div#trackback_body {
	padding:0 20px;
	background:#ffebde;
}

div.comment_box,
div.trackback_box {
	margin-bottom:20px;
	padding:15px 15px 8px;
	border:2px solid #fff;
	background:#fff;
	color:#333;
	font-size:10px;
	line-height:1.7;
}

div.trackback_box { margin:20px 0 0; }
	div.comment_box:hover,
	div.trackback_box:hover { border:2px solid #f38995; }
	
div.comment_box ul,
div.trackback_box ul {
	margin-top:10px;
	padding-top:5px;
	border-top:1px dotted #999;
	text-align:right;
}

div.comment_box ul li,
	div.trackback_box ul li {
		display:inline;
		font-size:10px;
		color:#EA3F68;
	}

/* コメントフォーム */
table#comment_form td{
	padding:3px 7px 3px;
	color:#CB454B;
}

.form_style {
	font-size :12px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	color : #333;
	padding: 2px;
	background-color: #FFF;
	border: 1px #999 solid;
}

/* トラックバックURL */
div#trackback_url_title {
	margin-bottom:5px;
	color:#333;
	font-size:13px;
}

input#trackback_url {
	width:330px;
	font-size:12px;
	color:#CB454B;
	padding:3px;
	background-color:#FFF;
	border:2px #f38995 solid;
}

/* ページナビゲーション */
div#page_navi,
div#entry_navi {
	margin-bottom:20px;
	text-align:center;
}

/*----------------------------------------
	プロフィール 
----------------------------------------*/

div#profile h2 {
	padding: 15px 20px 0;
}

div#profile h3 {
	margin-bottom:5px;
	color:#333;
}

/*----------------------------------------
	サイドエリア
----------------------------------------*/

dl#side_contents {
	padding:10px 0 0;
	background:url(./template/valentine/img/submenu_bg.gif) no-repeat;
}

dl#side_contents dt {
	height:16px;
	background:url(./template/valentine/img/linktitle.gif) no-repeat;
	font-size:12px;
	font-weight:bolder;
	line-height:1.1;
	color:#BFE1F5;
	margin:0 0 5px 0;
	padding:0 0 2px 23px;
	border-bottom:1px #FFF dotted;
}

dl#side_contents dd {
	font-size:11px;
	line-height:1.6;
	color:#FFFFCC;
	margin:0 0 20px 0;
	padding:0 0 0 18px;
}

/* カレンダー */
div#calendar {
	padding:18px 0 0 8px;
	color: #CB454B;
}

table#calendar_cell {
	background:#fff;
}

table#calendar_cell td {
	padding:2px 0;
	font-size:10px;
	width:26px;
	text-align:center;
	background:#CB454B;
	border:1px #CB454B solid;
	color:#fff;
}

div.calendar_month {
	font-size:10px;
	margin: 0px auto 15px;
	padding:3px;
	border-top:1px #ccc solid;
	border-right:1px #fff solid;
	border-left:1px #ccc solid;
	border-bottom:1px #fff solid;
	background:#fff;
}

td.today {
	font-size:10px;
	font-weight:bold;
	background-color:#CB454B;
}

td.cell {
	font-size:10px;
	width:26px;
	height:15px;
	margin:0;
	padding:0;
	text-align: center;
		
	border-top:1px #ccc solid;
	border-right:1px #fff solid;
	border-left:1px #ccc solid;
	border-bottom:1px #fff solid;
	background:#fff;

color: #CB454B;
}

/* 検索 */
div#search_area {
	margin-bottom:10px;
	text-align:center;
}

input#search {
	width:130px;
	font-size:12px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	color:#CB454B;
	padding:2px;
	background-color:#FFEBDE;
	border:2px #FFF solid;
}

/*----------------------------------------
	フッター（コピーライト） 
----------------------------------------*/

address {
	font-size:11px;
	font-family:verdana;
	font-style:normal;
}

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