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

ホーム

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

テンプレート名 : SkyBlue

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>
<script type="text/javascript">

</script>
</head>

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

<div id="header">
<h1><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="state"><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">
<p><input type="hidden" name="entry_id" value="{entry_id}" style="width:250px;" class="form_color" /></p>
<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" style="width:300px;"></textarea><br />
<input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
<label for="set_cookie">Cookieに登録</label></dd>
</dl>
</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="state"><ul>
<li class="name"><span>{trackback_blog_name}</span></li>
<li class="time"><span>{trackback_time}</span></li>
</ul></div>
</div>

</div>

<div class="entry_one">
<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>{page_num}PAGES </li>
<li class="next">{next_page_link}</li>
</ul></div>

</div>

<div id="side">

<div id="recent">
<h5><span>RECENT ENTRIES</span></h5>
{selected_entry_list}
</div>
<hr />

<div id="archive">
<h5><span>ARCHIVES</span></h5>
{archives_list}
</div>
<hr />

<div id="category">
<h5><span>CATEGORY</span></h5>
{category_list}
</div>
<hr />

<div id="recent-comment">
<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">
<h5><span>RECENT TRACKBACKS</span></h5>
<ul><li>{recent_trackback_list}</li></ul>
</div>
<hr />

<div id="recommend">
<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">
<h5><span>LINKS</span></h5>
{link_list}
</div>
<hr />

<div id="profile">
<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">
<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">
<h5><span>MOBILE</span></h5>
<div id="qrcode">{site_qrcode}</div>
</div>
<hr />

<div id="others">
<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:#586972; text-align:center; font-weight:normal; font-family:'Trebuchet MS', 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', Osaka; }
hr { display:none; }
img { border:0px }

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

/* 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) */

/* リンク ------------------------------------★ */
a { text-decoration:none; }
a:link  { color:#3388aa; }
a:visited  { color:#cccccc; }
a:hover { color:#b5e9f4; }
a:active {  }

/* 見出し ------------------------------------★ */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1 { margin:0pxpx; padding:0px; color:#ffffff; font-size:x-large; line-height:1.2; font-size:171.47%; }	/* 142.89%≒20pt */
h2 { margin:10px 0px 0px; padding:0px; color:#ffffff; font-size:small; line-height:1.2; }
h3 { margin:0px 5px 5px; padding:4px 25px 0px 10px; width:470px; height:25px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197127.gif) no-repeat; color:#ffffff; font-size:100%; position:relative; top:5px; }
h4 { margin:0px 5px 5px; padding:4px 25px 0px 10px; width:470px; height:25px; }
h5 { margin:0px; padding:0px; width:180px; height:25px; }
h6 {  }

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

/* フォーム ------------------------------------★ */
input { border:1px solid #586972; }
textarea { border:1px solid #586972; }
form {  }
select {  }
option {  }
.submit { border:none; color:#586972; background-color:#ffffff; }
.checkbox { border:0px; background-color:transparent; }

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

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

dl {  }
dt { margin:0px 0px 5px; }
dd { margin:0px 0px 10px; }

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

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

/* ヘッダー ------------------------------------★ */
#header { margin:20px 0px; padding:10px; width:160px; *width:180px; height:160px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197130.gif) no-repeat; text-align:left; }

h1 a:link, h1 a:visited { color:#ffffff; }
h1 a:hover { color:#3388aa; }

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

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

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

/* メイン ------------------------------------------------------------------------ */
#main { width:480px; float:right; position:relative; top:-160px; }

/* エントリー ------------------------------------★ */
.entry { margin:0px 0px 70px; width:480px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197120.gif) repeat-y; }
.entry-header { width:480px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197126.gif) no-repeat; }
.entry-body { }
.entry-footer { padding:0px 0px 10px; width:480px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197124.gif) no-repeat bottom center; }

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

/* 日付 */
.date { margin:0px 0px -80px; color:#b5e9f4; text-align:right; position:relative; top:-65px; font-weight:bold; font-size:171.47%; }	/* 171.47%≒24pt */

/* 本文 */
.note { margin:0px 15px 70px; position:relative; top:50px; *top:60px; }
.note ul { margin:0px 0px 0px 20px; }
.note li { margin:0px 0px 5px; }

/* エントリー情報 */
.info { margin:0px 15px; padding-top:10px; text-align:right; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197119.gif) repeat-x; }
.info ul { margin:0px; list-style:none; }
.info li { padding:0px 5px; display:inline; border-right:2px solid #586972; }
.info .name { border-left:2px solid #586972; }
.info .time {  }
.category, .count-com, .count-tb {  }

/* プロフィール */
.profile-body .note{ margin:0px 15px 40px; top:20px; }

/* コメント ------------------------------------★ */
.comment-area { margin:0px; }
.comment-area span { display:none; }
.comment-area h4 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080411_2202521.gif) no-repeat; }
.comment-header {  }
.comment-body {  }
.comment-header {  }

/*  コメントフォーム  */
.comment-form { margin:0px 0px 20px; }
.comment-form form { margin:0px 10px; }
.comment-form input { margin:5px 0px; }
.comment-form h4 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080411_2202522.gif) no-repeat; }

/* トラックバック ------------------------------------★ */
.trackback-area {  }
.tb-header {  }
.tb-body {  }
.tb-header {  }

/* サイド ------------------------------------------------------------------------ */
#side { width:180px; }
#side h5 span { display:none; }
#side ul { margin:0px; list-style:none; }

/*  RECENT ENTRIES  */
#recent { margin:0px 0px 20px; }
#recent h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197135.gif) no-repeat; }
#recent ul { margin:5px 10px 10px; list-style:none; }

/*  ARCHIVES  */
#archive { margin:0px 0px 20px; }
#archive h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197128.gif) no-repeat;  }
#archive ul { margin:5px 10px 10px; list-style:none; }

/*  CATEGORY  */
#category { margin:0px 0px 20px; }
#category h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197129.gif) no-repeat;  }
#category ul { margin:5px 10px 10px; list-style:none; }

/*  RECENT COMMENTS  */
#recent-comment { margin:0px 0px 20px; }
#recent-comment h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080414_2205588.gif) no-repeat; }
#recent-comment ul { margin:5px 10px 10px; list-style:none; }

/*  RECENT TRACKBACKS  */
#recent-trackback { margin:0px 0px 20px; }
#recent-trackback h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080414_2205590.gif) no-repeat; }
#recent-trackback ul { margin:5px 10px 10px; list-style:none; }

/*  RECOMMEND  */
#recommend { margin:0px 0px 20px; text-align:center; }
#recommend h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197136.gif) no-repeat; }
#recommend ul { margin:10px 10px 15px; list-style:none; }
#recommend li { margin:0px; padding:0px; height:auto; line-height:1; }

#recommend .creator { margin-bottom:5px; }
#recommend .productname {  }
#recommend .comment{ padding-bottom:5px; text-align:left; border-bottom:1px dotted #cccccc; }

/*  LINKS  */
#link { margin:0px 0px 20px; }
#link h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197131.gif) no-repeat; }
#link ul { margin:5px 10px 10px; list-style:none; }

/*  PROFILE  */
#profile { margin:0px 0px 20px; }
#profile h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197134.gif) no-repeat; }
#profile ul { margin:5px 10px 10px; list-style:none; }

/*  FREE SPEACH  */
.free { margin:0px 0px 30px; }
.free h5 { padding:0px; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080411_2202526.gif) no-repeat 0px 0px; color:#b5e9f4; font-weight:normal; font-size:128.6%; line-height:0.8; }

/*  SEARCH  */
#search-area { margin:0px 0px 20px; }
#search-area h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197137.gif) no-repeat; }
#search-area form { margin:5px 10px 20px; }
#search-area p {  }
#search-area input { width:100px; }
#search-area .submit { width:50px; }

/*  MOBILE  */
#mobile { margin:0px 0px 20px; }
#mobile h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197132.gif) no-repeat; }
#qrcode { margin:5px 10px 20px; text-align:center; }

/*  OTHERS  */
#others { margin:0px 0px 20px; }
#others h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197133.gif) no-repeat; }
#others ul { margin:5px 10px 10px; list-style:none; }

/*  SPONSOR  */
#sponsor { margin:0px 0px 20px; text-align:center; }
#sponsor h5 { background:url(http://img-cdn.jg.jugem.jp/c8f/678807/20080404_2197138.gif) no-repeat; }
#ad { padding:10px 0px; text-align:center; }

/* ------------ フッター ------------ */
#footer { margin:50px 0px 0px; padding:10px; clear:both; background:url(http://img-cdn.jg.jugem.jp/c8f/678807/footer.gif) bottom center; text-align:center; }
#template {  }

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