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

ホーム

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

テンプレート名 : Sakura mono

HTML・CSSをコピーして使う

HTML

<!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" />
<title>{site_title}</title>
<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>
<body onload="javascript:initval();" id="top">
<div id="layout">
<div id="header">
	
	<h1>{blog_name}</h1>
	<div class="blog_description">{blog_description}</div>
	
</div>
<div id="contents">

<h2><a href="{entry_permalink}">{entry_title}</a></h2>

{entry_description}

<div class="entry_sequel">{entry_sequel}</div>

</div>

{entry_date} {entry_time} | {category_name} | {comment_num} | {trackback_num}

</div>

{trackback_auto_discovery}

<h2 class="comment_title">Comments</h2>

<dt class="comment_body">{comment_description}</dt>

<dd class="comment_detail">{comment_name} | {comment_time}</dd>

</dl>
		<form action="./?mode=comment" method="post" class="comment">

<h3 class="comment_title">Post a Comment.</h3>

<dd>

</dd>

<dt><label for="description" class="comment_label">Comments:</label></dt>

<dd>

<input type="reset" tabindex="7" value="Reset" class="button" />&nbsp;

<label for="set_cookie" class="comment_label">Cookie:</label>

</dd>

</dl>

</form>

</div>

<h2 class="comment_title">Trackbacks</h2>
		<div class="trackback_body">

<p>Trackback URL&nbsp;:&nbsp;<input type="text" value="{trackback_url}" readonly="readonly" class="form" /></p>

<h3 class="trackback_title">{trackback_title}</h3>

<dl class="trackback">
				<dt>{trackback_excerpt}</dt>

<dd>{trackback_blog_name} | {trackback_time}</dd>

</dl>

</div>
	</div>

<h2>{profile_name}&#39;s profile</h2>

<div class="entry_body">
				<h3>プロフィール</h3>
				{profile_description}
		</div>

</div>

<div id="pagenavi">{prev_entry} | <a href="./">main</a> | {next_entry}</div>

</div>

<h2 class="linktitle">Categories</h2>

<div class="linktext">{category_list}</div>

</li>

<h2 class="linktitle">Recent Entries</h2>

<div class="linktext">{selected_entry_list}</div>

</li>

<h2 class="linktitle">Comments</h2>

<div class="linktext">{recent_comment_list}</div>

</li>

<h2 class="linktitle">Trackbacks</h2>

<div class="linktext">{recent_trackback_list}</div>

</li>

<h2 class="linktitle">Archives</h2>

<div class="linktext">{archives_list}</div>

</li>

</li>

<h2 class="linktitle">Profile</h2>

</li>

<div class="linktext"><div style="text-align: center;">{site_qrcode}</div></div>

</li>

<h2 class="linktitle">{freespace_title1}</h2>

<div class="linktext">{freespace_contents1}</div>

</li>

<h2 class="linktitle">{freespace_title2}</h2>

<div class="linktext">{freespace_contents2}</div>

</li>

<h2 class="linktitle">{freespace_title3}</h2>

<div class="linktext">{freespace_contents3}</div>

</li>

<h2 class="linktitle">{freespace_title4}</h2>

<div class="linktext">{freespace_contents4}</div>

</li>

<h2 class="linktitle">{freespace_title5}</h2>

<div class="linktext">{freespace_contents5}</div>

</li>

<h2 class="linktitle">Others</h2>

<ul>

<li>

</form>

</li>

<li>Powered by <a href="https://jugem.jp/">JUGEM</a>.</li>

<li>Template by <a href="http://babyichigo.net/">Raspberry Jam</a>.</li>

</ul>

</div>

</li>

<h2 class="linktitle">Sponsored Links</h2>

</li>

</li>

</ul>

</div>

</body>

</html>

CSS

/*
Theme Name: Sakura mono
Theme URI: http://babyichigo.net/template/blog/
Description: This theme is based on the "CSS Design Plate".
Version: 1.0
Author: Raspberry Jam
Author URI: http://babyichigo.net/
*/
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dl,a,blockquote,cite,q,pre,address {
	margin: 0;
	padding: 0;
	font-size: 1em;
	border: none;
	background: none;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}
/****** list.etc ******/
ul,ol {
	margin: 10px 0;
}
li {
	margin: 5px 0 5px 25px;
	line-height: 1.50;
}
dl {
	margin: 10px 0;
}
dt {
	margin: 10px 0 2px 0;
}
dd {
	margin: 2px 0 10px 4%;
	line-height: 1.50;
}
hr {
	display: none;
}
a:link, a:visited {

color: #000000;

text-decoration: underline;

}

a:active, a:hover {

color: #3a3a3a;

text-decoration: underline;

}

body {

font-size: 11px;

color: #383838;

background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587100.gif);

}

div#layout {

margin: 0 10%;

background-color: #f8f8f8;

}

/****** header ******/

div#header {

background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587103.jpg);

background-position: top right;

background-repeat: no-repeat;

background-color: #e6e6e6;

height: 242px;

}

h1 {

padding: 95px 0 0 0;

width: 280px;
	height: 57px;

font-size: 1.5em;

font-family: Georgia, Times, serif;

text-align: center;

}
h1 a:link,
h1 a:visited,
h1 a:hover {
	font-weight: bold;
	color: #101010;
	text-decoration: none;
}

div.blog_description {

margin: 60px 0 0 0;

background-color: #7c7c7c;

opacity: 0.80;

filter: alpha(opacity=80);

height: 30px;

line-height: 30px;

padding: 0 1.5em;

color: #000000;

font-weight: bold;

font-size: 1.1em;

}
/****** contents ******/

div#contents {

float: left;
	width: 63%;
	margin: 10px 0 40px 0;

}

div#contents h2 {
	background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587101.gif);

height: 33px;

line-height: 33px;

margin: 15px 0 8px 0;

padding: 0 20px;

font-size: 1.2em;
	text-decoration: none;

}
div#contents h2 a {
	display: block;
	color: #000000;
	text-decoration: none;
	height: 33px;

line-height: 33px;
}
div.entry {
	margin: 0 0 50px 0;
}

div.entry_body {

line-height: 1.70;

margin: 10px 3%;

}

div.entry_body p {

line-height: 1.70;

margin: 15px 0;

}
div.entry_state {
	margin: 5px 0 20px 3%;
	border-top: 1px dotted #919191;
}

h3 {

background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587102.gif);

background-repeat: no-repeat;

height: 24px;

line-height: 24px;

margin: 10px 10px;

padding: 0 25px;

font-size: 1.1em;

}

p {

margin: 17px 0;

}

ul.modori {

height: 20px;

margin: 0 5px 30px 0;

}

ul.modori li {

list-style: none;

float: right;

}

ul.modori li a {

background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587101.gif);

background-position: top right;

display: block;

height: 20px;

line-height: 20px;

text-align: center;

width: 5em;

}

ul.modori li a:link,

ul.modori li a:visited {

text-decoration: none;

}

ul.modori li a:active,

ul.modori li a:hover {

text-decoration: underline;

}
/****** comment ******/
dl.comment {
	margin: 10px 0 15px 6%;
	line-height: 1.50;
}
dl.comment dd {
	border-top: 1px dotted #919191;
	margin: 2px 0 20px 0;
	text-align: right;
	padding: 0 2% 0 0;
}
dl.comment_form {
	margin: 10px 0 15px 6%;
}
dl.comment_form input.form,
dl.comment_form .comment_textarea {
	width: 70%;
	font-size: 1em;
	line-height: 1.50;
}
div.trackback_body {
	margin: 10px 0 30px 3%;
}
div.trackback_body input.form {
	width: 70%;
}
dl.trackback {
	margin: 10px 0 20px 5%;
	line-height: 1.50;
}
dl.trackback dd {
	border-top: 1px dotted #919191;
	margin: 2px 0 10px 0;
	text-align: right;
	padding: 0 2% 0 0;
}
/****** page navi ******/
div#pagenavi,
div#pagenaviunder {
	margin: 20px 0;
	text-align: center;
}
/****** menu side bar ******/
ul#menu {
	float: right;
	width: 35%;
	margin: 20px 0 40px 0;
}
li.linkblock {
	list-style: none;
}
li.linkblock h2 {
	background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587101.gif);
	height: 20px;
	line-height: 20px;
	padding: 0 0 0 20px;
}
div.linktext ul {

}
div.linktext ul li {
	list-style-type: circle;
}
form.searchform input.searchbox {
	width: 50%;
}
form.searchform input.searchbutton {
	width: 30%;
}

/****** footer ******/

div#footer {
	clear: both;

background-color: #939393;

background-image: url(http://img-cdn.jg.jugem.jp/7d3/132924/20090426_587101.gif);

background-position: top right;

height: 30px;

}
address {

line-height: 30px;

height: 30px;

padding: 0 3em;

color: #101010;
	text-align: center;

}

/****** quote ******/

blockquote {

margin: 10px 10px 10px 15px;

border-left: 5px double #5d6163;

padding: 5px 5px 5px 10px;

}

cite {

padding: 0 3px;

font-style: italic;

color: #878789;

}

q {

padding: 0 3px;

font-style: italic;

color: #878789;

}

pre {

font-family: monospace;

}

input,

textarea {

font-size: 1em;

background: none;

border: 1px solid #9a9a9a;

}

select {

background: none;

}

/****** text ******/

em {

font-weight: bold;

}

strong {

font-weight: bold;

}

ins {

border-bottom: 1px dashed #768782;

}

del {

text-decoration: line-through;

}
/****** picture ******/
img {

border: none;

}

img.pict_right {

float: right;

margin: 0 0 5px 5px;

padding: 1px;

border: 1px solid #8c8b8d;

width: 240px;

}

img.pict,

img.pict_left {

float: left;

margin: 0 5px 5px 0;

padding: 1px;

border: 1px solid #8c8b8d;

width: 240px;

}

img.pict_center {

display: block;

margin: 5px auto;

padding: 1px;

border: 1px solid #8c8b8d;

width: 240px;

text-align: center;

}

/****** not good ******/

b {

font-weight: bold;

}

i {

font-style: italic;

}

big {

font-size: 1.2em;

}

small {

font-size: 0.8em;

}

tt {

font-family: monospace;

}

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