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

ホーム

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

テンプレート名 : ソラとみどり

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}" />

</head>

<div class="body">

<div class="calender">
{calendar_vertical}
</div>

</td>
<td class="main" valign="top">

<div class="site_title">{blog_name}</div>
<div class="description">{blog_description}</div>

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
	<td valign="top">
	
	
	
	
	
	
	<div class="entry_navi">
	 {prev_entry} | <a href="./">main</a> | {next_entry} 
	</div>
	
	
	
	
	<div class="entry">
	
	
	<div class="entry_date">
	{entry_date} {entry_time}
	<div class="entry_author">
	author : {user_name}</div>
	</div>
	
	
	
	<div class="entry_title">
	{entry_title}
	</div>
	
	<div class="entry_body">
	{entry_description}
	</div>
	
	<a name="sequel"></a>
	<div class="entry_more">
	{entry_sequel}
	</div>
	
	<div class="entry_state">
	| {category_name} | {comment_num} | {trackback_num} |
	</div>
	
	
	</div>
	
	<div class="entry_state">{trackback_auto_discovery}</div>
	
	
	
	
	
	<a name="comments"></a>
	<div class="entry">
	
	<div class="entry_sub"> この記事に関するコメント</div>
	
	
	
	<div class="entry_body">
	{comment_description}
	</div>
	<div class="entry_more">
	| {comment_name} | {comment_time} |
	</div>

</div>
	
	
	
	
	
	<a name="trackback"></a>
	<div class="entry">
	
	<div class="entry_sub">この記事のトラックバックURL</div>
	<div class="entry_body">
	<textarea>{trackback_url}</textarea>
	</div>
	
	<div class="entry_sub">トラックバック</div>
	
	
	<div class="entry_title">{trackback_title}</div>
	<div class="entry_body">{trackback_excerpt}</div>
	<div class="entry_state">
	 | {trackback_blog_name} | {trackback_time} | 
	</div>
	
	
	</div>
	
	
	
	<div class="entry">
	
	<div class="entry_sub">
	プロフィール
	</div>
	
	<div class="entry_title">{profile_name}</div>
	<div class="entry_body">{profile_description}</div>
	
	</div>

<div class="othertext"><a href="#top">PAGETOP ▲</a></div>
	<div class="copyright">{copyright}</div>
	
	
	</td>
	
	
	
	
	
	
	<td valign="top">
	
	<div class="side_menu">
	
	
	<div class="links">
	<div class="linktitle" id="profilename">PROFILE</div>
	<div class="linktext" id="profilelist">
	{user_list}
	</div>
	</div>
	
	
	
	
	<div class="links">
	<div class="linktitle">RECOMMEND</div>
	<div class="linktext">{amazon_item}</div>
	</div>
	
	
	
	
	<div class="links">
	<div class="linktitle" id="newentryname">NEW ENTRIES</div>
	<div class="linktext" id="newentrylist">{latest_entry_list}</div>
	</div>
	
	
	
	
	<div class="links">
	<div class="linktitle" id="categoryname">CATEGORIES</div>
	<div class="linktext" id="categorylist">{category_list}</div>
	</div>
	
	
	
	
	
	
	<div class="links">
	<div class="linktitle" id="commentname">RECENT COMMENTS</div>
	<div class="linktext" id="commentlist">{recent_comment_list}</div>
	</div>
	
	
	
	<div class="links">
	<div class="linktitle" id="linkname">LINKS</div>
	<div class="linktext" id="linklist">{link_list}</div>
	</div>
	
	
	
	<div class="links">
	<div class="linktitle" id="archivename">ARCHIVES</div>
	<div class="linktext" id="archivelist">{archives_list}</div>
	</div>
	
	
	
	
	<div class="links">
	<div class="linktitle" id="tbname">RECENT TRACKBACK</div>
	<div class="linktext" id="tblist">{recent_trackback_list}</div>
	</div>

<div class="othertext">
	<a href="./admin/">管理者ページ</a><br />
	<a href="{site_rss}">RSS1.0</a><br />
	<a href="{site_atom}">Atom0.3</a><br />
	<a href="http://lolipop.jp/" title="ロリポブログ">Powered by ロリポブログ</a>
	</div>

<form method="get" action="">
	<div class="search">SEARCH THIS SITE.</div>
	<input id="search" name="search" size="14" style="width:150px" class="form" />
	<input type="submit" value=" search " />
	</form>

</div></td>

</td>
</tr>
</table>

</div>

</body>
</html>

CSS

body {
	background:#ffffff;
	color:#80838B;
	font: 10px "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	margin:0px;
	padding:0px;
	background-image:url(http://suizoku.hacca.jp/greenil.jpg);		/* 背景画像： */
	background-position:0px 15px;		/* 背景表示位置 */
	background-repeat:no-repeat ;		/* 背景画像繰り返し制御 */

}
	
	
a:link		{ color: #0066ff; text-decoration: none; }
a:visited	{ color: #0066ff; text-decoration: none; }
a:active	{ color: #0066ff; text-decoration: none; }
a:hover	{ color: #0066ff; text-decoration: underline; }

ul {
	list-style-type: none;
	line-height:120%;
	margin-left:15px;
	padding:0px;
	}
	
li {
	margin-bottom:5px;
	}
	
ul.tree {
  list-style: none;
  margin: 0px;
  padding: 0px;
  line-height: 120%;
}
ul.tree li {
  margin: 0px;
  padding: 0px 0px 0px 16px;
  background-image: url(http://memo.suizoku.hacca.jp/images/img8_lstSample.gif);
  background-repeat: no-repeat;
}
ul.tree li.end {
  background-image: url(http://memo.suizoku.hacca.jp/images/img9_endSample.gif);
}

img {
	border:none;
	}

form {
	margin: 0px;
	padding: 0px;
	}

input,textarea {
	color: #555;
	font-size :9px;
	border:1px #CCC solid;
	background-color:#FFF;
	padding: 2px;
	}
	
.body {
	margin-left:50px;				/* 左マージン */

}
	
.main {
	width:750px;				/* 表示の横幅 */

}

/* カレンダー */

.left {
	padding-right:10px;				/* 右パディング */
	font-size: 9px;
	background-image: url(http://suizoku.hacca.jp/skyly.jpg);
	background-attachment:fixed;		/* 背景スクロール */
	width:100px;				/* 表示の横幅 */
	border-left:1px solid #444;				/* 左ボーダー */
	border-right:1px solid #444;				/* 右ボーダー */
}

.calender {
	font-size:12px;			/*  フォントサイズ */
	font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";;			/* フォントファミリー */
	line-height:20px;			/* 行幅 */
	text-align:right;			/* 文字揃え */
	letter-spacing:1px;		/* 文字間隔 */

}

.calender a,
.calender a:link,
.calender a:visited,
.calender a:active,
.calender a:hover {
	color:#CCF;
	text-decoration:none;
}

/* サイトタイトル---------------------------------------------------------------------- */

h1 {
	font-weight: bolder;
	color: #F06F9B;
	margin: 0px 0px 0px 0px;
}

.site_title {
	font-size: 20px;
	font-weight: bolder;
	color: #FFFFFF;
	padding:15px 2px 10px 0px;
	text-align:right;			/* 文字揃え */

}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
	color:#FFF;
	text-decoration:none;
}

.description {
	font-size: 10px;
	color: #000;
	padding-bottom:85px;				/* 下パディング */
	padding-right:2px;				/* 右パディング */
	text-align:right;			/* 文字揃え */

}

/* エントリー---------------------------------------------------------------------- */

.entry {
	width:480px;				/* 表示の横幅 */
	padding-left:20px;				/* 左パディング */

}

.entry_navi {
	text-align:center;
	font-size: 9px;
	margin: 10px 0;
}

.entry_date {
	font-size: 10px;
	color: #888;
	font-family:"Verdana";			/* フォントファミリー */
	font-weight:bold;			/* 太さ */
	padding: 2px 10px 2px 0px;
	border-top:3px double #999;				/* 上ボーダー */
	border-bottom:1px solid #999;				/* 下ボーダー */
	text-align:right;			/* 文字揃え */
	margin-top:10px;				/* 上マージン */

}

.entry_title {
	font-size: 12px;
	font-weight: bolder;
	color: #000099;
	margin: 5px 0px 0px 10px;
}

.entry_author {
	font-size: 9px;
	color: #636363;
}

.entry_body {
	font-size: 10px;
	line-height: 170%;
	color: #636363;
	padding: 10px 0px 15px 10px;
	font-family:"ヒラギノ丸ゴ Pro W4","HG丸ゴシックＭ-PRO";			/* フォントファミリー */
}

.entry_more {
	font-size: 10px;
	line-height: 170%;
	color: #636363;
	margin:0px 0px 15px 10px;
}

.entry_state {
	font-size: 9px;
	color: #636363;
	padding: 0px 0px 10px 10px;
}

.entry_sub{
	font-size: 9px;
	color: #636363;
	font-weight:bold;			/* 太さ */
	border-bottom:1px solid #ccc;				/* 下ボーダー */
	margin-top:15px;				/* 上マージン */

}

blockquote {
	font-size: 9px;
	color: #003377;
	background-color:#99ccff;		/* 背景色： */
	border-width:1px 1px 1px 13px;				/* ボーダー太さ */
	border-style:solid;				/* ボーダー形式 */
	border-color:#6699dd;				/* ボーダー色 */
	width:320px;				/* 表示の横幅 */
	padding:5px;				/* パディング一括指定 */

}

.pict {
	border-width: 1px;
	border-style: solid;
	border-color: #636363;
}

/* メニュー---------------------------------------------------------------------- */

.side_menu {
	width:180px;				/* 表示の横幅 */
	padding-left:15px;				/* 左パディング */
	margin-top:10px;				/* 上マージン */

}
ul {
	margin: 0px 0px 0px 5px;
	padding: 0px;
}

.links {
	background-color:#CACAFE;		/* 背景色： */
	border-width:1px 1px 1px 10px;				/* ボーダー一括指定 */
	border-style:solid;				/* ボーダー形式 */
	border-color:#88AACC;				/* ボーダー色 */
	padding:4px;				/* パディング一括指定 */
	margin:10px 0px;				/* マージン一括指定 */
	width:160px;				/* 表示の横幅 */

}

.linktitle {
	font-size: 11px;
	font-weight: bolder;
	color: #3E3EBA;
}

.linktext {
	font-size: 9px;
	color: #636363;
	line-height: 150%;
	margin: 5px 0px 0px 1px;
	padding-left: 5px;
}

.othertext {
	font-size: 9px;
	color: #636363;
	line-height: 150%;
	margin:15px 0px 10px 0px;				/* マージン一括指定 */

}

.search {
	font-size: 10px;
	color: #636363;
	margin-top:13px;				/* 上マージン */

}

.copyright {
	font-size: 10px;
	color: #636363;
	line-height: 150%;
	margin: 20px 0px 10px 20px;
}

/* コメント・トラックバック・プロフィール */
input,textarea,select{
	font-size :10px;
	color :#333333;
	background-color:#FFFFFF;
}

.prof_pict {
	width:150px;				/* 表示の横幅 */
	float:left;				/* フロートと回り込み */
	border:0px;				/* ボーダー一括指定 */
	margin-right:10px;				/* 右マージン */
	margin-top:10px;				/* 上マージン */
	margin-bottom:15px;				/* 下マージン */

}

/* フッタ---------------------------------------------------------------------- */

/* AD--------------- */

/* ad */
#ad{
	margin-top:10px;
}

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