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

ホーム

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

テンプレート名 : シンプルライン２

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>
<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}" />

</head>

<body>

<div id="wrapper">
<div id="layout">
	<div id="container">
		<div id="header">
			
			<div id="top" class="h_top">
				<h1 class="site_title">{blog_name}</h1>
				<p class="description">{blog_description}</p>
				
				<div class="others">
				<ul>
					<li class="others_1"><a href="./admin/">Login</a></li>
					<li class="others_2"><a href="./?mode=rss">Rss1.0</a></li>
					<li class="others_3"><a href="./?mode=atom">Atom0.3</a></li>
				</ul>
				
				</div>
			</div>
			
			
			<div class="h_center">
			
				<div class="amazon">
					<a href="{amazon_url}" target="_blank">	
					<img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" class="amazon_pict" /></a>
				</div>
			
			</div>		
			
			<div class="h_bottom">{calendar_horizontal}</div>
		</div>

<div id="main">
			
			<div class="entry_navi">
			<ul>
				<li class="others_1">{prev_entry}</li>
				<li class="others_2"><a href="./">Main</a></li>
				<li class="others_3">{next_entry}</li>
			</ul>

</div>

<div class="entry">
				<div class="entry_container">
					<div class="entry_title"><h2>{entry_title}</h2></div>
					<div class="entry_date"><h3>{entry_date}</h3></div>
					<div class="entry_body">{entry_description}</div>
					<div class="entry_body">{entry_sequel}</div>
					<a name="sequel" ></a>
					<div class="entry_author">
						<p>Author : {user_name}</p>
					</div>
					<div class="entry_state">
					<ul>
						<li class="others_1">{category_name}</li>
						<li class="others_2">{entry_time}</li>
						<li class="others_2">{comment_num}</li>
						<li class="others_3">{trackback_num}</li>
					</ul>
					</div>
				</div>
				<div class="entry_title">{trackback_auto_discovery}</div>
			</div>

<a name="comments"></a>
			<div class="entry">
				<div class="entry_container">
					
					<div class="comment_body">{comment_description}</div>
					<div class="entry_state">
					<ul>
						<li class="others_1">{comment_name}</li>
						<li class="others_3">{comment_time}</li>
					</ul>
					</div>
					
					<div class="comment_title"><p>It comments.</p></div>
					<div class="entry_body">
						<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}" /><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="10" cols="50" style="width:400px;"></textarea><br /><br />
							<input tabindex="5" type="submit" value="Comment transmission" onclick="javascript:setval();" />
							<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
							<label for="set_cookie">It registers in cookis.</label>
						</form>
					</div>
				</div>
			</div>

<a name="trackback"></a>
			<div class="entry">
				<div class="entry_container">
					<div class="trackback-title">Track back Url of this Article</div>
					<div class="entry_body">{trackback_url}</div>
					<div class="trackback-title">Track Back</div>
					
					<div class="entry_title"><p>{trackback_title}</p></div>
					<div class="entry_body">{trackback_excerpt}</div>
					<div class="entry_state"><p>  {trackback_blog_name} | {trackback_time} </p></div>
					
				</div>
			</div>

<div class="entry">
				<div class="comment_title"><p>Profile</p></div>
				<div class="entry_body2">{profile_name}</div>
				<div class="entry_body2">{profile_description}</div>
			</div>

<div class="entry">
			<ul class="navi">
				<li class="navi_ct">{prev_page_link}&nbsp;</li>
				<li class="navi_ct">{page_now}/{page_num}Pages</li>
				<li class="navi_ct">&nbsp;{next_page_link}</li>
			</ul>
			</div>
			
		</div>	
			
		<div id="menu">
			
				<div class="menu_title"><p>Profile</p></div>
				<div class="menu_text">{user_list}</div>
			
				
			
			<form method="get" action="">
			<div class="menu_title"><p>Search this site.</p></div>

<div class="menu_title"><p>Category</p></div>
			<div class="menu_text">{category_list}</div>

<div class="menu_title"><p>Selected Entries</p></div>
			<div class="menu_text">	{selected_entry_list}</div>

<div class="menu_title"><p>Archives</p></div>
			<div class="menu_text">{archives_list}</div>

<div class="menu_title"><p>Recent Comment</p></div>
			<div class="menu_text">{recent_comment_list}</div>

<div class="menu_title"><p>Links</p></div>
			<div class="menu_text">{link_list}</div>

<div class="menu_title"><p>{freespace_title1}</p></div>
			<div class="menu_text">{freespace_contents1}</div>

<div class="menu_title"><p>{freespace_title2}</p></div>
			<div class="menu_text">{freespace_contents2}</div>

<div class="menu_title"><p>{freespace_title3}</p></div>
			<div class="menu_text">{freespace_contents3}</div>

<div class="menu_title"><p>{freespace_title4}</p></div>
			<div class="menu_text">{freespace_contents4}</div>

<div class="menu_title"><p>{freespace_title5}</p></div>
			<div class="menu_text">{freespace_contents5}</div>

<div class="menu_title"><p>Mobile</p></div>
			<div class="menu_text">{site_qrcode}</div>

<div class="menu_title"><p>Recent Trackback</p></div>
			<div class="menu_text">{recent_trackback_list}</div>

<div class="ad">{ad}</div>
			
		</div>

</div>
</div>

<div id="footer">
<p class="top"><a href="#top">▲Top</a></p>
<p class="copyright">{copyright}</p>
</div>
</div>

</body>
</html>

CSS

/*-----------------------------------------------
__CSS infromation

Site URL:		http://wing-of-heart.jugem.jp/
Summary:		Blog style
Created:		2008-02-14
Last update:	2009-03-09 by nob
Author:			nob

Order of description

-Search Key"__"+"id Name of Class Name"

/__全体設定
/__wrapper				(div#wrapper)
/__layout				(div#layout)
/__container			(div#container)
/__header				(div#header)
/__menu					(div#menu)
/__main					(div#main)
/__footer				(div#footer)

----------------------------------------------*/

/*-----------------------------------------------
__Default_style_clear
----------------------------------------------*/

*{
	margin:0;
	padding:0;
}

body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{
	margin: 0;
	padding: 0;
}

html{
	overflow-y: scroll;
}

h1,h2,h3,h4,h5,h6{
	font-size: 100%;
	font-weight:normal;
}

p{
	margin: 0;
}

ol,ul{
	list-style-type: none;
}

li{
	list-style-type: none;
}

fieldset,img{
	border: 0;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

caption,th{
	text-align: left;
}

address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
}

/*------------------------------------------------- 
__全体設定
 -------------------------------------------------*/

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

.site_title a{color: #333; text-decoration: none; }
.site_title a:link{color: #333; text-decoration: none; }
.site_title a:visited{color: #666; text-decoration: none; }
.site_title a:active{color: #666; text-decoration: none; }
.site_title a:hover{color: #999; text-decoration: none; }

html{
	font-size: 62.5%;
}

body{
	font-family:"Century Gothic","MS UI Gothic","ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	background-color:#FFFFFF;
	margin-bottom:10px;
	font-size: 1.1em;
	line-height:1.5;
	color: #333;
	text-align: center; 
}

h1{
	font-size: 1.6em;
}

h2{
	font-size: 1.1em;
}

p{
}

.others_1{
	border-right:1px solid #CCC;
}

.others_2{
	border-right:1px solid #CCC;
	padding-left:5px;
}

.others_3{
	padding-left:5px;
}

/*-----------------------------------------------
__wrapper
----------------------------------------------*/

#wrapper{
	width:800px;
	margin:0 auto;
	text-align:left;
}

/*-----------------------------------------------
__layout
----------------------------------------------*/

#layout{
	float:left;
	width:800px;
	background-repeat:repeat-y;
}

/*-----------------------------------------------
__container
----------------------------------------------*/

#container{
	clear:left;
	margin:20px 30px 30px 40px;
	padding-bottom:15px;
}

/*-----------------------------------------------
__header
----------------------------------------------*/

#header{
	width:720px;
/*	border-left:1px solid #CCC;
*/}

#header .h_top{
	padding:15px;
	border-bottom:1px dotted #CCC;
}

#header .h_top .site_title{
	padding-bottom:3px;
	font-family:"Century Gothic","ヒラギノ角ゴ Pro W3","MS UI Gothic","ＭＳ ゴシック", "Osaka‐等幅";
	font-size:2.0em;
	color:#222;
}

#header .h_top .description{
	padding-bottom:10px;
	font-size:1.1em;
	_font-size:0.9em;
}

#header .h_top .others{
	float:right;
	position:relative;
	top:-90px;
	font-size:0.9em;
	_font-size:0.8em;
}

#header .h_top .others ul{
	padding-bottom:15px;
	border-right:none;
}

#header .h_top .others li{
	float:left;
	padding-right:10px;
}

#header .h_center{
	width:720px;
}

#header .h_center .amazon{
	padding-left:15px;
}

#header .h_center .amazon img{
	float:left;
	padding-top:15px;
	padding-right:15px;
	padding-bottom:15px;
	overflow:hidden;
}

#header .h_bottom{
	clear:left;
	width:720px;
	padding:10px 0;
	border-top:1px dotted #CCC;
	border-bottom:1px dotted #CCC;
	text-align:center;
}

/*-----------------------------------------------
__menu
----------------------------------------------*/

#menu{
	float:left;
	width:235px;
	padding-top:40px;
	margin-bottom:15px;
}

#menu .menu_title{
	padding:0 30px 10px 15px;
	font-size:1.2em;
}

#menu .menu_title p{
	line-height:normal;
	border-bottom:1px dotted #CCC;
}

#menu .menu_title p:first-letter{
	font-size:120%;
	font-weight:bold;
	color:#222;
}

#menu .menu_text{
	padding:0 30px 25px 15px;
	font-size:1.0em;
	_font-size:0.8em;
	line-height:1.8em;
	_line-height:2.0em;
}

*:first-child+html #menu .menu_text{
	font-size:0.8em;
	line-height:2.0em;
}

#menu .ad{
	padding:0 15px 15px 15px;
}

/*-----------------------------------------------
__main 
----------------------------------------------*/

#main{
	float:right;
	width:485px;
	padding-top:33px;
	margin-bottom:15px;
}

#main .entry_navi{
	width:420px;
	height:30px;
	font-size:1em;
	_font-size:0.8em;
}

*:first-child+html #main .entry_navi{
	font-size:0.8em;
}

#main .entry_navi ul{
	margin-left:15px;
}

#main .entry_navi ul li{
	float:left;
	padding-right:5px;
}

#main .entry{
	clear:left;
	padding:0 15px 35px 15px;
}

#main .entry_title{
	clear:left;
	margin-top:15px;
	padding-bottom:10px;
}

#main .entry_title h2{
	border-bottom:1px dotted #CCC;
}

#main .entry_title h2:first-letter{
	font-size:130%;
	font-weight:bold;
}

#main .entry_date{
	padding-bottom:10px;
}

#main .entry_body{
	padding-bottom:10px;
	font-size:1.2em;
	_font-size:1.1em;
}

*:first-child+html #main .entry_body{
	font-size:1.1em;
}

#main .entry_author{
	padding-top:10px;
	padding-bottom:15px;
}

#main .entry_author p{
	font-size:1.2em;
	_font-size:1.1em;
}

*:first-child+html #main .entry_author p{
	font-size:1.1em;
}

#main .entry_state{
	margin-bottom:20px;
}

#main .entry_state ul{
	font-size:0.9em;
	_font-size:0.8em;
}

#main .entry_state ul li{
	float:left;
	padding-right:10px;
}

#main .comment_body{
	clear:left;
	padding-top:10px;
	padding-bottom:20px;
	font-size:1.2em;
	_font-size:1.1em;
}

#main .comment_title{
	padding-top:15px;
	padding-bottom:10px;
}

#main .comment_title p{
	font-size:1.2em;
	border-bottom:1px dotted #CCC;
}

#main .comment_title p:first-letter{
	font-size:120%;
	font-weight:bold;
}

#main .trackback-title{
	margin-top:20px;
}

#main .navi{
	padding-bottom:15px;
	font-size:1.0em;
}

#main .navi_ct{
	float:left;
	padding-right:5px;
}

/*-----------------------------------------------
__footer
----------------------------------------------*/

#footer{
	clear:both;
	width:800px;
	height:75px;
	margin:0 auto;
	background-repeat:no-repeat;
	font-size:1em;
}

#footer .top{
	position:relative;
	top:-10px;
	padding-left:60px;
}

#footer .copyright{
	position:relative;
	top:20px;
	text-align:center;
}

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