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

ホーム

ホーム > ブログデザイン一覧 > ユーザー作成テンプレート「utf」 >

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

テンプレート名 : Retoro -JapKraft

テンプレートイメージ表示ページへ戻る

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="{site_encoding}" />
  <meta name="robots" content="noindex" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  
  <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>
</head>

<body onload="javascript:initval();">
{gmo_header_src}

<div id="wrap">
<div id="page">
<a id="top" name="top"></a>

<div id="header">
<div id="hgroup">
    <h1><a href="./">{blog_name}</a></h1>
    <span class="desc">{blog_description}</span>
</div>
</div>

<div class="specialNavi">
<ul>
	<li><a href="#">Navigation 01</a></li>
	<li><a href="#">Navigation 02</a></li>
	<li><a href="#">Navigation 03</a></li>
	<li><a href="#">Navigation 04</a></li>
	<li><a href="#">Navigation 05</a></li>
</ul>
</div>

<div id="article">

<div id="entry">
<h2>{entry_title_link}</h2>

<div class="entryTxt">
{entry_description}
<a name="sequel"></a>
<div class="entrySequel">
{entry_sequel}
</div>
</div>

<div class="entryInfo">
<p class="datetime">投稿日時 : {entry_date} {entry_time} | 著者 : {user_name} | カテゴリー : {category_name}</p>
<p><span>{comment_num} | {trackback_num}</span><span>{pookmark_link} {logpi_link}</span></p>
</div>

{trackback_auto_discovery}
</div>

<div id="relatedEntry">
<span class="relatedTitle">関連する記事</span>
{related_entry_list}
</div>

		
		    

<a name="comments"></a>
<div id="comments">
<span class="cmntTitle">コメント</span>

<div class="cmntDesc">
{comment_description}
<span class="cmntDatetime">投稿日時 : {comment_year}, {comment_month}, {comment_day} {comment_hour_24} | 投稿者 : {comment_name}</span>
</div>

<span class="cmntTitle">コメントの投稿</span>
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th scope="row"><label for="name">お名前 :</label></th>
        <td><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /></td>
    </tr>
    <tr>
        <th scope="row"><label for="email">Eメール :</label></th>
        <td><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /></td>
    </tr>
    <tr>
        <th scope="row"><label for="url">URL :</label></th>
        <td><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /></td>
     </tr>
    <tr>
        <th scope="row"><label for="description">コメント内容 :</label></th>
        <td><textarea tabindex="4" id="description" name="description" rows="5"></textarea></td>
    </tr>
</table>
      
<div class="cmntSend">  
<input tabindex="5" type="submit" value="コメント送信"  onclick="javascript:setval();" class="formButton" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">&nbsp;<label for="set_cookie">入力情報を登録しますか？</label>
</div>
</form>
</div>

        
        

<a name="trackback"></a>
<div id="trackback">
<span class="tbTitle">この記事のトラックバック</span>
<input type="text" value="{trackback_url}" class="input" />

<span class="tbTitle">トラックバック</span>

<div class="tbDesc">
{trackback_title}
<p>{trackback_excerpt}</p>

<span>{trackback_blog_name} | Posted on {trackback_year}/{trackback_month}/{trackback_day} {trackback_hour_24}</span>
</div>

</div>

    
    

<div id="profile">
<span class="profTitle">自己紹介</span>
<span class="profName">{profile_name}</span>
{profile_description}
</div>

<div class="pager-content">
	<span class="prev"><a href="{prev_page_url}">&laquo;&nbsp;前頁</a></span>
	<span class="next"><a href="{next_page_url}">次頁&nbsp;&raquo;</a></span>
</div>

</div>

<div id="aside">

<div class="sideContents">
<h3>calendar</h3>
{calendar2}
<div class="pager-calendar">
	<span class="last-month"><a href="./?month={calendar_this_year}{calendar_prev_month}">&laquo;&nbsp;前月</a></span>
	<span class="next-month"><a href="./?month={calendar_this_year}{calendar_next_month}">翌月&nbsp;&raquo;</a></span>
</div>
</div>

<div class="sideContents">
<h3>{freespace_title1}</h3>
{freespace_contents1}
</div>

<div class="sideContents">
<h3>{freespace_title2}</h3>
{freespace_contents2}
</div>

<div class="sideContents">
<h3>{freespace_title3}</h3>
{freespace_contents3}
</div>

<div class="sideContents">
<h3>{freespace_title4}</h3>
{freespace_contents4}
</div>

<div class="sideContents">
<h3>{freespace_title5}</h3>
{freespace_contents5}
</div>

<div class="sideContents">
<h3>選出した記事</h3>
{selected_entry_list}
</div>

<div class="sideContents">
<h3>記事の範疇</h3>
{category_list}
</div>

<div class="sideContents">
<h3>文書保管処</h3>
{archives_list2ex}
</div>

<div class="sideContents">
<h3>新しいコメント</h3>
<ul>
	
	<li>{recent_comment_item_title}</a><br /><a href="./?eid={recent_comment_item_entry_id}#comments">{recent_comment_item_name}</a></li>
	
</ul>
</div>

<div class="sideContents">
<h3>新しいトラックバック</h3>
{recent_trackback_list2}
</div>

<div class="sideContents">
<h3>目玉商品</h3>
<div class="image_box">
{amazon_item}
</div>
</div>

<div class="sideContents">
<h3>リンク</h3>
{link_list}
</div>

<div class="sideContents">
<h3>自己紹介</h3>
<dl>
<dt>{user_list}</dt>
<dd>総記事数 : {all_entry_count}件</dd>
<dd>最終更新日 : {last_entry_date}</dd>
</dl>
</div>

<div class="sideContents">
<h3>記事検索</h3>
<form method="get" action="./" class="search_box">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="search" name="search" class="search-word" /></td>
<td><input type="submit" value="検索" class="search-btn" /></td>
</tr>
</table>
</form>
</div>

<div class="sideContents">
<h3>その他</h3>
<ul>
<li><a href="./manage/">管理者頁</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>
</div>

<div class="sideContents image_box">
<h3>携帯用</h3>
<div class="image_box">
{site_qrcode}
</div>
</div>

<div class="sideContents">
<h3>サービス提供元</h3>
<div class="image_box">
{powered}
</div>
</div>

<div class="sideContents image_box">
<h3>PR</h3>
<div class="image_box">
{ad}
</div>
</div>

</div>

<div class="pagetop">
	<a href="#top">この頁の先頭へ戻る</a>
</div>

</div>
</div>

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

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

CSS

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

Theme Name: Retoro -JapKraft
	Author: ino
	Author URI: http://laboratory.grinte.com

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

/*	Basic Style
----------------------------------------------------------------------------- */
body {
	font: 12px/1.6 Arial, Helvetica, sans-serif;
	*font-size: 75%; /* for IE6/7 */
	*font: x-small; /* for IE Quirks Mode */
	color: #666;
	line-height: 1.6em;
	letter-spacing: 0.03em;
	text-align: center;
	background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087014.jpg') repeat center;
}

a:link		{ text-decoration: underline; }
a:visited	{ text-decoration: underline; }
a:hover		{ text-decoration: none; }
a:active	{ text-decoration: underline; }

/*	Whole Style
----------------------------------------------------------------------------- */
#wrap { background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087028.jpg') repeat-x top center; }
#page { background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087024.jpg') no-repeat top center; margin-bottom: 50px; padding-top: 10px; }

/*	Header Style
----------------------------------------------------------------------------- */
#header						{ width: 800px; background: #fff; margin: 0 auto; text-align: left; margin-bottom: 10px; }
#header	#hgroup				{ text-align: left; padding: 0 10px; }
#header	#hgroup h1			{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087023.jpg') no-repeat 0 0; color: #822228; font-size: 18px; padding: 10px 0 10px 40px; }
#header	#hgroup h1 a		{ color: #822228; text-decoration: none; display: block; }
#header	#hgroup span.desc	{ color: #ccc; font-size: 11px; display: block; }

/*	specialNavi
----------------------------------------------------------------------------- */
.specialNavi				{ width: 780px; background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087019.jpg') repeat-y; margin: 0 auto 30px; text-align: left; }
.specialNavi ul				{ width: 780px; background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087020.jpg') no-repeat left top; list-style-type: none; }
.specialNavi ul li			{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087018.jpg') no-repeat right; color: #fff; display: inline-block; *display: inline; *zoom: 1; }
.specialNavi ul li:last-child { background: none; }
.specialNavi ul li a		{ color: #fff; font-weight: bold; text-align: center; text-decoration: none; padding: 10px; display: inline-block; *display: inline; *zoom: 1; }
.specialNavi ul li a:hover	{ text-decoration: underline; }

/*	Content Style
----------------------------------------------------------------------------- */
#content	{ width: 800px; background: #fff url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087015.jpg') no-repeat center bottom; margin: 0 auto; padding-bottom: 100px; }
#main		{ width: 780px; margin: 0 auto; text-align: left; zoom: 1; }
#main:after	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#main a		{ color: #cc8877; }

/* article */
#article	{ float: left; width: 510px; }

/* entry */
#article #entry				{ margin-bottom: 50px; }
#article #entry h2			{ background: #eee9dd url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087017.jpg') no-repeat 0 0; border: 1px solid #ddd4bb; color: #822228; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 4px 10px 5px 30px; }
#article #entry h2 a		{ color: #822228; text-decoration: none; }
#article #entry .entryTxt	{ padding-bottom: 20px; }
#article #entry .entryTxt .entrySequel	{ padding-top: 15px; }
#article #entry .entryInfo	{ border-top: 1px dotted #ddd4bb; margin-bottom: 30px; padding-top: 5px; color: #ccc; font-size: 11px; }
#article #entry .entryInfo .datetime	{}

/* relatedEntry */
#relatedEntry					{ margin-bottom: 20px; }
#relatedEntry .relatedTitle		{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087027.jpg') no-repeat top right; border: 1px solid #ddc3aa; color: #822228; font-weight: bold; display: block; margin-bottom: .5em; padding: 5px 10px; }
#relatedEntry ul				{ list-style-type: none; padding: 0 10px; }
#relatedEntry ul li				{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087021.gif') no-repeat 0 5px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 3px; padding-left: 10px; }

/* comments */
#comments					{ margin-bottom: 20px; }
#comments .cmntTitle		{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087027.jpg') no-repeat top right; border: 1px solid #ddc3aa; color: #822228; font-weight: bold; display: block; margin-bottom: .5em; padding: 5px 10px; }
#comments .cmntDesc			{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087021.gif') no-repeat 0 5px; border-bottom: 1px dotted #ccc; margin: 0 10px 10px; padding-bottom: 3px; padding-left: 10px; }
#comments .cmntDatetime		{ color: #ccc; font-size: 11px; text-align: right; display: block; }

form#comment_area								{ margin: 0 10px;}
form#comment_area table							{ width: 100%; }
form#comment_area table th						{ width: 20%; color: #baac88; font-weight: normal; vertical-align: top; text-align: left; padding-bottom: 10px; }
form#comment_area table td						{ padding-bottom: 10px; }
form#comment_area table td input,
form#comment_area table td textarea				{ border: 1px solid #baac88; padding: .2em; font-size: 12px; }
form#comment_area table td input#name,
form#comment_area table td input#email,
form#comment_area table td input#url			{ width: 300px; }
form#comment_area table td textarea#description	{ width: 340px; }
form#comment_area input.formButton				{ border: 1px solid #cc8877; padding: 4px 10px; color: #fff; cursor: pointer; background: #cc8877; border-radius: 2px;
												  /* Webkit */
												  background: -webkit-gradient( linear, left top, left bottom, from(ecc3bb), to(#cc8877) ); -webkit-border-radius: 2px; -webkit-box-shadow: 1px 1px 1px #fff;
												  /* Firefox */
												  background: -moz-linear-gradient( top, #ecc3bb, #cc8877); -moz-border-radius: 2px; -moz-box-shadow: 1px 1px 1px #fff;
												  /* IE */
												  filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#ecc3bb,endColorstr=#cc8877); zoom: 1;
												  }
form#comment_area .cmntSend						{ text-align: center; }

/* trackback */
#trackback				{ margin-bottom: 20px; }
#trackback .tbTitle		{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087027.jpg') no-repeat top right; border: 1px solid #ddc3aa; color: #822228; font-weight: bold; display: block; margin-bottom: .5em; padding: 5px 10px; }
#trackback input.input	{ width: 400px; border: 1px solid #baac88; margin: 0 10px 20px; padding: .2em; font-size: 12px; display: block; }
#trackback .tbDesc		{ border-bottom: 1px dotted #ccc; padding-bottom: 3px; margin-bottom: 15px; }
#trackback .tbDesc a	{ color: #333; display: block; margin-bottom: .5em; }
#trackback .tbDesc p	{ margin-bottom: .5em; }
#trackback .tbDesc span { color: #ccc; font-size: 11px; text-align: right; display: block; }

/* profile */
#profile			{ margin-bottom: 50px; }
#profile .profTitle	{ background: #eee9dd url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087017.jpg') no-repeat 0 0; border: 1px solid #ddd4bb; color: #822228; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 4px 10px 5px 30px; display: block; }
#profile .profName	{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087021.gif') no-repeat 0 7px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 3px; padding-left: 10px; font-size: 14px; display: block; }

/* pager-content */
.pager-content			{ width: 510px; margin-bottom: 100px; zoom: 1; }
.pager-content:after	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.pager-content .prev	{ float: left; width: 255px; display: block; }
.pager-content .prev a	{}
.pager-content .next	{ float: right; width: 255px; text-align: right; display: block; }
.pager-content .next a 	{}

/* aside */
#aside						{ float: right; width: 250px; }
#aside .sideContents		{ background: #eee8dd; margin-bottom: 20px; padding: 10px; }
#aside .sideContents h3		{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087026.gif') repeat-x bottom; color: #886611; font-size: 14px; margin-bottom: 10px; padding-bottom: 5px; }

#aside .sideContents ul				{ list-style-type: none; }
#aside .sideContents ul li			{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087022.gif') no-repeat 0 7px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 3px; padding-left: 10px; }
#aside .sideContents ul li ul		{}
#aside .sideContents ul li ul li	{ border: none; margin-bottom: 0; padding-bottom: 0; }
#aside .sideContents ul a			{}

#aside .sideContents dl				{}
#aside .sideContents dl dt			{}
#aside .sideContents dl dt ul 		{}
#aside .sideContents dl dt ul li	{}
#aside .sideContents dl dt ul li a	{}
#aside .sideContents dl dd			{}

/* image_box */
#aside .sideContents .image_box		{ text-align: center; }

/* specialNavi */
#aside .specialNavi			{ background: #422000 url('http://img-cdn.jg.jugem.jp/6df/2060539/20110930_2067715.gif') no-repeat bottom; margin-bottom: 20px; padding-top: 10px; padding-bottom: 30px; }
#aside .specialNavi h3		{ background: #422000 url('http://img-cdn.jg.jugem.jp/6df/2060539/20110930_2067713.gif') no-repeat 10px 5px; margin-bottom: 10px; padding-left: 30px; color: #ddd6cc; font-size: 14px; }
#aside .specialNavi ul		{ background: #211000; border: 1px solid #211000; border-bottom-weight: 0; list-style-type: none; margin:0 10px; }
#aside .specialNavi ul li	{ border: 1px solid #666; margin-bottom: 1px; }
#aside .specialNavi ul li a	{ background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20110930_2067709.gif') no-repeat 10px 11px; color: #99cddb; padding: 5px 10px 5px 20px; display: block; }

/* calendar */
#aside table.calendar						{ width: 100%; background: #fff; color: #333; border-collapse: separate; border-spacing: 1px; margin-bottom: 5px; }
#aside table.calendar th,
#aside table.calendar td					{ text-align: center; border: 1px solid #ccc; }
#aside table.calendar td.weekday			{ font-size: 11px; background: #eee; }
#aside table.calendar td.calendar_month		{ background: #eee; }
#aside table.calendar td.calendar_month a	{ display: none; }
#aside table.calendar td.cell a				{ background: #edd4cc; color: #cc8877; display: block; }

.pager-calendar				{ zoom: 1; }
.pager-calendar:after		{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.pager-calendar a			{}
.pager-calendar .last-month,
.pager-calendar .next-month	{ width: 115px; display: inline-block; }
.pager-calendar .last-month	{ float: left; }
.pager-calendar .next-month	{ float: right; text-align: right; }

/* search_box */
#aside form.search_box			{}
#aside form.search_box h3		{}
#aside form.search_box table	{ background: #edd4cc; border: 1px solid #fff; }
#aside form.search_box table td { padding: 5px; }
#aside form.search_box input	{}
#aside form.search_box input.search-word { border: 1px solid #cc8877; padding: .4em; }
#aside form.search_box input.search-btn { border: 1px solid #cc8877; padding: 4px 5px; color: #fff; cursor: pointer; background: #cc8877; border-radius: 2px;
										  /* Webkit */
										  background: -webkit-gradient( linear, left top, left bottom, from(ecc3bb), to(#cc8877) ); -webkit-border-radius: 2px; -webkit-box-shadow: 1px 1px 1px #fff;
										  /* Firefox */
										  background: -moz-linear-gradient( top, #ecc3bb, #cc8877); -moz-border-radius: 2px; -moz-box-shadow: 1px 1px 1px #fff;
										  /* IE */
										  filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#ecc3bb,endColorstr=#cc8877); zoom: 1;
										  }

/* amazon */
.amazon_text { text-align: left; }

/* pagetop */
.pagetop	{ clear: both; height: 15px; }
.pagetop a	{ float: right; width: 90px; height: 15px; background: url('http://img-cdn.jg.jugem.jp/6df/2060539/20111013_2087025.gif') no-repeat left top; text-indent: -9999px; display: block; overflow: hidden; }

/*	Footer Style
----------------------------------------------------------------------------- */
#footer				{ clear: both; }

/* copyright */
#footer .copyright	{ color: #ccc; font-size: 11px; text-align: center; padding: 0 0 10px; }
#footer	a			{ color: #ccc; }

/*	Default Style Reset
----------------------------------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
header, footer, section, article, nav, aside { margin: 0; padding: 0; }
fieldset, img { border: 0; }

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size: 100%; }
select option { padding : 0 5px; }

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