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

ホーム

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

テンプレート名 : mnmn-ピンク

HTML・CSSをコピーして使う

HTML

<?xml version="1.0" encoding="{site_encoding}" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>{site_title}</title>
<link rel="start" href="/" title="home" />
<link rel="appendix" href="/?pid=1" title="about" />
<link rel="stylesheet" href="{site_css}" type="text/css" />
<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="header">

<h1>{blog_name}</h1>
<p>{blog_description}</p>

<form method="get" action="#">
<fieldset>
<legend>ブログ内検索</legend>
<ul>
<li><label for="search">キーワード入力</label><input id="search" name="search" size="20" value="" tabindex="1" /></li>
<li class="searchSubmit"><input type="submit" value="検索" tabindex="2" /></li>
</ul>
</fieldset>
</form>
</div>
<hr />

<div id="content">
<h2>Contents</h2>

<div id="entries">


<p class="sequel">{prev_entry} | <a href="/">Main</a> | {next_entry}</p>

<div class="section entry">
<h3 class="categoryId_{entry_category_id}"><a href="{entry_permalink}" title="{entry_title}">{entry_title}</a></h3>
<dl class="meta">
<dt class="date">date</dt>
<dd class="date">{entry_date} {entry_time_only}</dd>
<dt class="category">category</dt>
<dd class="category">{category_name}</dd>
</dl>

<div class="description">
{entry_description}
</div>

<ul class="reaction">
<li class="comment">{comment_num}</li>
<li class="trackback">{trackback_num}</li>
</ul>
{trackback_auto_discovery}
</div>

<div class="section" id="comments">
<h3>Comment</h3>

<dl>
<dt>{comment_name}<span>{comment_time}</span></dt>
<dd>{comment_description}</dd>
</dl>

<form id="comment_area" name="comment_area" action="./?mode=comment" method="post">
<fieldset>
<legend>コメント入力フォーム</legend>
<input type="hidden" name="entry_id" value="{entry_id}" />
<input type="hidden" name="set_cookie" value="1" id="set_cookie" />
<dl>
<dt><label for="name">name</label></dt>
<dd><input type="text" tabindex="3" id="name" name="name" value="{cookie_name}" /></dd>
<dt><label for="email">email</label></dt>
<dd><input type="text" tabindex="4" id="email" name="email" value="{cookie_email}" /></dd>
<dt><label for="url">url</label></dt>
<dd><input type="text" tabindex="5" id="url" name="url" value="{cookie_url}" /></dd>
<dt><label for="description">comments</label></dt>
<dd><textarea tabindex="6" id="description" name="description" rows="7" cols="50" onfocus="if (this.value == 'コメントをどうぞ') this.value = '';" onblur="if (this.value == '') this.value = 'コメントをどうぞ';">コメントをどうぞ</textarea></dd>
</dl>
<ul>
<li><input tabindex="7" type="submit" value="コメント送信" onclick="javascript:setval();" /></li>
</ul>
</fieldset>
</form>
</div>

<div class="section" id="trackback">
<h3>Trackback</h3>

<dl>
<dt class="from">Trackback from</dt>
<dd class="from">{trackback_title}</dd>
<dt class="date">Trackback date</dt>
<dd class="date">{trackback_time}</dd>
<dt class="excerpt">excerpt</dt>
<dd class="excerpt">
<blockquote>
<p>{trackback_excerpt}</p>
</blockquote>
</dd>
</dl>

<p>trackback url : {trackback_url}</p>
</div>

<div class="section" id="authorProfile">
<h3>Profile</h3>
<dl>
<dt>{profile_name}</dt>
<dd>{profile_description}</dd>
</dl>
</div>

<p class="page"><a href="{prev_page_url}">&lt;&lt;前のページへ</a> | {page_now}/{page_num} | <a href="{next_page_url}">次のページへ&gt;&gt;</a></p>

</div>
<hr />

<div id="utilities">
<h2>Utilities</h2>

<div class="section" id="author"><h3>Author</h3>{user_list}</div>
<div class="section" id="calendar"><h3>Calendar</h3>{calendar}</div>
<div class="section" id="selectedEntry"><h3>Selected Entry</h3>{selected_entry_list}</div> 
<div class="section" id="category"><h3>Category</h3>{category_list}</div>
<div class="section" id="archives"><h3>Archives</h3>{archives_list}</div>
<div class="section" id="recentComment"><h3>Comment</h3>{recent_comment_list}</div>
<div class="section" id="recentTrackback"><h3>Trackback</h3>{recent_trackback_list}</div>
<div class="section" id="recommend"><h3>Recommend</h3>{amazon_item}</div>
<div class="section" id="link"><h3>Link</h3>{link_list}</div>
<div class="section" id="mobile"><h3>Mobile</h3>{site_qrcode}</div>
<div class="section" id="sponsoredLinks"><h3>Sponsored Links</h3>{ad}<p class="banner">{powered}</p></div>
</div>
</div>
<hr />

<div id="option">
<h2>Option</h2>

<div class="section" id="freespace1"><h3>{freespace_title1}</h3><div class="content">{freespace_contents1}</div></div>
<div class="section" id="freespace2"><h3>{freespace_title2}</h3><div class="content">{freespace_contents2}</div></div>
<div class="section" id="freespace3"><h3>{freespace_title3}</h3><div class="content">{freespace_contents3}</div></div>
<div class="section" id="freespace4"><h3>{freespace_title4}</h3><div class="content">{freespace_contents4}</div></div>
<div class="section" id="freespace5"><h3>{freespace_title5}</h3><div class="content">{freespace_contents5}</div></div>
</div>
<hr />

<div id="footer">
<h2>Signature</h2>

<address>{copyright}</address>

</div>
</body>
</html>

CSS

/*
===== CONTENTS ===========================================

1: universal reset 
	2: body and base setting
		: general params
		: acronyms and abbreviations styles
	3: link setting

==========================================================
*/

/*
===== 1: universal reset =================================
*/

*{
	margin: 0;
	padding: 0;
}

/*
===== 2: body and base setting ===========================
*/

body {
	font: normal 1.5 verdana, arial, sans-serif;
	background: #fafafa;
	color: #666;
	font-size: 90%;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	margin: 0;
	padding: 0;
	line-height: 1.5;
	text-align: left;
	display: block;
}

table {
	margin : 0;
	empty-cells: show;
}

ul {
	list-style: none;
}

li li{
	font-size: inherit;
}

img, object, param {
	border: 0;
	vertical-align: bottom;
}

hr { display: none; }

/* acronyms and abbreviations styles 
-------------------------------------*/
acronym,abbr { }

/*
===== 3: link setting ===========================
*/
a:link {
	color: #E52D83;
	text-decoration:underline;
	padding: 1px 3px;
}

a:visited {
	color: #D3327E;
	padding: 1px 3px;
}

a:hover {
	color: #fff;
	background: #E52D83;
	text-decoration: none;
}

a:active {
	color: #fff;
	background: #E52D83;
	text-decoration: none;
}

/* ------------------------------------------------------------------

layout.css

------------------------------------------------------------------ */
div#entries {
	width: 100%;
	float: right;
	margin-left: -270px;
}

div#utilities {
	width: 270px;
	float: right;
}

div#footer {
	clear: both;
}

/* ------------------------------------------------------------------

main.css

------------------------------------------------------------------ */

body {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27176.gif);
}

/* =============================================
		Header
============================================= */

div#header {
	background: #222;
	border-top: 3px solid #FF3399;
	padding: 30px 20px;
	height: 30px;
}

div#header h1 {
	font-size: 200%;
	color: #fff;
	width: auto;
	float: left;
	border-right: 1px solid #bbb;
	margin-right: 0.5em;
	padding-right: 0.5em;
	line-height: 1;
}

div#header h1 a:link,
div#header h1 a:visited,
div#header h1 a:hover,
div#header h1 a:active {
	padding: 0;
	color: #fff;
	background: none;
	text-decoration: none;
}

div#header p {
	color: #fff;
	font-size: 90%;
	width: 300px;
	float: left;
}

/* ---------------------------
		blogSearch
--------------------------- */
div#header form {
	float: right;
	width: auto;
}

div#header form fieldset {
	border: none;
	text-align: right;
}

div#header form legend,
div#header form label,
div#header form li.searchSubmit {
	display: none;
}

* html div#header form ul {
	width: 1em;
}

div#header form ul li {
	padding-left: 25px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27185.gif) no-repeat left 2px;
}

div#header form input {
	border: none;
	padding: 2px;
	width: 130px;
}

/* ===============================================
		Content
=============================================== */
div#content {
	padding-top: 20px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27177.png) repeat-x top;
}
* html div#content {
	background: none;
}

div#content:after,
div#entries:after,
div#utilities:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}
* html div#content,
div#entries:after,
* html div#utilities { display: inline-block; }

div#content h2 {
	display: none;
}

div#content h3 {
	color: #E63789;
	font-weight: bold;
}

/* ===============================================
		Entries
=============================================== */

/* ---------------------------
	entry
--------------------------- */
div#entries p.sequel,
div#entries p.page {
	text-align: center;
	margin: 0 20px 1em 290px;
}

div#entries div.entry {
	margin: 0 20px 3em 290px;
	padding: 10px 15px;
	
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27178.png);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	
	position: relative;
}
* html div#entries div.entry {
	background-image: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27175.gif);
}

div#entries div.entry h3 {
	font-size: 130%;
	padding-top: 1px;
	font-weight: bold;
}
/* ____change by cateogryID____
[example]
div#entries h3.categoryId_1 {
	padding-right: 20px;
	background: url(../images/icon_cat_01.gif) center right;
}
*/

div#entries div.entry h3 a:link,
div#entries div.entry h3 a:visited,
div#entries div.entry h3 a:hover,
div#entries div.entry h3 a:active {
	background: none;
	padding: 0;
	color: #E63789;
	text-decoration: none;
	display: block;
}

/* ---------------------------
		Meta 
--------------------------- */
div#entries div.entry dl.meta {
	color: #E589B4;
	margin-top: -6px;
	font-size: 77%;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 5px;
}

div#entries div.entry dl.meta dt {
	display: none;
}

div#entries div.entry dl.meta dd {
	width: auto;
	display: inline;
}

div#entries div.entry dl.meta dd a:link,
div#entries div.entry dl.meta dd a:visited,
div#entries div.entry dl.meta dd a:hover,
div#entries div.entry dl.meta dd a:active {
	color: inherit;
	margin-left: 0.5em;
	padding: 0;
}

/* ============ user writing area ============ */
div#entries div.entry div.description {
	padding-top: 1em;
	padding-right: 0.5em;
}

/* --- Box elements --- */
div#entries div.entry div.description p {
	margin-bottom: 1em;
}

div#entries div.entry div.description blockquote {
	border-left: 3px solid #E52D83;
	margin-right: 2em;
	margin-bottom: 1em;
	padding: 0 0.8em;
	color: #E52D83;
}

/* --- List elements --- */
div#entries div.entry div.description ul,
div#entries div.entry div.description ol {
	margin: 0 0.8em 1em;
}

div#entries div.entry div.description ul {
	margin-left: 0.5em;
}

div#entries div.entry div.description ul li {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27180.gif) no-repeat left 0.6em;
	padding-left: 9px;
}

div#entries div.entry div.description ol {
	margin-left: 2em;
}

div#entries div.entry div.description ol li {
	background: none;
	padding-left: 0;
}

div#entries div.entry div.description dl {
	margin-bottom: 1em;
	margin-left: 1em;
}

div#entries div.entry div.description dt {
	font-weight: bold;
	margin-right: 3em;
}

div#entries div.entry div.description dd {
	margin-bottom: 1em;
	margin-right: 1em;
}

/* --- Inline elements --- */
div#entries div.entry div.description img.pict {
	margin-bottom: 1em;
	border: 8px solid #222;
}

div#entries div.entry div.description strong {
	color: #E52D83;
}

div#entries div.entry div.description em {
	background: #E589B4;
	color: #4C2336;
	font-style: normal;
	padding: 1px 3px;
}

div#entries div.entry div.description pre {
	background: #BBDDB1;
	color: #325427;
	margin-bottom: 1em;
	padding: 0.8em 0.2em;
	border: 3px solid #84BF72;
	overflow: auto;
	
}
/* ============ /user writing area ============ */

/* ---------------------------
		Reaction
--------------------------- */
div#entries div.entry ul.reaction {
	margin: 2.5em 0 0.5em;
}
div#entries div.entry ul.reaction:after {
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}
* html div#entries div.entry ul.reaction {
	display: inline-block;
}

div#entries div.entry ul.reaction li {
	width: auto;
	float: left;
	margin-right: 1em;
}

div#entries div.entry ul.reaction li.comment {
	padding-left: 16px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_26877.gif) no-repeat left;
}

div#entries div.entry ul.reaction li.trackback {
	padding-left: 16px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_26878.gif) no-repeat left;
}

/* ---------------------------
		Comment
--------------------------- */
div#entries div#comments,
div#entries div#trackback {
	margin: 0 20px 3em 290px;
	padding: 10px 15px 2em;
	
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27178.png);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
* html div#entries div#comments,
* html div#entries div#trackback {
	background-image: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27175.gif);
}

div#entries div#comments h3,
div#entries div#trackback h3 {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27182.gif) no-repeat left center;
	margin-bottom: 2em;
	padding-left: 17px;
	border-bottom: 1px solid #e1e1e1;
	font-size: 100%;
}

div#entries div#comments dl dt {
	width: 150px;
	float: left;
}

div#entries div#comments dl dt span {
	font-size: 80%;
	display: block;
	margin: -2px 0 0 3px;
}

div#entries div#comments dl dd {
	margin-bottom: 1em;
	padding: 1px 2em 2em 150px;
	border-bottom: 1px solid #e1e1e1;
}

/* ---------------------------
		Form
--------------------------- */
div#entries div#comments form {
	padding-top: 1em;
}

div#entries div#comments form fieldset {
	border: none;
}

div#entries div#comments form legend {
	display: none;
}

div#entries div#comments form dl dd {
	border: none;
	margin: 0 0 12px;
	padding: 0;
}

div#entries div#comments form input,
div#entries div#comments form textarea {
	border: 1px solid #aaa;
	background: #fff;
	padding: 3px;
}

div#entries div#comments form input:hover,
div#entries div#comments form textarea:hover,
div#entries div#comments form input:focus,
div#entries div#comments form textarea:focus {
	border: 1px solid #888;
}

div#entries div#comments form input:focus,
div#entries div#comments form textarea:focus {
	background: #FFF1F8;
}

div#entries div#comments form textarea {
	width: 400px;
	overflow: auto;
}

div#entries div#comments form ul {
	margin-left: 150px;
}
div#entries div#comments form ul input {
	background: #E5B7CD;
	padding: 6px 2em;	
	border: none;
}
div#entries div#comments form ul li input:hover,
div#entries div#comments form ul li input:focus {
	background: #E589B4;
	border: none;
}

/* ---------------------------
		Trackback
--------------------------- */
div#entries div#trackback {}

div#entries div#trackback dl {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #e1e1e1;
}

div#entries div#trackback dl dt {
	display: none;
}

div#entries div#trackback dl dd {
	padding-left: 9px;
}

div#entries div#trackback dl dd.from {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27179.gif) no-repeat left 0.6em;
	padding-left: 7px;
}

div#entries div#trackback dl dd.date {
	font-size: 80%;
}

div#entries div#trackback dl dd.excerpt {
	margin-top: 0.5em;
}

div#entries div#trackback p {}

/* ===============================
	Profile
=============================== */

div#authorProfile {
	margin: 0 20px 3em 290px;
	padding: 10px 15px 2em;
	
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27178.png);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
* html div#authorProfile {
	background-image: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27175.gif);
}

div#authorProfile h3 {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27182.gif) no-repeat left center;
	padding-left: 17px;
	font-size: 100%;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 2em;
}

div#authorProfile dl {
	margin-right: 2em;
}

div#authorProfile dl dt {
	margin-top: 1em;
	border-bottom: 1px dotted #e1e1e1;
	font-weight: bold;
}

div#authorProfile dl dd {
	margin-top: 1em;
}

/* ------------------------------------------------------------------

utilities.css

------------------------------------------------------------------ */

/* =============================================
		Utilities
============================================= */
div#utilities {
}

div#utilities div.section,
div#option div.section {
	margin-left: 20px;
	margin-bottom: 1.5em;
	padding: 8px 8px 1.5em;
	
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27178.png);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
* html div#utilities div.section,
* html div#option div.section {
	background-image: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27175.gif);
}

div#utilities div.section h3,
div#option div.section h3 {
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27182.gif) no-repeat left center;
	padding-left: 17px;
	font-size: 100%;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 0.5em;
}
* html div#utilities div.section h3,
* html div#option div.section h3 {
	font-size: 95%;
}

div#utilities div.section ul li,
div#option div.section ul li {
	margin-left: 7px;
	padding-left: 7px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27179.gif) no-repeat left 0.6em;
}

/* リスト以外のもの */
div#utilities div.section table,
div#utilities div.section div.amazon,
div#utilities div.section div#ad,
div#utilities div#mobile {
	margin-left: 15px;
}

/* --- カレンダー --- */
div#utilities div#calendar {
	text-align: center;
}
div#utilities div.section table {
	margin: 0 auto;
}
* html div#utilities div.section table {
	font-size: 95%;
}
div#utilities div.section table td {
	padding: 0 3px;
}
* html div#utilities div.section table td {
	padding: 0 1px;
}

/* --- バナー --- */
div#utilities  div#sponsoredLinks p.banner {
	margin-top: 3px;
	margin-left: 8px;
}

/* =============================================
		Option
============================================= */

div#option {
	display: none;
}

div#option h2 {
	display: none;
}

/* ===============================================
		footer
=============================================== */
div#footer {
	clear: both;
	margin-top: 5em;
	padding: 0.5em 20px;
	background: #411E2E;
	height: 1.7em;
	color: #eee;
	font-size: 90%;
}

div#footer h2,
div#footer h3 {
	display: none;
}

div#footer address {
	font-style: normal;
	width: auto;
	float: left;
}

div#footer div#feed ul {
	padding-left: 2em;
}

div#footer div#feed ul li {
	margin-left: 17px;
	padding-left: 13px;
	background: url(http://img-cdn.jg.jugem.jp/fca/525308/20070611_27183.gif) no-repeat left center;
	width: auto;
	float: left;	
}

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