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

ホーム

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

テンプレート名 : Natural Essence(J)

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 type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<div class="header"><p class="description">{blog_description}</p></div>

<a href="./" id="active">Home</a>	
        <a href="./#top">Menu 1</a>
        <a href="./#top">Menu 2</a>
        <a href="./#link">Link</a>
	<a href="./?pid=1">Profile</a>

</div>

<div class="entry_title">{entry_title}</div>
                <div class="entry_date">{entry_date} | category:{category_name}</div>

<div class="entry_body">
			{entry_description}
			
			<a name="sequel"></a>
			<div class="entry_more">
				{entry_sequel}
			</div>
		
                <div class="entry_state">| {comment_num} | {trackback_num} | <a href="{pookmark_url}">pookmark</a> |</div>
	        </div>
	{trackback_auto_discovery}
	        			
		
<div class="entry_navi"><strong>Entry Navi:</strong>
<a href="{next_permalink}">&lt;&lt;&nbsp;{next_title}</a>
<a href="{prev_permalink}">{prev_title}&nbsp;&gt;&gt;</a></div>

<div id="trackback">
	<a name="comments"></a>

<div class="tb_main_title">Comment</div>

<div class="tb">
			<div class="tb_body">{comment_description}</div>
			<div class="tb_state">Posted by: {comment_name}  |at: {comment_time}</div>
		</div>

<div class="formarea">
			<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
			<table width="430" border="0" cellspacing="0" cellpading="0">
			<tr valign="top">
				<td width="180">
				<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}" style="width:150px;" /><br />
				<label for="email">email:</label><br>
				<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:150px;" /><br />
				<label for="url">url:</label><br>
				<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:150px;" />
				</td>
				<td>
				<label for="description">comments:</label><br />
				<textarea tabindex="4" id="description" name="description" rows="7" cols="50" style="width:246px;"></textarea><br /><br />
				<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" />
				<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none;">
				<label for="set_cookie">Cookieに登録</label>
			</td>
			</tr>
			</table>
			</form>
		</div>
	</div>

<div id="trackback">
	<a name="trackback"></a>

<div class="tb_main_title">Trackback</div>

<div class="tb">
			<div class="tb_title">{trackback_title}</div>
			<div class="tb_body">{trackback_excerpt}</div>
			<div class="tb_state">{trackback_blog_name} | at: {trackback_time}</div>
		</div>

<div class="entry_body">
		<div class="entry_navi"><strong>Profile</strong></div>
		<div class="entry_title">{profile_name}</div>
		<div class="entry_body">{profile_description}</div>
	</div>

<div class="page_navi">
<strong>Page:</strong>&nbsp;{page_now}/{page_num}&nbsp;&nbsp;{prev_page_link}&nbsp;{next_page_link}&nbsp;|&nbsp;<a href="#top">▲&nbsp;Top</a>
</div>

</div>
	
		</div>

<h2>Calendar</h2>
				
				<div class="block">
                                   <div class="calendar">
		                     {calendar}
	                           </div>
                               </div>

<h2>Entry</h2>
				<ul class="block">
	                             {latest_entry_list}
                                </ul>
	                      
	
			      
	                         <h2>Category</h2>
                                 <div class="block">
                                    <div class="comment">
	                              {category_list}
                                    </div> 
                                 </div>

<h2>Comment</h2>
                                  <div class="block">
	                            <div class="comment">
	                              {recent_comment_list}
	                            </div>
                                  </div>

<h2>Trackback</h2>
                                   <div class="block">
	                            <div class="comment">
	                              {recent_trackback_list}
	                            </div>
                                   </div>

<h2>Archives</h2>
                               <div class="block">
                                 <div class="comment">
	                           {archives_list}
                                 </div>
                               </div>

<h2>Feed</h2>
	                          <ul class="block">
	                           <li><a href="{site_rss}">RSS1.0</a></li>
	                           <li><a href="{site_atom}">Atom0.3</a></li>
	                          </ul>

<h2>{freespace_title1}</h2>
        <div class="block">
	{freespace_contents1}
        </div>
	
	
	
	<h2>{freespace_title2}</h2>
        <div class="block">
	{freespace_contents2}
        </div>
	
	
	
	<h2>{freespace_title3}</h2>
        <div class="block">
	{freespace_contents3}
        </div>
	
	
	
	<h2>{freespace_title4}</h2>
        <div class="block">
	{freespace_contents4}
        </div>
	
	
	
	<h2>{freespace_title5}</h2>
        <div class="block">
	{freespace_contents5}
        </div>

<div class="powered">
        <a href="http://jugem.jp/" target="_blank"><img src="../template/banner/powered_09a.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a>
        </div>

<h2>Sponsored Links</h2>
         <div class="block">
　　　　{ad}
        </div>

</div>

</div>

<h2>Search</h2>
	             <form method="get" action=""><input id="search" name="search" size="20" style="margin:5px 5px 0px 0px;width:100px;"><input type="submit" value="Search" class="button" /></form>

<h2>Recommend Gallery</h2>

{amazon_item}
                        
			<div class="clearer"></div>
		</div>

</div>

<div class="footer">
		
		<div class="left">
			{copyright}<span>feat.<a href="http://webz.jugem.jp/">embellish*</a></span>
		</div>

<div class="right">
			<a href="http://templates.arcsin.se">Website template</a> by <a href="http://arcsin.se">Arcsin</a>
		</div>

</div>

</div>
</div>

</body>
</html>

CSS

/*
Template name: Natural Essence
Template URI: http://templates.arcsin.se/natural-essence-website-template/
Release date: 2007-02-20
Description: Soft and natural single/two-column template.
Author: Viktor Persson
Author URI: http://arcsin.se/

This template is licensed under a Creative Commons Attribution 2.5 License:
http://templates.arcsin.se/license/
*/

/* default elements */
* {margin: 0; padding: 0;}

body {
	background: #7C6F5C url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25194.jpg);
	color: #222;
	font: normal 62.5% "Trebuchet MS",sans-serif;
	padding: 2% 0;
}

a {color: #642;}
a:hover {color: #963;}

big {font-size: 1.1em;}

h1,h2,h3 {color: #442; padding: 8px 0 2px;}

h1 {font: normal 2.4em serif,sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

h2 {font: normal 1.6em Georgia,sans-serif;}
h3 {font: normal 1.2em "Trebuchet MS",sans-serif;}

blockquote {
	background: url('http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25199.gif') no-repeat;
	display: block;
	font: normal 1.1em Georgia,serif;
	padding-left: 26px
}

form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small,.small {font: normal 0.9em sans-serif;}
ul {padding: 0 2em 1.2em;}

/* structure */
#wrapper {
	background: #332 url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25196.gif) no-repeat left bottom;
	margin: 0 auto;
	width: 762px;
}
#container {
	background: #FBF9F4;
	border-top: 6px solid #332;
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 auto;
	width: 750px;
}

/* header */
.title {
	background: #E2DED4;
	border-top: 1px solid #996;
}
.title h1 {
	color: #441;
	font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
	padding: 10px 0 10px 18px;
}

.header {
	border-top: 2px solid #663;
	background: #DAD7C5 url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25204.jpg) no-repeat left bottom;
	height: 220px;
}
.description {
        font-size:10px;
        color: #fff;
}

/* navigation */
.navigation {
	background: #DED9D0 url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25206.gif) repeat-x; height: 41px;
	border-top: 1px solid #996;
}
.navigation a {
	background: #FFF url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25206.gif) repeat-x;
	border-right: 1px solid #C9C6B3;
	color: #553;
	float: left;
	font: bold 1em Tahoma,sans-serif;
	padding: 0 14px;
	line-height: 41px;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}

/* main */
.main#two-columns {background: #FFF url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25217.gif) repeat-y;}

/* bottom */
.bottom {
	background: #DCDAC9 url(http://img-cdn.jg.jugem.jp/7e3/919232/20080630_25219.gif) no-repeat left bottom;
	border-top: 1px solid #AA8;
	color: #444;
	padding: 14px 20px;
}
.bottom .left,.bottom .right {width: 49%;}

/* footer */
.footer {
	background: #332;
	color: #EED;
	padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
	width: 33%;
	text-align: right;
}
.footer a {
	color: #FFF;
	text-decoration: none;
}
.footer a:hover {
	color: #FFF;
	text-decoration: underline;
}
.footer .left span {
        font-size: 10px;
}

/* Entry */
.entry_title {
	margin-top:10px;
	font-size: 18px;
	font-weight:bolder;
        font-family: "Verdana";
}
.entry_body {
	margin:25px 0;
        font-size: 12px;
	line-height:170%;
}
.entry_state {
	text-align:center;
	margin-top:20px;
        padding-bottom: 20px;
        border-bottom: 1px dashed #BCBAAC;
}
.entry_navi stlong, .entry_navi a {
        display: block;
}

/* gallery */
.gallery td {
	vertical-align: top;
	text-align: center;
}
.gallery em {display: block;}

/* misc */
.clear,.clearer {clear: both;} 
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;}
.content {padding: 18px 20px;}
.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}

/* block list */
.block {
	border-top: 1px dashed #BCBAAC;
	margin: 4px 0;
	padding: 0;
	width: 90%;
}
ul.block {
	border-top: 1px dashed #BCBAAC;
	margin: 4px 0;
	padding: 0;
	width: 90%;
}
.block li {
	border-bottom: 1px dashed #BCBAAC;
	list-style: none;
}
.block li a,.block li em {
	color: #553;
	display: block;
}
.block li em {
	font-size: 0.9em;
	font-style: normal;
}
.block li a {
	padding: 4px 3%;
	text-decoration: none;
	width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
	background: #D2D0C0;
	color: #553;
}
.block .comment li {
        padding: 4px 3%;
}
.block .comment li a {
        display: inline;
}

.right .block,.right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}

/* カレンダー ---------*/

.calendar {
	font-family: "Verdana";
	text-align:center;
	line-height: 140%;
	margin-bottom:10px;
	}

.calendar table {
	width:100%;
	margin:0px auto;
	text-align:center;
	}

.weekday { padding: 2px;}
.cell    { padding: 2px;}

.cell a:link {font-weight: bolder;}

.powered {
        margin: 20px 0;
	padding: 0;
	width: 90%;
        text-align: center;
}

/* search */
.button {
        border: 1px solid #ccc;
        padding: 2px;
}

/* amazon */
.amazon_pict {
        width: 25%;
        height: 25%;
        margin-top: 10px;
        padding: 0 10px;
        float: left;
}
.amazon_text {
        display: none;
}

/* comment & trackback */
#trackback { padding-top: 20px;padding-bottom:10px;}

#trackback .tb_main_title {
	font-weight: bolder;
	margin-bottom:20px;
	border-bottom:1px dotted #CCC;
	padding: 5px 0px;
	border-top: 2px solid #333322;
	}

#trackback .tb_url {
	font-size: 11px;
	padding: 5px 10px 5px 10px;
	}

#trackback .tb {
	margin-bottom: 10px;
	border: 1px solid #CCC;
	}

#trackback .tb_title {
	font-weight: bold;
	padding: 5px 10px;
	}

#trackback .tb_body {
	line-height: 150%;
	padding: 5px 10px;
        background: #fff;
	}

#trackback .tb_state {
	border-top: 1px dotted #CCC;
	padding: 5px;
	text-align:right;
        background: #E9E6DE;
	}

#trackback .formarea {
	padding: 5px;
	background:#F8F8F8;
	border:1px dotted #CCC;
	color:#999;
	margin-top:20px; 
	}

.page_navi {
        text-align: right;
	margin: 0px;
	padding: 10px 0px;
	}

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