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

ホーム

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

テンプレート名 : ハートの準備

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-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="http://design.cyphr.org/css/reset.css" charset="UTF-8" media="screen" type="text/css" />
<link rel="stylesheet" href="http://design.cyphr.org/css/basic.css" charset="UTF-8" media="screen" type="text/css" />
<link rel="stylesheet" href="{site_css}" charset="{site_encoding}" media="screen" title="default" type="text/css" />
<link rel="alternate" type="application/rss+xml" href="{site_rss}" title="RSS" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" title="ATOM" />
<link rel="alternate" type="application/xhtml+xml" href="{mobile_url}" media="handheld" />
<link rel="start" href="index.html" charset="{site_encoding}" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://design.cyphr.org/js/jquery.browser.custom.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://design.cyphr.org/js/jquery.lazyload.mini.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://design.cyphr.org/templete/lunapocket/js/index.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://design.cyphr.org/templete/lunapocket/js/cookie.js" charset="UTF-8"></script>
<title>{site_title}</title>
</head>
<body onload="javascript:initval();">
<div id="contents">
<div id="contentsHeader">

<h1 id="headerHeading">
{blog_name}
</h1>
<p id="subtitle">{blog_description}</p>

<h2 id="siteNavigation">サイトナビゲーション</h2>
<ul id="siteNavigationList">
<li>
<a href="#entriesAnchor">記事</a>
</li>
<li>
<a href="#calendarAnchor">カレンダー</a>
</li>
<li>
<a href="#recentEntriesAnchor">最新の記事</a>
</li>
<li>
<a href="#categoriesAnchor">カテゴリー</a>
</li>
<li>
<a href="#archivesAnchor">アーカイブス</a>
</li>
<li>
<a href="#profileAnchor">プロフィール</a>
</li>
<li>
<a href="#linksAnchor">リンク</a>
</li>
<li>
<a href="#categoriesAnchor">カテゴリー</a>
</li>
<li>
<a href="#selectedEntriesAnchor">表示している記事</a>
</li>
<li>
<a href="#mobileAnchor">モバイル</a>
</li>
<li>
<a href="#othersAnchor">アザーズ</a>
</li>
<li>
<a href="#searchAnchor">検索</a>
</li>
<li>
<a href="#recentCommentsAnchor">最新のコメント</a>
</li>
<li>
<a href="#recentTrackbacksAnchor">最新のトラックバック</a>
</li>
<li>
<a href="#amazonAnchor">アマゾン</a>
</li>
<li>
<a href="#freespace1Anchor">フリースペース1</a>
</li>
<li>
<a href="#freespace2Anchor">フリースペース2</a>
</li>
<li>
<a href="#freespace3Anchor">フリースペース3</a>
</li>
<li>
<a href="#freespace4Anchor">フリースペース4</a>
</li>
<li>
<a href="#freespace5Anchor">フリースペース5</a>
</li>
</ul>
</div>
<div id="contentsBody">
<div id="mainContents">
<h2 id="entriesHeading">
<a id="entriesAnchor" name="entriesAnchor">記事</a>
</h2>

<div class="entryBlock">
<div class="entryTitle">
<div class="entryTitleTitle">
{entry_title_link}
</div>
<div class="entryAuthorDate">
Posted by {user_name} on {entry_date}
</div>
</div>
<div class="entryBodyDescription">
{entry_description}
</div>
<div class="entrySequelDescription">
{entry_sequel}
</div>
<div class="entryFooter">
{category_name}&nbsp;|&nbsp;{comment_num}&nbsp;|&nbsp;{trackback_num}
</div>

<div class="entryNavigation">
{prev_entry}&nbsp;|&nbsp;<a href="/">TOP</a>&nbsp;|&nbsp;{next_entry}
</div>

</div>
{trackback_auto_discovery}


<h2 id="commentsHeading">
<a id="comments" name="comments">Comment</a>
</h2>

<div class="commentBlock">
<div class="commentBodyDescription">
<a id="commentAnchor{comment_id}" name="commentAnchor{comment_id}">
<img src="http://img-cdn.jg.jugem.jp/555/1876692/20101221_731041.jpg" alt="commentAnchor{comment_id}" width="1" height="1" />
</a>
<br />
{comment_description}
</div>
<div class="commentFooter">
{comment_name}&nbsp;|&nbsp;{comment_year}/{comment_month}/{comment_day}
</div>
</div>

<form action="/?mode=comment" method="post">
<div id="commentForm">
<div id="commentFormNameTitle">
<label for="name">Name(N)</label>
</div>
<div id="commentFormNameDescription">
<input type="text" name="name" value="{cookie_name}" accesskey="N" tabindex="1" />
</div>
<div id="commentFormEmailTitle">
<label for="email">Email(E)</label>
</div>
<div id="commentFormEmailDescription">
<input type="text" name="email" value="{cookie_email}" accesskey="E" tabindex="2" />
</div>
<div id="commentFormUrlTitle">
<label for="email">Url(U)</label>
</div>
<div id="commentFormUrlDescription">
<input type="text" name="url" value="{cookie_url}" accesskey="U" tabindex="3" />
</div>
<div id="commentFormDescriptionTitle">
<label for="description">Comment(C)</label>
</div>
<div id="commentFormDescriptionDescription">
<textarea name="description" accesskey="C" tabindex="4">コメントを入力してください</textarea>
</div>
<div id="commentFormCookieTitle">
<label for="set_cookie">Cookie</label>
</div>
<div id="commentFormCookieDescription">
<input type="checkbox" name="set_cookie" value="1" accesskey="K" tabindex="5" checked="checked" />
</div>
<div id="commentFormSubmitlDescription">
<input type="submit" value="送信(S)" accesskey="S" tabindex="6" />
<input type="reset" value="リセット(R)" accesskey="R" tabindex="7" />
<input type="hidden" name="entry_id" value="{entry_id}" />
</div>
</div>
</form>


<h2 id="trackbacksHeading">
<a id="trackback" name="trackback">Trackback</a>
</h2>
<div id="trackbackForm">
<div id="trackbackFormUrlTitle">
<label for="trackback_url">Trackback URL(T)</label>
</div>
<div id="trackbackFormUrlDescription">
<input type="text" name="trackback_url" value="{trackback_url}" accesskey="T" tabindex="8" readonly="readonly" />
</div>
</div>

<div class="trackbackBlock">
<div class="trackbackBodyDescription">{trackback_excerpt}</div>
<div class="trackbackFooter">{trackback_title}&nbsp;|&nbsp;{trackback_blog_name}&nbsp;|&nbsp;{trackback_year}/{trackback_month}/{trackback_day}</div>
</div>



<div id="pageNavigation">{prev_page_link}&nbsp;{page_now}/{page_num}&nbsp;{next_page_link}</div>


<div id="profileBody">
<div id="profileTitle">{profile_name}</div>
<div id="profileBodyDescription">{profile_description}</div>
</div>

</div>
<div id="rightSidebar1">

<div id="calendarBlock">
<a id="calendarAnchor" name="calendarAnchor">
<em id="calendarAnchorText" class="sidebarTitle">カレンダー</em>
</a>
<div id="calendarDescription">{calendar}</div>
</div>


<div id="recentEntriesBlock">
<a id="recentEntriesAnchor" name="recentEntriesAnchor">
<em id="recentEntriesAnchorText" class="sidebarTitle">最新の記事</em>
</a>
<div id="recentEntriesDescription" class="sidebarDescription">{latest_entry_list}</div>
</div>


<div id="categoriesBlock">
<a id="categoriesAnchor" name="categoriesAnchor">
<em id="categoriesAnchorText" class="sidebarTitle">カテゴリー</em>
</a>
<div id="categoriesDescription" class="sidebarDescription">{category_list}</div>
</div>


<div id="archivesBlock">
<a id="archivesAnchor" name="archivesAnchor">
<em id="archivesAnchorText" class="sidebarTitle">アーカイブス</em>
</a>
<div id="archivesDescription" class="sidebarDescription">{archives_list}</div>
</div>


<div id="profileBlock">
<a id="profileAnchor" name="profileAnchor">
<em id="profileAnchorText" class="sidebarTitle">プロフィール</em>
</a>
<div id="profileDescription" class="sidebarDescription">{user_list}</div>
</div>


<div id="linksBlock">
<a id="linksAnchor" name="linksAnchor">
<em id="linksAnchorText" class="sidebarTitle">リンク</em>
</a>
<div id="linksDescription" class="sidebarDescription">{link_list}</div>
</div>


<div id="selectedEntriesBlock">
<a id="selectedEntriesAnchor" name="selectedEntriesAnchor">
<em id="selectedEntriesAnchorText" class="sidebarTitle">表示している記事</em>
</a>
<div id="selectedEntriesDescription" class="sidebarDescription">{selected_entry_list}</div>
</div>

<div id="mobileBlock">
<a id="mobileAnchor" name="mobileAnchor">
<em id="mobileAnchorText" class="sidebarTitle">モバイル</em>
</a>
<div id="mobileDescription" class="sidebarDescription">{site_qrcode}</div>
</div>
<div id="othersBlock">
<a id="othersAnchor" name="othersAnchor">
<em id="othersAnchorText" class="sidebarTitle">アザーズ</em>
</a>
<div id="othersDescription" class="sidebarDescription">
<ul id="othersList">
<li class="othersArticle">
<a href="./manage/">管理者ページ</a>
</li>
<li class="otherArticle">
<a href="{site_rss}">RSS</a>
</li>
<li class="otherArticle">
<a href="{site_atom}">ATOM</a>
</li>
</ul>
</div>
</div>
</div>
<div id="rightSidebar2">
<div id="searchBlock">
<a id="searchAnchor" name="searchAnchor">
<em id="searchAnchorText" class="sidebarTitle">検索</em>
</a>
<div id="searchDescription" class="sidebarDescription">
<form action="/" method="get">
<p id="searchForm">
<input type="text" name="search" value="検索ワード" id="search" />
<br />
<input type="submit" value="Search" />
</p>
</form>
</div>
</div>

<div id="recentCommentsBlock">
<a id="recentCommentsAnchor" name="recentCommentsAnchor">
<em id="recentCommentsAnchorText" class="sidebarTitle">最新のコメント</em>
</a>
<div id="recentCommentsDescription" class="sidebarDescription">
<ul id="recentCommentsList">

<li class="recentCommentsArticle">
{recent_comment_item_title}
<br />
<a href="/?eid={recent_comment_item_entry_id}#commentAnchor{recent_comment_item_comment_id}">by&nbsp;{recent_comment_item_name}&nbsp;on&nbsp;{recent_comment_item_year}.{recent_comment_item_month}.{recent_comment_item_day}</a>
</li>

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


<div id="recentTrackbacksBlock">
<a id="recentTrackbacksAnchor" name="recentTrackbacksAnchor">
<em id="recentTrackbacksAnchorText" class="sidebarTitle">最新のトラックバック</em>
</a>
<div id="recentTrackbacksDescription" class="sidebarDescription">{recent_trackback_list}</div>
</div>


<div class="amazonBlock">
<a class="amazonAnchor" href="{amazon_url}">
<em class="amazonAnchorText sidebarTitle">アマゾン</em>
</a>
<div class="amazonBodyDescription sidebarDescription">{amazon_item}</div>
</div>


<div id="freespace1">
<a id="freespace1Anchor" name="freespace1Anchor">
<em id="freespace1AnchorText" class="sidebarTitle">フリースペース1</em>
</a>
<div id="freespace1Title">{freespace_title1}</div>
<div id="freespace1Description" class="sidebarDescription">{freespace_contents1}</div>
</div>


<div id="freespace2">
<a id="freespace2Anchor" name="freespace2Anchor">
<em id="freespace2AnchorText" class="sidebarTitle">フリースペース2</em>
</a>
<div id="freespace2Title">{freespace_title2}</div>
<div id="freespace2Description" class="sidebarDescription">{freespace_contents2}</div>
</div>


<div id="freespace3">
<a id="freespace3Anchor" name="freespace3Anchor">
<em id="freespace3AnchorText" class="sidebarTitle">フリースペース3</em>
</a>
<div id="freespace3Title">{freespace_title3}</div>
<div id="freespace3Description" class="sidebarDescription">{freespace_contents3}</div>
</div>


<div id="freespace4">
<a id="freespace4Anchor" name="freespace4Anchor">
<em id="freespace4AnchorText" class="sidebarTitle">フリースペース4</em>
</a>
<div id="freespace4Title">{freespace_title4}</div>
<div id="freespace4Description" class="sidebarDescription">{freespace_contents4}</div>
</div>


<div id="freespace5">
<a id="freespace5Anchor" name="freespace5Anchor">
<em id="freespace5AnchorText" class="sidebarTitle">フリースペース5</em>
</a>
<div id="freespace5Title">{freespace_title5}</div>
<div id="freespace5Description" class="sidebarDescription">{freespace_contents5}</div>
</div>

<div id="advertiseBlock">
<div id="advertiseDescription">{ad}</div>
</div>
</div>
</div>
<div id="contentsFooter">
<div id="copyrightDescription">
<a href="http://cyphr.jugem.jp/">This template is made by CYPHR.</a>
{copyright}
</div>
</div>
</div>
</body>
</html>

CSS

@charset "EUC-JP";

*
{
	font-family: 'メイリオ', 'Verdana', 'Helvetica', 'Arial', 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'Helvetica', 'Arial', 'Gothic', sans-serif;
}

body
{
	background-color: #16160e;
	color:            #3f312b;
}
div#contentsBody
{
	overflow: hidden;
	zoom:     1;
}
div#contents
{
	margin:            0 auto;
	width:             1000px;
}
div#contentsHeader
{
	background-image:  url("http://img-cdn.jg.jugem.jp/555/1876692/20101222_731780.jpg");
	background-repeat: no-repeat;
	height:            250px;
}
h1#headerHeading
{
	font-size: 175%;
	text-align: right;
	padding: 30px 30px 0px 0px;
}
h1#headerHeading a
{
	color:           #cc0066;
	text-decoration: none;
}
p#subtitle
{
	font-size: 91.7%;
	text-align: right;
	padding: 10px 30px 0px 0px;
}
h2#siteNavigation,
ul#siteNavigationList,
em#headerLinkText,
em.sidebarTitle,
a#entriesAnchor,
em.entryBlogmuraLinkText
{
	display: none;
}
div#contentsBody
{
	background-image:  url("http://img-cdn.jg.jugem.jp/555/1876692/20101210_722120.jpg");
	background-repeat: repeat-y;
}
ul,
p,
h1,
h2
{
	margin: 0px;
}
div#mainContents
{
	float:   left;
	display: inline;
	padding: 20px 20px 10px 20px;
	width:   560px;
}
div#mainContents a,
div#copyrightDescription a
{
	color:           #e95295;
	text-decoration: none;
}
h1#headerHeading a:hover,
div#mainContents a:hover,
div#copyrightDescription a:hover
{
	color: #ea5506;
}
div.entryTitle
{
	background-image:  url("http://img-cdn.jg.jugem.jp/555/1876692/20101215_726275.jpg");
	background-repeat: no-repeat;
	height:            50px;
	padding:           0px 0px 30px 0px;
}
div.entryTitleTitle
{
	font-size:   133.4%;
	font-weight: bold;
}
div.entryAuthorDate
{
	font-size: 91.7%;
}
div.entryTitleTitle,
div.entryAuthorDate
{
	height:      25px;
	line-height: 25px;
	padding: 0px 0px 0px 60px;
}
div.entryBodyDescription,
div.entrySequelDescription
{
	font-size:   100%;
	line-height: 200%;
	padding:     0px 10px 0px 60px;
}
div.entryFooter
{
	font-size:  83.4%;
	text-align: right;
	padding:    30px 10px 50px 0px;
}
div.entryNavigation
{
	font-size:  83.4%;
	text-align: center;
	padding:    30px 0px;
}
h2#commentsHeading,
h2#trackbacksHeading,
div#profileTitle
{
	background-image:  url("http://img-cdn.jg.jugem.jp/555/1876692/20101215_726276.jpg");
	background-repeat: no-repeat;
	height:            35px;
	padding:           0px 0px 0px 45px;
	width:             500px;
}
h2#commentsHeading a,
h2#trackbacksHeading a,
div#profileTitle
{
	font-size:   133.4%;
	height:      35px;
	line-height: 35px;
}
div.commentBodyDescription,
div.trackbackBodyDescription,
div#profileBodyDescription
{
	font-size:   100%;
	line-height: 200%;
	padding:     10px 10px 10px 60px;
}
div.commentFooter,
div.trackbackFooter
{
	font-size:  83.4%;
	text-align: right;
	padding:    0px 10px 30px 0px;
}
div#commentForm
{
	font-size:   91.7%;
	line-height: 175%;
	padding:     0px 0px 40px 60px;
}
div#commentFormNameDescription input,
div#commentFormEmailDescription input,
div#commentFormUrlDescription input,
div#trackbackFormUrlDescription input
{
	border-color: #e198b4;
	border-style: solid;
	border-width: 1px;
	height:       20px;
	line-heght:   20px;
	width:        340px;
}
div#commentFormDescriptionDescription textarea
{
	border-color: #e198b4;
	border-style: solid;
	border-width: 1px;
	height:       100px;
	line-heght:   20px;
	width:        340px;
}
input#search
{
	border-color: #e198b4;
	border-style: solid;
	border-width: 1px;
	height:       20px;
	line-heght:   20px;
	width:        140px;
}
div#commentFormNameDescription input:focus,
div#commentFormEmailDescription input:focus,
div#commentFormUrlDescription input:focus,
div#trackbackFormUrlDescription input:focus,
div#commentFormDescriptionDescription textarea:focus,
input#search:focus
{
	background-color: #fdeff2;
	border-color:     #e95295;
	border-style:     solid;
	border-width:     1px;
}
div#trackbackForm
{
	font-size:   91.7%;
	line-height: 175%;
	padding:     0px 0px 30px 60px;
}
div#pageNavigation
{
	font-size:  83.4%;
	text-align: center;
}
div#rightSidebar1,
div#rightSidebar2
{
	color:   #dcd3b2;
	float:   left;
	display: inline;
	padding: 20px 10px 10px 10px;
	width:   180px;
}
div.sidebarDescription
{
	font-size:   91.7%;
	line-height: 183.4%;
	padding:     0px 0px 10px 20px;
}
div#calendarDescription
{
	font-size: 83.4%;
	padding:   5px 10px 10px 10px;
}
div#rightSidebar1 li,
div#rightSidebar2 li
{
	list-style-type: none;
	margin:          0px;
}
div#rightSidebar1 a,
div#rightSidebar2 a
{
	color:           #e198b4;
	text-decoration: none;
}
div#rightSidebar1 a:hover,
div#rightSidebar2 a:hover
{
	color: #f08300;
}
a#calendarAnchor,
a#profileAnchor,
a#recentEntriesAnchor,
a#recentCommentsAnchor,
a#recentTrackbacksAnchor,
a#linksAnchor,
a#categoriesAnchor,
a#archivesAnchor,
a#selectedEntriesAnchor,
a.amazonAnchor,
a#searchAnchor,
div#freespace1Title,
div#freespace2Title,
div#freespace3Title,
div#freespace4Title,
div#freespace5Title,
a#mobileAnchor,
a#othersAnchor

{
	background-image:  url("http://img-cdn.jg.jugem.jp/555/1876692/20101222_731771.jpg");
	background-repeat: no-repeat;
	cursor:            default;
	display:           block;
	height:            30px;
	width:             180px;
}
a#profileAnchor
{
	background-position: 0 -31px;
}
a#recentEntriesAnchor
{
	background-position: 0 -61px;
}
a#recentCommentsAnchor
{
	background-position: 0 -91px;
}
a#recentTrackbacksAnchor
{
	background-position: 0 -121px;
}
a#linksAnchor
{
	background-position: 0 -151px;
}
a#categoriesAnchor
{
	background-position: 0 -181px;
}
a#archivesAnchor
{
	background-position: 0 -211px;
}
a#selectedEntriesAnchor
{
	background-position: 0 -241px;
}
a.amazonAnchor
{
	background-position: 0 -301px;
}
a#searchAnchor
{
	background-position: 0 -331px;
}
div#freespace1Title,
div#freespace2Title,
div#freespace3Title,
div#freespace4Title,
div#freespace5Title
{
	background-position: 0 -421px;
}
a#mobileAnchor
{
	background-position: 0 -361px;
}
a#othersAnchor
{
	background-position: 0 -391px;
}
div#mobileDescription img
{
	height: 80px;
	width:  80px;
}
div#freespace1Title,
div#freespace2Title,
div#freespace3Title,
div#freespace4Title,
div#freespace5Title
{
	color:       #f8f4e6;
	font-size:   108.4%;
	font-weight: bold;
	line-height: 30px;
	padding:     0px 0px 0px 40px;
}
div#advertiseDescription
{
	padding: 20px 0px 0px 30px;
}
div#contentsFooter
{
	background-image:    url("http://img-cdn.jg.jugem.jp/555/1876692/20101210_722127.jpg");
	background-repeat:   no-repeat;
	background-position: 0 -251px;
	clear:               both;
	height:              100px;
}
div#copyrightDescription
{
	font-size: 83.4%;
	padding:   80px 0px 0px 100px;
}

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