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

ホーム

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

テンプレート名 : ghost

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

<body onload="javascript:initval();">
<a name="top"></a>
<div id="layout">
<a name="top" id="top"></a>

	<div id="title">
		<h1>{blog_name}</h1>
		<h2>{blog_description}</h2>
	</div>
	<div id="menu">

		<div>
		<h4><a href="JavaScript:treeMenu('tmenu1');"><img src="http://img-cdn.jg.jugem.jp/401/269924/20061022_242196.gif" alt="Entry" width="84" height="30" /></a></h4>
			<span id="tmenu1" style="display:none;">{selected_entry_list}</span>
		</div>
		<div>
		<h4><a href="JavaScript:treeMenu('tmenu2');"><img src="http://img-cdn.jg.jugem.jp/401/269924/20061022_242195.gif" alt="Category" width="107" height="30" /></a></h4>
			<span id="tmenu2" style="display:none;">{category_list}</span>
		</div>

<div>
		<h4><a href="JavaScript:treeMenu('tmenu3');"><img src="http://img-cdn.jg.jugem.jp/401/269924/20061022_242194.gif" alt="Archive" width="100" height="30" /></a></h4>
			<span id="tmenu3" style="display:none;">{archives_list}</span>
		</div>

</div>

<div id="body">

		<div class="entry">
			<div class="entry_head"><h3>{entry_title}</h3><p class="date">{entry_date}</p><br class="clear" /></div>
			<div class="entry_body {entry_eng_week_short}">
			{entry_description}
			<p class="entry_more">{entry_sequel}</p>
			<p class="entry_footer">by{user_name}  {category_name}　{comment_num}　{trackback_num}　<a href="#top">▲</a></p>
			</div>
		</div>
{trackback_auto_discovery}

<div class="eid">

				<p class="navi">{prev_entry} | <a href="./">main</a> | {next_entry}</p>

<a name="comments"></a>
				<h3>コメント</h3>

				<div class="com">
					{comment_description}
				</div>
				<p class="com_footer">{comment_name} {comment_time}</p>

				<div class="form">
								<form name="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}"　/><br />
				<label for="email">email:</label><br>
				<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" /><br />
				<label for="url">url:</label><br>
				<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" /><br />
				<label for="description">comments:</label><br />
				<textarea tabindex="4" id="description" name="description" rows="7" cols="50"></textarea><br /><br />

<p class="form_footer">
				<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
				<label for="set_cookie">Cookie</label>
				<input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" class="button" />
				</form>
				</p>
				</div>

<a name="trackback"></a>
				<div class="tb_url">
				<h3>トラックバックURL</h3>
				<p>{trackback_url}</p></div>

				<h3>{trackback_title}</h3>
				<div class="com">
					{trackback_excerpt}
				</div>
				<p class="com_footer">{trackback_blog_name}  {trackback_time}</p>

			</div>

<div class="entry">
			<div class="entry_head"><h3>{profile_name}</h3><br class="clear" /></div>
			<div class="entry_body Mon">
			<p>{profile_description}</p>
			<p class="entry_footer">　<a href="#top">▲</a></p>
			</div>
		</div>
	</div>


<div id="pagenavi">{prev_page_link} {page_now}/{page_num} {next_page_link}</div>

<a name="bottom" id="bottom"></a>
	<div id="footer">
			{ad}

			<div id="free1">
				<h3>{freespace_title1}</h3>
				{freespace_contents1}
			</div>


			<div id="free2">
				<h3>{freespace_title2}</h3>
				{freespace_contents2}
			</div>

			<div id="other">
				<ul>
				<li><form method="get" action="./">
				<input id="search" name="search" size="10" /><br />
				<input type="image" src="http://img-cdn.jg.jugem.jp/401/269924/20061022_242200.gif" width="50" height="15" class="button" value="Search" />
				</form></li>
				</ul>

<ul>
				<li class="left"><a href="./admin/">Admin</a>｜</li>
				<li class="left"><a href="./?mode=rss">RSS1.0</a>｜</li>
				<li class="left"><a href="./?mode=atom">Atom0.3</a>｜</li>
				<li class="left"><a href="#top">▲</a></li>
				<br class="clear" />
				</ul>
				<ul>
				<li>{copyright}</li>
				<li>Template by <a href="http://6sick.jugem.jp/">Sixsick</a>.</li>
				</ul>
				<ul>
				<li><a href="http://jugem.jp/" target="_blank"><img src="../template/banner/powered_01b.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a></li>
				</ul>
				<ul>
			</div><br class="clear"/>
	</div>

</div>
</body>
</html>

CSS

*{
	margin:0;
	padding:0;
}

body{
	background-color:#000000;
}

div,
p,
input,
textarea{
	line-height:1.45em;
	font-size:13px;
}
li{
	list-style-type:none;
}

img{
	border:0px;
}

.clear{
	clear:both;
}

input,
textarea{
	background:#000000;
	color:#ffffff;
	border:1px solid #000000;
}

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

#layout{
	margin:auto;
	width:750px;
	background-color:#ff9900;
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242192.png);
	background-position:top left;
	background-repeat:no-repeat;
	border:6px double #000000;
}

*html #layout{
	border:6px double #ff9900;
}

#title{
	padding:20px 40px;
}
#menu{
	position:absolute;
	background-color:#000000;
	width:700px;
	top:100px;
	padding-left:50px;
}
#body{
	margin-top:30px;
}

#footer{
	width:650px;
	margin:30px auto 30px auto;
}

h1{
	font-size:50px;
	font-family:Impact;
	line-height:1em;
	color:#000000;
}

h1 a,
h1 a:link,
h1 a:hover{
	color:#000000;
	text-decoration:none;
}

h2{
	font-size:13px;
	font-weight:normal;
	padding-right:35px;
	color:#ffffff;
}

.entry{
	width:650px;
	margin-left:auto;
	margin-right:auto;
	margin-top:80px;
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242205.gif);
}

.entry_head{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242204.gif);
	height:64px;
	padding-top:8px;
	padding-left:160px;
	padding-right:25px;
}

.entry_head h3{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242201.gif);
	background-repeat:no-repeat;
	background-position:left top;
	text-indent:25px;
	width:320px;
	float:left;
	color:#FF9900;
	font-size:17px;
}

.date{
	float:right;
	color:#666699;
	width:130px;
	text-align:right;
}

.entry_body{
	padding:0px 100px 0px 50px;
	color:#333366;
}
.Mon
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242207.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Tue
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242209.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Wed
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242211.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Thu
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242211.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Fri
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242212.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Sat
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242213.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}
.Sun
{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242214.gif);
	background-repeat:no-repeat;
	background-position:bottom;
}

.entry_footer{
	padding-top:30px;
	padding-bottom:50px;
}

.eid{
	margin-top:20px;
	margin-left:auto;
	margin-right:90px;
	width:450px;
}

.eid a,
.eid a:link{
	color:#000000;
}

.eid h3{
	background-image:url(http://img-cdn.jg.jugem.jp/401/269924/20061022_242202.gif);
	background-repeat:no-repeat;
	background-position:left top;
	text-indent:20px;
}

.navi,
.com_footer,
.tb
{
	margin-bottom:10px;
}
.tb_url,
.form{
	margin-bottom:40px;
}

.navi,
.form_footer,
.com_footer{
	text-align:right;
}

.com_footer,
.tb,
.tb_url,
.form{
	border-bottom:3px double #000000;
}

.form_footer{
	padding-bottom:2px;
	padding-right:198px;
}

#name,
#email,
#url{
	width:150px;
}

#description{
	width:250px;
	height:100px;
	margin-bottom:2px;
}

#set_cookie{
	border:0px;
	background-color:#ff9900;
}

#menu a,
#menu a:link{
	color:#000000;
}

#menu div{
	float:left;
	padding-right:30px;
}

#menu h4{
	margin:3px 0px;
}

#menu h4 a,
#menu h4 a:link{
	color:#ffffff;
}

#menu ul{
	display:block;
	background-color:#ff9900;
	width:120px;
	border:1px solid #000000;
	margin-top:5px;
	padding:5px;
	position:absolute;
}

#pagenavi{
	width:650px;
	margin:40px auto;
	text-align:center;
}
#pagenavi a,
#pagenavi a:link{
	color:#000000;
}

#footer a,
#footer a:link{
	color:#000000;
	font-weight:bold;
}

#ad,
#other{
	float:left;
	width:130px;
	padding-left:10px;
}

#free1,
#free2{
	float:left;
	width:150px;
	padding-left:10px;
}

#other ul{
	padding-bottom:15px;

}

.left{
	float:left;
}

#search{
	background-color:#000000;
	border:1px solid #000000;
	color:#ffffff;
	width:126px;
	height:20px;
}

#other .button{
	margin:0px;
	vertical-align:bottom;
	border:0px;
}

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