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

ホーム

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

テンプレート名 : Polka Dot

HTML・CSSをコピーして使う

HTML

<?xml version="1.0" encoding="EUC-JP"?>
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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>

<div id="page">

<div id="header">
<h1 id="top"><span>{blog_name}</span></h1>
<h2><span>{blog_description}</span></h2>
<hr />
</div>

<div id="content">

<div id="main">

<div class="navi"><ul>
<li class="prev-entry">{prev_entry}</li>
<li class="main"><a href="./">main</a></li>
<li class="next-entry">{next_entry} </li>
</ul></div>

<div class="entry_one">
<div class="entry">
<div class="entry-header"><h3>{entry_title}</h3></div>
<div class="entry-body">
<div class="date">{entry_date}</div>
<div class="note">{entry_description}</div>

<div class="more"><p>{entry_sequel}</p></div>

</div>
<div class="entry-footer">
<div class="info"><ul>
<li class="name"><span>{user_name}</span></li>
<li class="time"><span>{entry_time}</span></li>
<li class="category">{category_name}</li>
<li class="count-com">{comment_num}</li>
<li class="count-tb">{trackback_num}</li>
<li class="return"><a href="#top">▲</a></li>
</ul></div>
</div>

</div>
</div>
{trackback_auto_discovery}
<hr />

<a name="comments"></a>
<div class="comment-area">

<div class="comment-header"><h4><span>Comment</span></h4></div>
<div class="comment-body">
<a name="{comment_id}" id="{comment_id}"></a>
<a name="comment_id" id="comment_id"></a>
<div class="note">{comment_description}</div>
</div>
<div class="comment-footer">
<div class="info"><ul>
<li class="name"><span>{comment_name}</span></li>
<li class="time"><span>{comment_time}</span></li>
</ul></div>
</div>


<div class="comment-form">
<div class="comment-header"><h4><span>Submit Comment</span></h4></div>
<div class="comform-body">
<div class="note">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<dl>
<dt><label for="name">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" /></dd>
<dt><label for="email">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" /></dd>
<dt><label for="url">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" /></dd>
<dt><label for="description">comments:</label></dt>
<dd><textarea tabindex="4" id="description" name="description" rows="8" cols="50"></textarea><br />
<input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();" class="submit" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
<label for="set_cookie">Cookieに登録</label></dd>
</dl>
<p><input type="hidden" name="entry_id" value="{entry_id}" /></p>
</form>
</div>
</div>
<div class="comform-footer"></div>
</div>

</div>

<div class="trackback-area">
<h4><span>Trackback URL：</span></h4>
<p>{trackback_url}</p>

<div class="tb-header"><h4><span>Trackback</span></h4></div>
<div class="tb-body">
<strong>{trackback_title}</strong>
<div class="note">{trackback_excerpt}</div>
</div>

<div class="tb-footer">
<div class="info"><ul>
<li class="name"><span>{trackback_blog_name}</span></li>
<li class="time"><span>{trackback_time}</span></li>
</ul></div>
</div>

</div>

<div class="profile-area">
<div class="profile-header"><h3><span>{profile_name}</span></h3></div>

<div class="profile-body">
<div class="note">{profile_description}</div>
</div>

<div class="navi"><ul>
<li class="prev">{prev_page_link}</li>
<li class="now">{page_now}</li>
<li class="page-num">{page_num} PAGES</li>
<li class="next">{next_page_link}</li>
</ul></div>

</div>

<div id="side">

<div id="recent" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>RECENT ENTRIES</span></h5>
{selected_entry_list}
</div>
<hr />

<div id="archive" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>ARCHIVES</span></h5>
{archives_list}
</div>
<hr />

<div id="category" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>CATEGORY</span></h5>
{category_list}
</div>
<hr />

<div id="recent-comment" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>RECENT COMMENTS</span></h5>
<ul>

<li><a href="./?eid={recent_comment_item_entry_id}#{recent_comment_item_comment_id}"> {recent_comment_item_name}　[{recent_comment_item_date}]</a></li>

</ul>
</div>
<hr />

<div id="recent-trackback" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>RECENT TRACKBACKS</span></h5>
<ul><li>{recent_trackback_list}</li></ul>
</div>
<hr />

<div id="recommend" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>RECOMMEND</span></h5>

<ul>
<li class="image"><a href="{amazon_url}"><img src="{amazon_ImageUrlSmall}" alt="amazon image" /></a></li>
<li class="productname"><a href="{amazon_url}">{amazon_ProductName}</a></li>
<li class="creator">{amazon_Creator}</li>
<li class="comment">{amazon_comment}</li>
</ul>

</div>
<hr />

<div id="link" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>LINKS</span></h5>
{link_list}
</div>
<hr />

<div id="profile" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>PROFILE</span></h5>
{user_list}
</div>
<hr />

<div class="free">
<h5>{freespace_title1}</h5>
{freespace_contents1}
</div>
<hr />

<div class="free">
<h5>{freespace_title2}</h5>
{freespace_contents2}
</div>
<hr />

<div class="free">
<h5>{freespace_title3}</h5>
{freespace_contents3}
</div>
<hr />

<div class="free">
<h5>{freespace_title4}</h5>
{freespace_contents4}
</div>
<hr />

<div class="free">
<h5>{freespace_title5}</h5>
{freespace_contents5}
</div>
<hr />

<div id="search-area" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>SEARCH</span></h5>
<form method="get" action="">
<p><input id="search" name="search" size="20" />
<input type="submit" value="Search" class="submit" /></p>
</form>
</div>
<hr />

<div id="mobile" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>MOBILE</span></h5>
<div id="qrcode">{site_qrcode}</div>
</div>
<hr />

<div id="others" class="hide" onclick="this.className='show'" ondblclick="this.className='hide'">
<h5><span>OTHERS</span></h5>
<ul>
<li id="template">Template by <a href="http://snowstar46.jugem.jp/" target="46">46</a></li>
<li><a href="./admin/">Admin</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>
</div>
<hr />

<div id="sponsor">
<h5><span>SPONSORED LINK</span></h5>
<div id="ad">{ad}</div>
</div>
<hr />

</div>

</div>

<div id="footer">
<address><span>{copyright}</span></address>
</div>

</div>

</body>
</html>

CSS

@charset "EUC-JP";

/* 基本設定 ------------------------------------------------------------------------ */
* { margin:0px; padding:0px; }

body { margin:0px; color:#005555; background:#ffffff; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080416_2206828.gif) repeat; text-align:center; font-family:'Trebuchet MS', 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', Osaka; }

hr { display:none; }
img { border:0px }

/* フォントサイズ ------------------------------------★ */
body { font-size:14px; line-height:1.5;  }
table { font-size:inherit; font:100%; }
small { font-size:inherit; font:100%; }
pre, code { font:115% monospace; }

/* Basis - 14px */
.f10 { font-size:72%; } /* 10px (eq.x-small) */
.f13 { font-size:93%; } /* 13px (eq.small) */
.f16 { font-size:114.5%; } /* 16px (eq.medium) */
.f18 { font-size:128.6%; } /* 18px (eq.large) */
.f20 { font-size:142.9%; } /* 20px */
.f24 { font-size:171.5%; } /* 24px */

/* Win IE 用 \*/
* html body { font-size:88%; }
* html small { font:x-small; }
* html pre { font-size:100%; }
* html code { font-size:100%; }

* html select { line-height:1.5; }
* html input { line-height:1.5; }
* html textarea { line-height:1.5; }
/* */

/* リンク ------------------------------------★ */
a { font-weight:bold; text-decoration:none; }
a:link { color:#666666; }
a:visited { color:#999999; }
a:hover { color:#33aaaa; border-bottom:1px dotted #33aaaa; }
a:active {  }

/* 見出し ------------------------------------★ */
h1, h2, h3, h4, h5, h6 {  }
h1 { color:#33aaaa; }
h1 a { color:#33aaaa; }
h1 a:visited { color:#33aaaa; }

h2 { margin:0px 0px 0px 1em; font-weight:normal; font-size:93%; }
h3 { margin:0px 0px 0.5em; border-bottom:1px dotted #33aaaa; color:#33aaaa; font-size:114.5%; }
h3:first-letter { font-size:171.5%; }

h4 { margin:0px 0px 0.5em; border-bottom:1px dotted #33aaaa; color:#33aaaa; font-size:100%; text-transform:uppercase; }
h4:first-letter { font-size:171.5%; }

h5 { border-bottom:1px dotted #33aaaa; color:#33aaaa; font-size:100%; text-align:left; text-transform:uppercase; letter-spacing:0.1em; }
h6 {  }

/* テキスト ------------------------------------★ */
p { margin:auto auto 1.5em; }
address { font-style:normal; }
strong {  }
em {  }
del {  }
blockquote {  }

/* フォーム ------------------------------------★ */
input { padding:3px; border:1px dotted #005555; }
textarea { border:1px dotted #005555; }
form {  }
select {  }
option {  }

.submit { padding:3px; color:#33aaaa; background-color:#ffffff; }
.checkbox { border:0px; background-color:transparent; }

/* Mac IE 用 \*//*/
input { padding:0px 3px 3px;  }
.submit { margin:3px 0px 0px; padding:0px 3px 3px; }
#set_cookie { border:none; }
/*  */

/* リスト ------------------------------------★ */
ol { margin: 0px 0px 0px 1px; padding: 0px; }
ol li {  }

ul { margin: 0px 0px 0px 1px; padding: 0px; }
ul li {  }

dl {  }
dt {  }
dd {  }

/* 囲み ------------------------------------★ */
#page { margin:0px auto; width:740px; background:#ffffff; }
#content { padding:0px 20px; text-align:left; position:relative; }

/* ヘッダー ------------------------------------★ */
#header { margin:0px 20px 60px; text-align:left; position:relative; top:20px; }

h1 a:link, h1 a:visited {  }
h1 a:hover {  }

/* Win IE 用 \*/
* html h1 { }	
* html h2 { font-size:93%; }	
/* */

/* ページナビ ------------------------------------★ */
.navi { margin:0px 0px 1.5em auto; text-align:right; clear:both; }
.navi ul { list-style:none; }
.navi li { padding:0px 5px; height:1em; line-height:1; border-right:2px solid #999999; display:inline; }

.main {  }
.prev-entry { border-left:2px solid #999999; }
.next-entry {  }

.now {  }
.page-num {  }
.prev { border-left:2px solid #999999; }
.next {  }

/* メイン ------------------------------------------------------------------------ */
#main { margin:0px; width:480px; float:right; }

/* エントリー ------------------------------------★ */
.entry { margin:0px 0px 40px; }
.entry-header {  }
.entry-body { margin:0px 0px 0.5em; border-bottom:1px dotted #33aaaa; }
.entry-footer {   }

/* Win IE 用 \*/
* html h3 {  }
/* */

/* 日付 */
.date { margin:0px 15px 0.5em; text-align:right; }

/* 本文 */
.note { margin:0px 15px 1.5em; }
.note ul {  }
.note li {  }

/* 追記 */
.more{ margin:0px 15px 1.5em; }

/* エントリー情報 */
.info { margin:0px 15px 1.5em; text-align:right; }
.info ul { height:1.5em; list-style:none; }
.info li { margin:0px 0px 0.5em; padding:0px 5px; line-height:1; border-right:2px solid #999999; display:inline; }
.info .name { border-left:2px solid #999999;  }

.info .time {  }
.category, .count-com, .count-tb {  }

/* プロフィール */
.profile-area { margin:0px 0px 30px; }
.profile-area ul { list-style:none; }
.profile-header {  }

/* コメント ------------------------------------★ */
.comment-area { margin:30px 0px 30px;}
.comment-area ul { list-style:none; }
.comment-body { margin:0px 0px 0.5em; border-bottom:1px dotted #33aaaa; }

/*  コメントフォーム  */
.comment-form {  }
.comment-form h4 {  }
.comment-form form {  }
.comment-form input {  }

/* トラックバック ------------------------------------★ */
.trackback-area { margin:0px 0px 30px; }
.trackback-area ul { list-style:none; }
.trackback-area p { margin:0px 15px 1.5em; }
.tb-body { margin:0px 15px 1.5em; }

/* サイド ------------------------------------------------------------------------ */
#side { margin:0px auto; width:200px; float:left; }
#side div { margin:0px 0px 25px 0px; }
#side ul { margin:0px 0px 0px 1em; list-style:none; }
#side li { }

#side h5 { margin:0px 0px 0.5em 0px; }
#side h5 span {  }
#side h5:first-letter { font-size:171.5%; }

/*  表示切り替え  */
.hide ul, .hide form, .hide #qrcode { display:none; }
.hide h5 { cursor:default; }

.show h5 span:first-letter { font-size:171.5%; } 
.show h5 { cursor:default; }
.show span { display:block; cursor:default; }

/*  RECENT ENTRIES  */
#recent h5 {  }
#recent ul {  }

/*  ARCHIVES  */
#archive h5 {   }
#archive ul {  }

/*  CATEGORY  */
#category h5 {   }
#category ul {  }

/*  RECENT COMMENTS  */
#recent-comment ul {  }
#recent-comment li {  }

/*  RECENT TRACKBACKS  */
#recent-trackback ul {  }

/*  RECOMMEND  */
#recommend {  }
#recommend h5 {  }
#recommend ul { margin:0px 0px 1.5em 0px; }
#recommend li {  }

#recommend .creator {  }
#recommend .productname {  }
#recommend .comment{  }

/*  LINKS  */
#link h5 {  }
#link ul {  }

/*  PROFILE  */
#profile h5 {  }
#profile ul {  }

/*  FREE SPEACH  */
.free { text-align:center; }
.free h5 {  }
.free div { margin:auto; }

/*  SEARCH  */
#search-area h5 {  }
#search-area form {  }
#search-area p {  }
#search-area input { width:120px; }
#search-area .submit { width:auto; }

/*  MOBILE  */
#mobile {  }
#mobile h5 {  }
#qrcode { text-align:left; }

/*  OTHERS  */
#others {  }
#others h5 {  }
#others ul {  }

/*  SPONSOR  */
#sponsor { text-align:center; }
#sponsor h5 {  }
#ad div { margin:auto; }

/*  POWERD  */
#powerd p {  }

/* フッター ------------------------------------★ */
#footer { margin:0px 20px; padding:20px 0px; border-top:1px dotted #005555; clear:both; }

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