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

ホーム

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

テンプレート名 : RainDrop

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=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">
<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>
{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>
<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">
<a name="{trackback_id}" id="{trackback_id}"></a>
<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="block-1">

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

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

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

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

<li><a href="./?eid={recent_comment_item_entry_id}#{recent_comment_item_comment_id}"> {recent_comment_item_title}</a>{recent_comment_item_name}［{recent_comment_item_date}］</li>

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

<div id="recent-trackback" class="hide" onMouseover="this.className='show'" onMouseout="this.className='hide'">
<h5><span>RECENT TRACKBACKS</span></h5>
<div class="box">
<ul><li>{recent_trackback_item_title}<br /><a href="./?eid={recent_trackback_item_entry_id}#{recent_trackback_item_trackback_id}">{recent_trackback_item_blog_name}</a>［{recent_trackback_item_date}］</li></ul>
</div>
</div>
<hr />

<div id="recommend" class="hide" onMouseover="this.className='show'" onMouseout="this.className='hide'">
<h5><span>RECOMMEND</span></h5>
<div class="box">

<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>
</div>
<hr />

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

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

</div>

<div id="block-2">

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

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

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

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

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

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

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

<div id="others" class="hide" onMouseover="this.className='show'" onMouseout="this.className='hide'">
<h5><span>OTHERS</span></h5>
<div class="box">
<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>
</div>
<hr />

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

</div>

</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 auto; width:800px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080507_2223700.gif) repeat-y center center #ffffff; color:#556677; text-align:center; font-family:'Trebuchet MS', 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', Osaka;  }

/* Mac IE 用 \*//*/
body { width:799px; border-right:1px solid #aaddee; }
/*  */

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

/* フォントサイズ ------------------------------------★ */
body { font-size:14px; }
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 { line-height:1.5; 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 { text-decoration:none; }
a:link  { color:#ffaaaa; }
a:visited  { color:#ffcccc; }
a:hover { color:#ff6666; }
a:active {  }

/* 見出し ------------------------------------★ */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1 { margin:0px 15px; position:relative; top:25px; }
h2 { margin:0px 15px; font-size:93%; position:relative; top:25px; }
h3 { padding:12px 0px 0px 30px; height:28px; border-bottom:2px solid #aaddee; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223757.gif) no-repeat 10px center; font-size:100%; }
h4 {  }
h5 {  }
h6 {  }

/* Win IE 用 \*/
* html h1 { top:15px; }
* html h2 { top:10px; }
/* */

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

/* フォーム ------------------------------------★ */
input { border:1px solid #999999; }
textarea { width:140px; border:1px solid #999999; }
form {  }
select {  }
option {  }

.submit { border:none; color:#ffaaaa; background-color:#ffffff; }
.checkbox { border:0px; background-color:transparent; }

/* Win IE 用 \*/
* html textarea { width:160px; }
* html #set_cookie { border:none; }
/* */

/* 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 { margin:0px 10px; }
dt { margin:0px 0px 2px; text-align:left; }
dd { margin:0px 0px 10px; text-align:left; }

dd p { margin:5px 0px 0px; }

/* テーブル ------------------------------------★ */
table { border:0px; border-collapse:collapse; border-spacing:0px; }
td {  }

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

/* ヘッダー ------------------------------------★ */
#header { margin:0px auto; padding:0px; width:800px; height:140px; border-right:1px solid #aaddee; border-left:1px solid #aaddee; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080511_2226749.gif) repeat-x; text-align:left; }
h1 a:link, h1 a:visited { color:#ffaaaa; }

/* ページナビ ------------------------------------★ */
.navi { margin:0px auto 40px; text-align:center; }
.navi ul {  }
.navi li { margin:0px 5px; padding:0px 5px; display:inline; }

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

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

/* メイン ------------------------------------------------------------------------ */
#main { margin:0px auto; width:440px; float:right; position:relative; right:180px; }

/* Mac IE 用 \*//*/
#main { margin:0px 180px 0px 0px; }
/*  */

/* エントリー ------------------------------------★ */
.entry { margin:0px 0px 60px; }
.entry-header {  }
.entry-body { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224841.gif) left top; line-height:25px; }
.entry-footer {  padding-bottom:30px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }

.entry-body:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }

/* 追記 */
.more{ margin:25px 20px 0px; }

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

/* 本文 */
.note { margin:0px 0px 0px; padding:0px 15px; line-height:25px; }
.note p { margin:auto auto 25px; line-height:25px; }
.jgm_entry_desc_mark {  }
.note img { margin:0px 15px 0px 0px; float:left; }
.note ul { margin:0px 0px 0px 20px; }
.note li { margin:0px 0px 5px; }

.note div, .note span { margin:0px; padding:0px; }

/* エントリー情報 */
.info { margin:0px 20px 15px; text-align:right; font-size:93%; clear:both; position:relative; top:15px; }
.info ul { list-style:none; white-space:nowrap }
.info li { padding:0px 5px; display:inline; border-right:2px solid #556677; }
.info .name { border-left:2px solid #556677; }

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

/* レビュー */
.note .jugem_review { margin:0px 0px 10px; padding:10px 10px 15px; background:#333333; line-height:25px; position:relative; }
.note .jugem_review img { margin:5px 0px 0px; }
.note .jugem_review td { color:#ffffff; line-height:25px; }
.note .review_detail { margin:-5px 0px 0px; padding:0px 0px 10px; }
.note .review_detail img { margin:0px; float:clear; }

/* Win IE 用 \*/
* html .note .review_detail img { margin:-10px 0px 5px; }
/* */

/* プロフィール */
.profile-area { margin:0px 0px 40px; position:relative; top:20px;  }
.profile-header {  }

/* コメント ------------------------------------★ */
.comment-area {  }
.comment-area ul { list-style:none; }
.comment-area .note { background-image:none; }

/*  コメントフォーム  */
.comment-form h4 { padding:0px 10px 3px; border-bottom:1px dashed #aaddee; }
.comment-form { margin:0px 0px 20px; }
.comment-form form { margin:0px 10px; }
.comment-form input { margin:5px 0px; }

/* トラックバック ------------------------------------★ */
.trackback-area .note { background-image:none; }
.trackback-area h4 { padding:0px 10px 3px; border-bottom:1px dashed #aaddee; }
.trackback-area p { padding:10px; }
.trackback-area ul { padding:0px 10px; list-style:none; }
.tb-body { padding:10px; }

/* Win IE 用 \*/
* html .tb-body { padding:0px 10px; }
/* */

/* サイド ------------------------------------------------------------------------ */
#side { line-height:1.5; }
#side h5 { height:30px; }
#side h5 span { display:none; }

/* 左 ------------------------------------------------------------------------ */
#block-1 { margin:0px; width:180px; float:left; }

/* 右 ------------------------------------------------------------------------ */
#block-2 { margin:0px; width:180px; clear:both; position:absolute; top:0px; right:0px; }

/* Mac IE 用 \*//*/
#block-2 h5 { width:179px; }
/*  */

/*  RECENT ENTRIES  */
#recent { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#recent h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224833.gif) no-repeat; }
#recent ul { margin:5px 10px 20px; list-style:none; }

/*  ARCHIVES  */
#archive { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#archive h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224823.gif) no-repeat;  }
#archive ul { margin:5px 10px 20px; list-style:none; }

/*  CATEGORY  */
#category { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#category h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224824.gif) no-repeat;  }
#category ul { margin:5px 10px 20px; list-style:none; }

/*  RECENT COMMENTS  */
#recent-comment { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#recent-comment h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224832.gif) no-repeat;  }
#recent-comment ul { margin:5px 10px 20px; list-style:none; }

/*  RECENT TRACKBACKS  */
#recent-trackback { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#recent-trackback h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224834.gif) no-repeat;  }
#recent-trackback ul { margin:5px 10px 20px; list-style:none; }

/*  RECOMMEND  */
#recommend { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; text-align:center; }
#recommend h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224835.gif) no-repeat; }
#recommend ul { margin:10px 10px 15px; list-style:none; }
#recommend li { margin-bottom:5px; padding:0px; height:auto; line-height:1.5; }

#recommend .image {  }
#recommend .creator {  }
#recommend .productname {  }
#recommend .comment{ padding:10px; background:#e5f5fa; text-align:left; }

/*  LINKS  */
#link { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#link h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224827.gif) no-repeat; }
#link ul { margin:5px 10px 20px; list-style:none; }

/*  PROFILE  */
#profile { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#profile h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224831.gif) no-repeat; }
#profile ul { margin:5px 10px 20px; list-style:none; }

/*  FREE SPEACE  */
.free { margin:0px 0px 30px; padding-bottom:20px;background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; text-align:center; }
#side .free h5 { padding:0px 0px 5px 30px; width:150px; height:30px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224826.gif) no-repeat 0px -3px; font-weight:normal; font-size:100%; text-align:left; line-height:1.5; }

#side .free div { margin:0px auto; }

/* Win IE 用 \*/
* html #side .free h5 { width:180px; }
/* */

/* Mac IE 用 \*//*/
#side .free h5 { margin:0px -30px 0px 0px; }
/*  */

/*  SEARCH  */
#search-area { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224836.gif) repeat-x left bottom; }
#search-area h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224836.gif) no-repeat; }
#search-area form { margin:5px 10px 20px; }
#search-area p {  }
#search-area input { width:120px; }
#search-area .submit { width:50px; }

/*  MOBILE  */
#mobile { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#mobile h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224828.gif) no-repeat; }
#qrcode { margin:5px 10px 20px; text-align:center; }

/*  OTHERS  */
#others { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; }
#others h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224829.gif) no-repeat; }
#others ul { margin:5px 10px 20px; list-style:none; }

/*  SPONSOR  */
#sponsor { margin:0px 0px 30px; padding-bottom:10px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080508_2223941.gif) repeat-x left bottom; text-align:left; }
#sponsor h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080509_2224837.gif) no-repeat; }
#ad { padding:10px 0px; text-align:center; }

/*  POWERD  */
#powerd p { margin:0px 0px 0px 5px; display:inline; }

/* フッター ------------------------------------★ */
#footer { margin:0px auto; padding:50px 20px; clear:both; }

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