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

ホーム

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

テンプレート名 : to reproduction

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

</head>

<div id="header">

<div class="calender"><p>{calendar_horizontal}</p></div>
			
			
			<div class="image">
				
				<h1 class="site_title">{blog_name}</h1>	
				<div class="description">{blog_description}</div>
				
			</div>
			<div class="others">
				<p>
				
				<a href="./admin/">Login</a>|<a href="./?mode=rss">Rss1.0</a>|<a href="./?mode=atom">Atom0.3</a></li>
					
				</p>		
			</div>

</div>

<div id="container">
			<div class="topbar">
			<p>
			{prev_entry} | <a href="./">Main</a> | {next_entry}</p>
			
			</div>

<div id="left">		
			
			<div class="entry">
				<div class="entry_container">
					<div class="top"><p>{entry_title}</p></div>	
					<div class="entry_date">
						<p>{entry_date}</p>
						<div class="entry_author">Author : {user_name}</div>
					</div>
					<div class="entry_body1">{entry_description}</div>
					<div class="entry_body2">{entry_sequel}</div>
					<a name="sequel"></a>
					<div class="entry_bottom"><p style="color:#FFF">{category_name} | {entry_time} | {comment_num} | {trackback_num}</p></div>{trackback_auto_discovery}
				</div>
			</div>

<a name="comments"></a>
			<div class="entry">
				<div class="entry_container">
					
					<div class="top"><p>Comments.</p>
					</div>
					<div class="entry_body">{comment_description}</div>
					<div class="entry_bottom"><p style="color:#FFF">{comment_name} | {comment_time}</p></div>
					
					<div class="top"><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 class="entry_bottom"></div>
				</div>
			
			</div>

<a name="trackback"></a>
			<div class="entry">
				<div class="entry_container">
					<div class="top"><p>Track back Url of this Article</p>
					</div>
					<div class="entry_body">{trackback_url}</div>
					<div class="entry_bottom"><p style="color:#FFF">{trackback_blog_name} | {trackback_time}</p></div>

<div class="trackback-title">Track Back</div>
					
					<div class="top"><p>{trackback_title}</p>
					</div>
					<div class="entry_body">{trackback_excerpt}</div>
					<div class="entry_bottom"><p style="color:#FFF">{trackback_blog_name} | {trackback_time}</p></div>
					
				</div>
			</div>

<div class="entry">
			<div class="entry_container">
				<div class="top"><p>Profile</p>
				</div>
				<div class="entry_body2">{profile_name}</div>
				<div class="entry_body2">{profile_description}</div>
				<div class="entry_bottom"></div>
			</div>
			</div>

<div class="navi_page">
			<ul class="navi">
				<li class="prev">{prev_page_link}&nbsp;</li>
				<li class="num">{page_now}/{page_num}PAGES</li>
				<li class="next">&nbsp;{next_page_link}</li>
			</ul>
			</div>
			
			</div>

<div id="menu_container">
			<div id="menu_area">
			
			<form method="get" action="">
			<div class="menu_top"><p>Search this site.</p></div>
			<div class="menu_center">
			<p>
			<input id="search" name="search" size="14" style="width:95px" class="form" />　
			<input type="submit" value="検索" class="searchbutton" /></div>
			</p>
			</form>
			<div class="menu_bottom"></div>
			
			
				
			<div class="menu_top"><p>Profile</p></div>
			<div class="menu_center"><p>{user_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Category</p></div>
			<div class="menu_center"><p>{category_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Selected Entries</p></div>
			<div class="menu_center"><p>{selected_entry_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Archives</p></div>
			<div class="menu_center"><p>{archives_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Recent Comment</p></div>
			<div class="menu_center"><p>{recent_comment_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Links</p></div>
			<div class="menu_center"><p>{link_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>{freespace_title1}</p></div>
			<div class="menu_center"><p>{freespace_contents1}</div>	
			<div class="menu_bottom"></div>

<div class="menu_top"><p>{freespace_title2}</p></div>
			<div class="menu_center"><p>{freespace_contents2}</p></div>	
			<div class="menu_bottom"></div>

<div class="menu_top"><p>{freespace_title3}</p></div>
			<div class="menu_center"><p>{freespace_contents3}</p></div>	
			<div class="menu_bottom"></div>

<div class="menu_top"><p>{freespace_title4}</p></div>
			<div class="menu_center"><p>{freespace_contents4}</p></div>	
			<div class="menu_bottom"></div>

<div class="menu_top"><p>{freespace_title5}</p></div>
			<div class="menu_center"><p>{freespace_contents5}</p></div>	
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Mobile</p></div>
			<div class="menu_center"><p>{site_qrcode}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top">
			<p>Track Back</p>
			</div>
			<div class="menu_center"><p>{recent_trackback_list}</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Recommend</p>
			</div>
			<div class="menu_center">			
			<p class="amazon">
				<a href="{amazon_url}" target="_blank">	
				<img border="0" src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" class="amazon_pict" /></a>
				
			</p></div>
			<div class="menu_bottom"></div>

<div class="menu_top"><p>Jugem Advertising</p></div>
			<div class="ad">{ad}</div>
			<div class="menu_bottom"></div>

</div>	
			</div>	
			
	
			<div class="text"><a href="#top">▲Top</a></div>
		</div>
		</div>

<div id="footer">
			<div class="copyright"><p>{copyright}</p>
			</div>
	</div>	
		</div>
		</div>		
			
	
	</div>
</div>
</body>
</html>

CSS

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

Site URL:		http://wing-of-heart.jugem.jp/
Summary:		Blog style
Created:		2007-12-17
Last update:	2007-12-18 by nob
Author:			nob

Order of description

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

/__全体設定
/__wrapper				(div#wrapper)
/__header				(div#header)
/__container			(div#container)
/__left					(div#left)
/__center				(div#center)
/__menu_container		(div#menu_container)
/__menu_area			(div#menu_area)
/__footer				(div#footer)

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

/*-----------------------------------------------
__Default_style_c
lear
----------------------------------------------*/

*{
	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;
}

/* 全体の設定 */
body{
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size:11px;
	color:#333;
}

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; }

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

.entry_bottom a,.copyright a,.calender a{color: #FFF; text-decoration: underline; }
.entry_bottom a:link,.copyright a:link,.calender a:link{color: #FFF; text-decoration: underline; }
.entry_bottom a:visited,.copyright a:visited,.calender a:visited{color: #FFF; text-decoration: underline; }
.entry_bottom a:active,.copyright a:active,.calender a:active{color: #FFF; text-decoration: none; }
.entry_bottom a:hover,.copyright a:hover,.calender a:hover{color: #CCC; 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: #333; text-decoration: none; }

/*-----------------------------------------------
__wrapper
----------------------------------------------*/
#wrapper {	
	margin-left:40px;
	margin-right:40px;	
}

#wrapper .layout {
	width:790px;
	margin:40px auto;
}

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

/* ヘッダー */
#header{
	width:790px;
}

#header .calender{
	height:40px;
	background-color:#000;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400051.jpg);
	background-repeat:no-repeat;
}

#header .calender p{
	padding-top:12px;
	text-align:center;
	color:#FFF;
}

#header .image{
	z-index:2;
	height:239px;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400153.jpg);
	background-repeat:no-repeat;
}

#header .image .site_title{
	position:relative;
	top:50px;
	right:45px;
	text-align:right;
	font-size:25px;
	font-weight:300;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	text-decoration: none;
}

#header .image .description{
	position:relative;
	top:60px;
	left:395px;
	text-align:right;
	width:350px;
	font-size:12px;
	font-family: "Verdana","Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
}

#header .others{
	height:40px;
	padding-right:30px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400052.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	text-align:right;
	font-size:12p;
	color:#FFF;
}

#header .others p{
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size:12px;
	color:#FFF;
}

#header .others p,#header .others a{
	padding:12px 7px 0 7px;
	color:#FFF;
}

#header .header_bottom{
	padding-top:12px;
	padding-right:30px;
	height:35px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400052.jpg);
	background-repeat:no-repeat;
	text-align:right;
	font-size:12p;
	color:#FFF;
}

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

#container{
	width:790px;
	margin-top:40px;
}

#container .topbar{
	height:40px;
	background-color:#000000;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400051.jpg);
	background-repeat:no-repeat;
}

#container .topbar p{
	padding-top:12px;
	text-align:center;
	font-size:10px;
	color:#FFF;
}

/*-----------------------------------------------
__center
----------------------------------------------*/

#center{
	width:790px;
	padding-top:40px;
	padding-bottom:60px;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 788px;
}

#center .text{
	clear:both;
	width:200px;
	padding-top:20px;
}

#center .text a{
	padding-left:30px;
}

/*-----------------------------------------------
__left
----------------------------------------------*/

/* メインサイド */
#left{
	float:left;
	width:500px;		
}

#left .entry{
	padding:30px 10px 20px 30px;

}

#left .entry_container{
	width:499px;
}

#left .entry_container .top{
	vertical-align:bottom;
	height:35px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400053.jpg);
	background-repeat:no-repeat;
}

#left .entry_container .top .entry_title{
	text-align:left;
	position:relative;
	top:10px;
	left:20px;
	font-size:12px;
	color:#FFF;	
}

#left .entry_container .top p{
	position:relative;
	top:10px;
	left:20px;
	width:450px;
	font-size:12px;
	color:#FFF;	
}

#left .entry_container .entry_date{
	height:30px;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
}

#left .entry_container .entry_date p{
	float:left;
	position:relative;
	top:5px;
	width:200px;
	left:20px;
	font-size:13px;
}

#left .entry_container .entry_author{
	float:right;
	position:relative;
	top:8px;
	padding-right:20px;
	font-size:10px;
}

#left .entry_container .entry_body{
	clear:both;
	padding:10px 10px 10px 20px;
	border:1px solid #CCC;
	font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size:11px;
	line-height:170%;
}

#left .entry_container .entry_body1{
	padding:10px 10px 10px 20px;
	font-size:11px;
	border:1px solid #CCC;
	border-bottom:none;	
	font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	line-height:170%;
}

#left .entry_container .entry_body2{
	padding:10px 10px 10px 20px;
	border:1px solid #CCC;
	border-top:none;
	font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size:11px;
	line-height:170%;
}

#left .entry_container .entry_bottom{
	height:35px;
	margin-bottom:20px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400054.jpg);
	background-repeat:no-repeat;
	font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size:10px;
	color:FFF;
}

#left .entry_container .entry_bottom p{
	text-align:right;	
	padding: 7px 10px 0 20px;
	font-size:11px;
	color:FFF;
}

#left .trackback-title{
	margin-top:20px;
	text-align:center;
	font-size:12px;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color:#333;	
}

#left .navi_page{
	width:auto;
	padding-left:50px;
}

#left .nav{
	padding:0 5px;
	padding-left:30px;
	font-size:10px;
	color:#333;
}

#left .prev{
	float:left;
	color:#333;
}

#left .num{
	float:left;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color:#333;
}

#left .next{
	float:left;
}

/*-----------------------------------------------
__menu_container
----------------------------------------------*/

#menu_container{
	float:right;
	width:230px;
}

/*-----------------------------------------------
__menu_area
----------------------------------------------*/

#menu_area{
	padding:10px 30px 0 10px;
	line-height:170%;
	font-size:10px;
}

#menu_area .menu_top{
	height:30px;
	margin-top:20px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400055.jpg);
	background-repeat:no-repeat;
	background-position:top;
}

#menu_area .menu_top p{	
	padding:7px 15px 0 0;
	text-align:right;	
	font-size:12px;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color:#FFF;	
}

#menu_area .menu_center{
	text-align:right;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
}

#menu_area .menu_center p{
	margin:0;
	padding:0;
	text-align:right;	
	font-size:9px;
	font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color:#333;		
}

#menu_area .menu_bottom{
	height:30px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400056.jpg);
	background-repeat:no-repeat;
	background-position:top;
}

#menu_area .cell{
	padding:0 3px;
	line-height:150%;
}

#menu_area .amazon img{
	margin-right:10px;
}

#menu_area .ad{	
	text-align:right;
	padding-top:10px;
	padding-right:20px;
	padding-bottom:10px;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
}

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

#footer{
	position:relative;
	top:-24px;	
	width:790px;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
}

#footer .copyright{
	height:45px;
	background-image:url(http://img-cdn.jg.jugem.jp/d9a/118271/20071218_400052.jpg);
	background-repeat:no-repeat;
	text-align:center;:12px;
	font-size:12px;
	color:#FFF;
}

#footer .copyright p{
	position:relative;
	top:15px;
	font-size:10px;
	font-family: "Palatino Linotype", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color:#FFF;
}

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