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

ホーム

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

テンプレート名 : ricocats

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 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 src="./template/analogue/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>
<body onload="javascript:initval();">
<a name="top"></a>

<div id="wrapper">

<div id="header">
		<div class="header_p">
	
		<div class="search">
			
			<form method="get" action="">
				<span>Search this site!</span>
				<input id="search" name="search" size="20" class="form" />
				<input type="submit" value="Search" class="button" />
			</form>
			
		
			
			<div class="cat_head"><img src="./template/ricocats/img/spacer.gif" width="1" height="130" /></div>
			
		</div>
		
		
		
		<div class="title">
			<h1>{blog_name}</h1>
			<p>{blog_description}</p>
		</div>
		
		
		<br style="clear:both; " />
		</div>
	</div>
	
	
	
	<div id="calendar">{calendar_horizontal}</div>

<div id="body">
		<div class="body_p">
		
		
		<div id="main">
			
			
			<div class="sequel">{prev_entry} | <a href="./">main</a> | {next_entry}</div>
			
			
			
			<div class="entry">
				<div class="entry_head"><img src="./template/ricocats/img/spacer.gif" width="1" height="60" /></div>
				<div class="entry_main">
					<div class="entry_date">{entry_date} {entry_time}</div>
					<span class="entry_title">{entry_title}</span>
					
					<div class="entry_body">
						{entry_description}</p>
						
						<a name="sequel"></a>
						<p class="entry_more">{entry_sequel}</p>
					</div>
					
					<div class="entry_foot">
						<div class="pagetop"><a href="#top">▲</a></div>
						<div class="entry_state">| {user_name} | {category_name} | {comment_num} | {trackback_num} |</div>
					</div>
				</div>
				<div class="entry_bottom"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
			</div>
			{trackback_auto_discovery}
			
			
			
			<div class="pink">
				<div class="pink_head"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
				<div class="pink_main">
					<p class="pink_title">Comment</p>
					
					
					<span class="comm_state">{comment_name} | {comment_time} |</span>
					<div class="comm_body">{comment_description}</div>
					
					
					
					<div class="comm_form">
					<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}" class="form" /><br />
						<label for="email">email:</label><br />
						<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" class="form" /><br />
						<label for="url">url:</label><br />
						<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:200px;" class="form" /><br />
						<label for="description">comments:</label><br />
						<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:350px;" class="form02"></textarea><br /><br />
						<input tabindex="5" type="submit" value="Submit" class="button2" onclick="javascript:setval();" />
						<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none; " />
						<label for="set_cookie">Cookieに登録</label>
					</form>
					</div>
					
				</div>
				<div class="pink_bottom"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
			</div>
			
			
			
			<div class="pink">
				<div class="pink_head"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
				<div class="pink_main">
					<p class="pink_title">Trackback</p>
					<div class="tb_url">URL → {trackback_url}</div>
					
					
					<span class="tb_title">{trackback_title}</span>
					<div class="tb_body">
						{trackback_excerpt}
						<div class="tb_state">| {trackback_blog_name} | {trackback_time} | </div>
					</div>
					
					
				</div>
				<div class="pink_bottom"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
			</div>
			
			
			
			<div class="entry">
				<div class="entry_head"><img src="./template/ricocats/img/spacer.gif" width="1" height="60" /></div>
				<div class="entry_main">
					<div class="entry_date">profile</div>
					<div class="entry_title">{profile_name}</div>
					<div class="entry_body"><p>{profile_description}</p></div>
				</div>
				<div class="entry_bottom"><img src="./template/ricocats/img/spacer.gif" width="1" height="15" /></div>
			</div>
			
			
			
			
			<div class="sequel" style="margin-bottom:15px; "><a href="{prev_page_url}">&lt;new</a>  | <a href="top">top</a> |  <a href="{next_page_url}">old&gt;</a></div>
			
		
		</div>
		
	
	
		
		<div id="side">
			
			
			<div class="linktitle">PROFILE</div>
			<div class="linktext">
				{user_list}
			</div>

<div class="linktitle">SPONSORED LINKS</div>
	{ad}

<div class="linktitle">マイペット</div>

</td>
<td bgcolor=white>

<a href="http://meropar.jp/" target="_blank"><img src="http://meropar.jp/img/logo_blog_1.gif" border="0" style="border: none;" onmouseover="this.src='http://meropar.jp/img/logo_blog_2.gif'" onmouseout="this.src='http://meropar.jp/img/logo_blog_1.gif'" alt="メロメロパーク" /></a><script language="JavaScript" type="text/javascript" src="http://js.meropar.jp/meromero.js?key=01a07fbae635e8ce4698dece8543d99a" ></script>
　　　<div class="linktext">{latest_entry_list}</div>
</td></tr></table>

<br>
			
			<div class="linktitle">ENTRY</div>
			<div class="linktext">
				{selected_entry_list}
			</div>
			
			
			
			<div class="linktitle">CATEGORY</div>
			<div class="linktext">
				{category_list}
			</div>
			
			
			
			<div class="linktitle">ARCHIVES</div>
			<div class="linktext">
				{archives_list}
			</div>
			
			
			
			<div class="linktitle">COMMENT</div>
			<div class="linktext">
				{recent_comment_list}
			</div>
			
			
			
			<div class="linktitle">TRACKBACK</div>
			<div class="linktext">
				{recent_trackback_list}
			</div>
			
			
			
			<div class="linktitle">RECOMMEND</div>
			<div class="linktext">
				{amazon_item}
			</div>

<div class="linktitle">{freespace_title1}</div>
	<div class="linktext">{freespace_contents1}</div>

<div class="linktitle">{freespace_title2}</div>
	<div class="linktext">{freespace_contents2}</div>

<div class="linktitle">{freespace_title3}</div>
	<div class="linktext">{freespace_contents3}</div>

<div class="linktitle">{freespace_title4}</div>
	<div class="linktext">{freespace_contents4}</div>

<div class="linktitle">{freespace_title5}</div>
	<div class="linktext">{freespace_contents5}</div>

<div class="linktitle">MOBILE</div>
	<div class="linktext">{site_qrcode}</div>

<div class="linktitle">LINK</div>
			<div class="linktext">
				{link_list}
			</div>
			
			
			
			<div class="linktitle">OTHERS</div>
			<div class="linktext">
			<ul>
			<li><a href="./admin/">管理者ページ</a></li>
			<li><a href="./?mode=rss">RSS1.0</a></li>
			<li><a href="./?mode=atom">Atom0.3</a></li>
			<li>{powered}</li>
			</ul>
			</div>
			
		
		</div>

<br class="clear" />
		</div>
	</div>
	
	
	
	<div id="footer">{copyright}</div>

</div>

</body>
</html>

CSS

body {
	color: #FFF;
	background-color:#000000;
	background-image:url(./template/ricocats/img/wall_tuki_wide.jpg);
	background-position:right bottom;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family:"MS UI Gothic";
	font-size:12px;
	line-height:170%;
	margin:0;
	padding:0;
}

* {
	margin: 0;
	padding: 0;
}

input, textarea {
	margin:0px;
	border:1px #000 solid;
	color: #000;
}

img {border:none;}

ul {margin:0px; padding:0px;}
li {list-style-type:none;margin:0px;padding:0px;}

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

a:link,
a:visited,
a:active  {color: #FF0066; text-decoration: none;}
a:hover   {color: #3333CC; text-decoration: none;}

#header .blog_ a:link,
#header .title a:visited,
#header .title a:active  {color: #FFFFFF; text-decoration: none;}
#header .title a:hover   {color: #FF0066; text-decoration: none;}

#side a:link,
#side a:visited {color: #FFF; background-color:#000; text-decoration: none;}
#side a:active  {color: #000; background-color:#FFF; text-decoration: none;}
#side a:hover   {color: #000; background-color:#FF0066; text-decoration: none;}

.pink a:link,
.pink a:visited,
.pink a:active  {color: #3333CC; text-decoration: none;}
.pink a:hover   {color: #CC0000; text-decoration: none;}

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

#wrapper {
	width:700px;
	background:#FFF url(./template/ricocats/img/wrapper.gif) repeat-y;
	margin-left:60px;
	}

#header {
	width:670px;
	background:#000;
	color:#FFF;
	margin:0 auto;
	}

#calendar {
	font-family: "Verdana";	
	font-size: 10px;
	width:670px;
	margin:0 auto;
	background:url(./template/ricocats/img/calendar.gif) no-repeat;
	background-position:bottom;
	text-align:center;
	}

#body {
	width:670px;
	margin:10px auto 15px auto;
	background:#FFF url(./template/ricocats/img/body.gif);
	border:1px #000 solid;
	}

#main {
	width:409px;
	float:left;
	}

#side {
	margin-left:420px;
	color:#000;
	}

#footer {
	width:670px;
	margin:0 auto;
	background:#000 url(./template/ricocats/img/footer.gif) no-repeat;
	text-align:center;
	}

.header_p {padding:10px 10px 0px 10px; }
.body_p {padding:15px 10px;}

/* ------------------------------------- 
 *	ヘッダー（ブログタイトル、検索、猫画像）
 * ------------------------------------- */

.title h1 {
	font-size:24px;
	font-family: "Verdana";
	line-height:150%;
	}

#header .title {margin-right:350px;}

#header .search {
	width:350px;
	float:right;
	text-align:right;
	}
#header .search input {
	font-family:Verdana, "MS UI Gothic";
	font-size:10px;
	}
input.form {width:140px;}
input.button {
	color:#FFF;
	background-color:#999;
	border:1px #FFF solid;
	}

.cat_head {
	height:130px;
	background:url(./template/ricocats/img/cat_head.gif) no-repeat;
	background-position:right bottom;
	}

/* ------------------------------------- 
 *	メイン（記事、コメント、トラバ、プロフィール）
 * ------------------------------------- */
 
 /* 記事 */
.entry{
	margin-bottom:25px;
	}
.entry_head   { height:60px; background:url(./template/ricocats/img/entry_head.gif) no-repeat;}
.entry_bottom { height:15px; background:url(./template/ricocats/img/entry_bottom.gif) no-repeat;}

.entry_main {background:#000;width:409px;}

.entry_date { color:#FF0066;font-weight:bolder;}

.entry_title { color:#FFF; font-weight:bolder; border-left:5px #FFF solid; padding-left:5px;}

.entry_body {padding:20px 10px;}

.entry_foot {padding:20px 10px 0px 10px;}
.pagetop {width:30px; float:right; text-align:right;}
.entry_state {margin-right:30px;}

.pict {border: none;}

blockquote {
	font-size: 12px;
	margin: 10px;
	padding: 5px;
	border: 1px dotted #FFF;
	}

/* コメント・トラバ */
 
.pink{ margin-bottom:15px;}
.pink_head { height:15px; background:url(./template/ricocats/img/pink_head.gif) no-repeat; }
.pink_bottom { height:15px; background:url(./template/ricocats/img/pink_bottom.gif) no-repeat; }
.pink_main {background:#FF0066;padding:10px 0;}
.pink_title {color:#FFF;font-weight:bolder;}

.comm_state { border-left:5px #000 solid; padding-left:5px; color:#000;}
.comm_body { color:#FFF; padding:10px 10px 30px 10px;}
.comm_form {
	font-size:10px;
	font-family:Verdana, "MS UI Gothic";
	line-height:150%;
	margin: 10px 15px; }
.comm_form input {border:1px #000 solid;}
input.button2 {
	font-family:Verdana;
	font-size:10px;
	color:#000;
	background-color:#FFF;
	border:1px #000 solid;
	}

.tb_url { background:#000;   padding:0 5px; margin:10px;}
.tb_title {border-left:5px #000 solid; padding-left:5px; font-weight:bolder;}
.tb_body { color:#FFF; margin:0px 10px 30px 10px;}
.tb_state { color:#000;}

.sequel { background:#000; text-align:center; margin-bottom:5px;}

/* ------------------------------------- 
 *	サイド
 * ------------------------------------- */
 
.linktitle {
	color:#000;
	font-size:16px;
	font-family:Verdana,;
	font-weight:bolder;
	padding:3px 0px 4px 30px;
	background:url(./template/ricocats/img/sidekadomaru_01.gif) no-repeat;
	background-position:left ;
	}
.linktext { margin:10px;}

#ad.links {
margin: 10px 0px 15px 0px;
}

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