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

ホーム

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

テンプレート名 : 301dot

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>{site_title}</title>
<link href="{site_css}" rel="stylesheet" type="text/css" 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="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>
<body id="PageTop" onload="javascript:initval();">

<div id="mainContents">

<div class="btm-110">
<p id="siteID" class="title t-bold nb">{blog_name}</p>
<p class="note">{blog_description}</p>
</div>

<div class="entry">
<div class="title-set btm-30">
<h1 class="title t-bold btm-10 nb">{entry_title_link}</h1>
<p class="date btm-00 nb">Date：{entry_year}.{entry_month}.{entry_day}.{entry_eng_week}　Time：{entry_time}　Category：{category_name}</p>
</div>
<div class="note">{entry_description}
<p class="more"><a name="sequel"></a>{entry_sequel}</p>
</div>
<div class="state">
<p class="btm-10 nb">{user_name} | {category_name} | {comment_num} | {trackback_num}</p>
<p class="t-right btm-00 nb"><a href="#PageTop">... return to page top</a></p>
</div>{trackback_auto_discovery} 
</div>

<a id="comments" name="comments"></a>
<div class="comment">
<h2 class="title t-bold btm-20">Comments</h2>

<div class="note">
<p class="btm-10 nb">From：<span class="bold">{comment_name}</span><br />
{comment_year}.{comment_month}.{comment_day}.{comment_eng_week}</p>
<p>{comment_description} </p>
</div>

</div>
<div class="comment">
<h2 class="title t-bold btm-20">Add Comment</h2>
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post" class="note">
<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}" class="text" />
</p>
<p>
<label for="email">Mail address</label><br />
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="text" />
</p>
<p>
<label for="url">Url</label><br />
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}"  class="text" />
</p>
<p>
<label for="description">Comment</label><br />
<textarea tabindex="4" id="description" name="description" rows="8" cols="50" class="textarea"></textarea>
</p>
<p><input tabindex="5" type="submit" name="submit" id="submit" value="submit" class="submit" onclick="javascript:setval();">
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
<label for="set_cookie">Cookieに登録</label>
</p>
</form>
</div>

<div class="trackback">
<h2 class="title t-bold btm-20">Trackbacks</h2>
<div class="note">
<p class="btm-10">Trackback URL for this entry :: {trackback_url}</p>
</div>

<div class="note">
<p class="btm-10 nb">From：<span class="t-bold">{trackback_blog_name}</span><br />
{trackback_year}.{trackback_month}.{trackback_day}.{trackback_eng_week}</p>
<p>{trackback_title}<br />
{trackback_excerpt}</p>
</div>

</div>

<div class="profile">
<h2 class="title t-bold btm-20">Profile</h2>
<div class="note">{profile_description}</div>
</div>

<div class="pagenav">
<p class="f-left nb"><a href="{prev_page_url}">:: prev ...</a></p>
<p class="f-right nb"><a href="{next_page_url}">... next ::</a></p>
</div>

<div class="t-right">
<p class="nb">{copyright} :: design @ <a href="http://chocolateboard.net/">chocolateboard.net</a></p>
</div>
</div>

<div id="sideContents">
<dl>

<dt class="title t-bold btm-20">Calendar</dt>
<dd class="calendar" class="list">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="weekday">Sun</td>
<td class="weekday">Mon</td>
<td class="weekday">Tue</td>
<td class="weekday">Wed</td>
<td class="weekday">Thu</td>
<td class="weekday">Fri</td>
<td class="weekday">Sat</td>
</tr>
</table>
{calendar}
</dd>


<dt class="title t-bold btm-20">New Entries</dt>
<dd class="list">{selected_entry_list}</dd>


<dt class="title t-bold btm-20">Profile</dt>
<dd class="list">{user_list}</dd>


<dt class="title t-bold btm-20">Categories</dt>
<dd class="list">{category_list}</dd>


<dt class="title t-bold btm-20">Archives</dt>
<dd class="list">{archives_list}</dd>


<dt class="title t-bold btm-20">Recent Comments</dt>
<dd class="list">{recent_comment_list}</dd>


<dt class="title t-bold btm-20">Recommend</dt>
<dd class="list">{amazon_item}</dd>


<dt class="title t-bold btm-20">OTHER</dt>
<dd class="list">
<ul>
<li><a href="./?mode=rss">rss1.0</a></li>
<li><a href="./?mode=atom">atom0.3</a></li>
<li><a href="./admin">login</a></li>
</ul>
</dd>


<dt class="title t-bold btm-20">LINKS</dt>
<dd class="list">{link_list}</dd>


<dt class="title t-bold btm-20">MOBILE</dt>
<dd class="list">{site_qrcode}</dd>


<dt class="title t-bold btm-20">{freespace_title1}</dt>
<dd class="list">{freespace_contents1}</dd>


<dt class="title t-bold btm-20">{freespace_title2}</dt>
<dd class="list">{freespace_contents2}</dd>


<dt class="title t-bold btm-20">{freespace_title3}</dt>
<dd class="list">{freespace_contents3}</dd>


<dt class="title t-bold btm-20">{freespace_title4}</dt>
<dd class="list">{freespace_contents4}</dd>


<dt class="title t-bold btm-20">{freespace_title5}</dt>
<dd class="list">{freespace_contents5}</dd>


<dt class="title t-bold btm-20">SPOMSORED</dt>
<dd class="list">{ad}</dd>

</dl>
</div>

</div>

CSS

最終更新日： 2010/12/18
	Design : AKeY(chocolateboard)
	Author : http://chocolateboard.net/
	
	「design @ chocolateboard」の表記は削除なさらないでください。
	カスタマイズに関するご質問にはお答えできません。
	自己責任で行ってください。
	
	また、文字色の変更がある程度しやすいよう、
	「10. Color Setting」内（css最下部）に文字色設定のみをまとめています。
	ご自身で変更可能な範囲でご利用ください。
	
	下記以外に関しては、
	http://chocoboardnet.jugem.jp/内のテンプレート該当記事をお読みください。
	
	☆sideの表示項目・表示順は以下
	
	*CALENDAR
	*NEW ENTRIES
	*PROFILE
	*CATEGORIES
	*ARCHIVES
	*RECENT COMMENTS
	*RECOMMEND
	*OTHER
	*LINKS
	*MOBILE
	*FREE1
	*FREE2
	*FREE3
	*FREE4
	*FREE5
	*広告
	
	サイドに写真を載せる際は、幅230px以内にリサイズしてください。
	エントリーに写真を載せる際は、幅520px以内にリサイズしてください。
	
----------------------------------------------------------------------------*/

/*==================================================
*	01. Universal Reset
*	02. Base Setting
*	03. LeftBox Layout
*	04. RightBox Layout
*	05. Class
*	06. ClearFix
*	07. hasLayout Swicth
*	08. Print WinIE6 only
*	09. Color Setting
==================================================*/

/*--------------------------------------------------
    01. Universal Reset
--------------------------------------------------*/
body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li, 
brockquote,pre,table,caption,th,td,address, 
form,fieldset,legend,object { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: none; vertical-align: top; }
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
ol,ul { list-style: none; }
caption,th,td { text-align: left; vertical-align: top; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: none; }

sup{ vertical-align:top; }
sub{ vertical-align:baseline; }
a, object, embed { outline:none; }

body{
    background: #ffffff; line-height: 1.6;
    font-size: 13px;
    font-size: small\9;/* IE8 and below */
    *font: x-small; /* Win IE 5-5.5､6(後方互換モード) */
    }

/*--------------------------------------------------
    02. Base Setting
--------------------------------------------------*/
body{ background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911881.gif") repeat left top; font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
strong{ font-weight: bold; }
em{ color: #ffaec4; }

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

.nb a,
.nb a:link,
.nb a:visited{ text-decoration: none; }
.nb a:hover,
.nb a:active,
.nb a:focus{ text-decoration: underline; }

.list a,
.list a:link,
.list a:visited{ text-decoration: none; }
.list a:hover,
.list a:active,
.list a:focus{ text-decoration: underline; }

.calendar a,
.calendar a:link,
.calendar a:visited{ text-decoration: none; }
.calendar a:hover,
.calendar a:active,
.calendar a:focus{ text-decoration: underline; }

#wrap{ width: 870px; font-size: 85%; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911887.gif") repeat-y left top; }

/*--------------------------------------------------
    03. LeftBox Layout
--------------------------------------------------*/
#sideContents{ width: 230px; padding: 60px 30px 0; float: left; text-align: center; }
#sideContents dl dt{ font-size: 108%; padding-top: 75px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911896.gif") no-repeat center top; }
#sideContents dl dd{ margin-bottom: 50px; }
#sideContents dl table { margin: 0 auto; }

/* for Calendar */
.calendar { margin: 0 auto;	font-family: "Verdana", "arial"; font-size: 9px; }
.calendar td { text-align: center; }
.calendar .cell { width:20px; padding:2px; }
.calendar .weekday { width:23px; padding:0px; }

/*--------------------------------------------------
    04. RightBox Layout
--------------------------------------------------*/
#mainContents{ width: 520px; padding: 70px 30px 0 0; float: right; }
#mainContents p#siteID{ font-size: 108%; }

#mainContents h1{ color: #ffaec4; font-size: 108%; font-weight: bold; }
#mainContents h2{ color: #ffaec4; font-size: 108%; font-weight: normal; }
#mainContents h3{ color: #e1a4b5; font-size: 108%; font-weight: bold; }
#mainContents h4{ color: #e1a4b5; font-size: 108%; font-weight: normal; }
#mainContents h5{ color: #999999; font-size: 108%; font-weight: bold; }
#mainContents h6{ color: #999999; font-size: 108%; font-weight: normal; }
#mainContents blockquote{ margin-bottom: 20px; padding-left: 15px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911885.gif") repeat-y left top; }
#mainContents p{ margin-bottom: 20px; }
#mainContents ul,
#mainContents ul{ margin-bottom: 20px; }
#mainContents li{ padding-left: 15px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911885.gif") no-repeat left 3px; }
#mainContents em{ color: #ffaec4; }

#mainContents .entry,
#mainContents .comment,
#mainContents .trackback,
#mainContents .profile,
#mainContents .pagenav{ margin-bottom: 115px; }

#mainContents .entry{ background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911894.gif") no-repeat right top; }
#mainContents .title-set{ padding-bottom: 20px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911882.gif") repeat-x left bottom; }
#mainContents .date{ padding-left: 20px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911883.gif") no-repeat left 6px; }
#mainContents .note{ padding-left: 20px; }
#mainContents .state{ padding-top: 20px; background: url("http://img-cdn.jg.jugem.jp/696/925838/20101216_1911882.gif") repeat-x left top; }

/* for Add Comment Form */
input.text,
textarea.textarea{ padding: 3px; background: #ffffff; color: #999999; border: 1px solid #dddddd; }
input.text:focus,
textarea.textarea:focus{ background: #fff9fb; border: 1px solid #ffd8e3; }

input.submit{ background: #ffaec4; color: #ffffff; padding: 3px 10px; border: 1px solid #ffaec4; }
input.submit:hover{ background: #ffd8e3; color: #ffffff; border: 1px solid #ffd8e3; }

/*--------------------------------------------------
    05. Class
--------------------------------------------------*/
.t-bold{ font-weight: bold !important; }
.t-right{ text-align: right !important; }
.t-center{ text-align: center !important; }
.f-left{ float: left !important; }
.f-right{ float: right !important; }

.btm-00{ margin-bottom: 0 !important; }
.btm-10{ margin-bottom: 10px !important; }
.btm-20{ margin-bottom: 20px !important; }
.btm-30{ margin-bottom: 30px !important; }
.btm-40{ margin-bottom: 40px !important; }
.btm-50{ margin-bottom: 50px !important; }
.btm-60{ margin-bottom: 60px !important; }
.btm-70{ margin-bottom: 70px !important; }
.btm-80{ margin-bottom: 80px !important; }
.btm-90{ margin-bottom: 90px !important; }
.btm-100{ margin-bottom: 100px !important; }
.btm-110{ margin-bottom: 110px !important; }

/*--------------------------------------------------
    06. ClearFix
--------------------------------------------------*/
#wrap:after,
.pagenav:after,
.clearFix:after{ display: block; clear: both; height: 0; visibility: hidden; content: "."; font-size: 0; }

/*--------------------------------------------------
    07. hasLayout Swicth
--------------------------------------------------*/
div,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,table,th,td,form,fieldset,legend{ zoom:1; }

ul li,
ol li{ zoom: normal; }

/*--------------------------------------------------
    08. Print WinIE6 only
--------------------------------------------------*/
@media print{
* html body{ zoom: 68%; }
}

/*--------------------------------------------------
    09. Color Setting
--------------------------------------------------*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    全体 テキスト色
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
body{ color: #777777; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    全体 リンク色 ※他細部は「04. RightBox Layout」参照
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
a,
a:link,
a:visited{ color: #ffaec4; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    全体 タイトル色
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.title{ color: #ffaec4; }

.title a,
.title a:link,
.title a:visited{ color: #ffaec4; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    サイド リンク色
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.list a,
.list a:link,
.list a:visited{ color: #999999; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    サイド リンク色 カレンダー部分
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.calendar a,
.calendar a:link,
.calendar a:visited{ color: #ffaec4; }

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