無料ブログ作成なら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>

</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 class="section" id="searchForm">
<h3>Search</h3>
<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>
<div class="section" id="feed">
<h3>Feed</h3>
<ul>
<li><a href="{site_rss}">RSS1.0</a></li>
<li><a href="{site_atom}">Atom0.3</a></li>
</ul>
</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>

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

CSS

ColorScheme : 使用色は3色だけなので、色味を簡単に変えられます。
	
	色		明るい	暗い	薄い
	----------------------------------------------
	blue	#13A4E0	#1190C5	#EEFAFF (default)
	yellow	#FF9C00	#F1A732	#FFF7EA
	red		#E70000	#C30000	#FFDEDE
	red2	#7F0019	#660014	#F6EAED (MUJI-red)
	green	#2E6F0F	#295415	#D8F0CC
	black	#000000	#444444	#EEEEEE
	purple	#DD0B7D	#B20764	#FFCEE9

/*
===== 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.6 verdana, arial, sans-serif;
	background: #fefefe;
	color: #555;
	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.6;
	text-align: left;
	display: block;
}

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

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: #13A4E0;
	text-decoration:underline;
	padding: 1px 3px;
}

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

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

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

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

layout.css	2カラム右サイドバー

------------------------------------------------------------------ */
body {
	text-align: center;
}
div#container {
	margin: 0 auto;

width: 800px;
}

/* ------------------------------ */
div#header {
	margin: 30px 0 50px;
}

/* ------------------------------ */
div#content {
}

div#entries {
	width: 590px;
	float: left;
}

div#utilities {
	width: 177px;
	margin-left: 620px;
}

/* ------------------------------ */
div#option {
	display: none;
}

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

div#footer {
	clear: both;
}

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

main.css

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

body {
	border-top: 6px solid #13A4E0;
}

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

div#header h1 {
	font-size: 200%;
}

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

div#header p {
	font-size: 80%;
}

/* ===============================================
		Content
=============================================== */
div#content {

}

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

div#content h2 {
	display: none;
}

div#content h3 {
	color: #000;
	font-weight: bold;
	border-bottom: 1px solid #e1e1e1;
}

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

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

div#entries div.entry {
	margin-bottom: 4em;
}

div#entries div.entry h3 {
	font-size: 130%;
	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: #000;
	text-decoration: none;
	display: block;
}

div#entries div.entry h3 a:hover {
	color: #13A4E0;
}

/* ---------------------------
		Meta 
--------------------------- */
div#entries div.entry dl.meta {
	font-size: 77%;
}

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

div#entries div.entry dl.meta dd {
	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;
}
div#entries div.entry dl.meta dd a:hover {
	color: #fff;
}

/* ============ 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: 3px solid #13A4E0;
	margin-right: 2em;
	margin-bottom: 1em;
	padding: 0.8em 1.3em;
	color: #13A4E0;
	background: #EEFAFF;
}

/* --- 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: 1.1em;
}

div#entries div.entry div.description li {
	list-style-type: circle;
}

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;
}

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

div#entries div.entry div.description dd {
	margin: 0 1em 1em 1em;
}

/* --- Inline elements --- */
div#entries div.entry div.description img.pict {
	margin-bottom: 1em;
	padding: 5px;
	border: 1px solid #ddd;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	background: #fff;
}

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

div#entries div.entry div.description em {
	background: #13A4E0;
	color: #fff;
	font-style: normal;
	padding: 1px 3px;
}

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

/* ---------------------------
		Reaction
--------------------------- */
div#entries div.entry ul.reaction {
	margin-top: 2.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;
	list-style: none;
	margin-right: 10px;
}

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 {

}

div#entries div#comments h3,
div#entries div#trackback h3 {
	font-size: 100%;
	margin-bottom: 1em;
}

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;
	margin-bottom: 3em;
}

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: #fafafa;
}

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

div#entries div#comments form ul {
	margin-left: 150px;
	list-style: none;
}
div#entries div#comments form ul input {
	padding: 6px 2em;
	border: none;
	background: #ccc;
}
div#entries div#comments form ul li input:hover,
div#entries div#comments form ul li input:focus {
	border: none;
	background: #13A4E0;
	color: #fff;
}

/* ---------------------------
		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 {
}

div#entries div#trackback dl dd a {
	margin-left: -3px;
}

div#entries div#trackback dl dd.from {
	margin: 0;
}

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 {

}

div#authorProfile h3 {
	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-bottom: 2em;
}

div#utilities div.section h3,
div#option div.section h3 {
	font-size: 100%;
	margin-bottom: 0.5em;
}
* html div#utilities div.section h3,
* html div#option div.section h3 {
	font-size: 95%;
}

div#utilities div.section a:link,
div#utilities div.section a:visited,
div#utilities div.section a:hover,
div#utilities div.section a:active,
div#option div.section a:link,
div#option div.section a:visited,
div#option div.section a:hover,
div#option div.section a:active {
	padding: 1px 2px;
	margin-left: -2px;
}

div#utilities div.section ul,
div#option div.section ol {
	margin: 0 0em 1em 1.2em;
}

div#utilities div.section ul li,
div#option div.section ul li {
	list-style-type: circle;
}

/* リスト以外のもの */
div#utilities div.section table,
div#utilities div.section div.amazon,
div#utilities div.section div#ad,
div#utilities div#mobile {
}

/* --- カレンダー --- */
div#utilities div#calendar {
}
div#utilities div.section table {
	border: 1px solid #ddd;
}
* html div#utilities div.section table {
	font-size: 95%;
}

div#utilities div.section table td {
	padding: 1px 4px;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: #f7f7f7;
}
* html div#utilities div.section table td {
	padding: 2px 2px;
}

div#utilities div.section table a:link,
div#utilities div.section table a:visited,
div#utilities div.section table a:hover,
div#utilities div.section table a:active {
	margin: 0;
}

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

/* --- Feed ---*/
/*
div#utilities div#feed ul li {
	list-style: none;
	margin-left: -13px;
	padding-left: 15px;
	background: url(../images/ico_feed.gif) no-repeat left center;
}
*/

/* ---------------------------
		blogSearch
--------------------------- */
div#utilities form {
}

div#utilities form fieldset {
	border: none;
}

div#utilities form legend,
div#utilities form label {
	display: none;
}

div#utilities div#searchForm form ul {
	margin: 0;
}

div#utilities div#searchForm form ul li {
	list-style-type: none;
	width: auto;
	float: left;
	margin-right: 5px;
}

div#utilities form input {
	padding: 2px;
	border: 1px solid #999;	
	width: 100px;
}

div#utilities form li.searchSubmit input {
	border: none;
	width: 40px;
	background: #ccc;
}

div#utilities form li.searchSubmit input:hover {
	background: #13A4E0;
	color: #fff;
}

div#utilities form li input#search:hover,
div#utilities form li input#search:focus {
	border: 1px solid #888;
}

div#utilities form li input#search:focus,
div#utilities form li input#search:focus {
	background: #fafafa;
}

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

div#option {

}

div#option h2 {
	display: none;
}

div#option h3 {
	font-size: 100%;
	color: #000;
	border-bottom: 1px solid #e1e1e1;
}

/* ===============================================
		footer
=============================================== */
div#footer {
	margin-top: 5em;
	padding: 1em;
	font-size: 90%;

}

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

div#footer address {
	font-style: normal;
	text-align: center;
}

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

print.css

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

@media print {
	
	body {
		font-size: 12pt;
		font-family: serif;
		color: #000000;
		background-image :none;
		background-color: #FFFFFF;
		border: none;
	}

a:link,
	a:visited {
		text-decoration: underline;
		color: #000000;
	}
	
	a:link:after,
	a:visited:after {
		content: " (" attr(href) ") ";
		font-size: 80%;
	}

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

div#utilities,
	div#option,
	div#footer {
		display: none;
	}
	
	div#entries form,
	div#entries p.sequel,
	div#entries p.page,
	div#entries ul.reaction {
		display: none;
	}
	
	div#header {
		border-top: 1px dashed #000;
		border-bottom: 1px dashed #000;
		text-align: center;
		margin: 0;
		margin-bottom: 1em;
	}
	
	div#header h1 a:link,
	div#header h1 a:visited {
		font-size: 12pt;
		color: #000;
	}
	
	div#entries div.entry h3 {
		border: none;
		font-size: 20pt;
		border-bottom: 3px solid #000;
	}
	
	div#entries div.entry div.description {
		padding-top: 2em;
	}
	
	div#entries div.entry div.description blockquote {
		margin: 1em;
		padding: 0 0.5em;
		border: none;
		border-left: 3px solid #000;
		background: none;
		color: #000;
	}

div#container,
	div#content,
	div#entries {
		width: 100%;
	}
	
	div#entries div.entry div.description strong,
	div#entries div.entry div.description em {
		background: none;
		color: #000;
		font-weight: bold;
		border: none;
		border-bottom: 1px dotted #000;
	}
	
	div#entries div.entry div.description img.pict {
		border: none;
		padding: 0;
	}
}

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