シンプル+RSS

このデザインについて

cervo サンプル
カテゴリー:シンプルベーステーマ:hatenaヘッダー:標準(細)
登録日:2010/08/14更新日:2010/08/15利用数:48
・ヘッダ色の選択は通常通り反映されます。
・下部にモジュールボックスを設置。
・一応スクリーンショット使用を推奨。
・html,CSSとも自由に改変して使って下さい。

ヘッダ/フッタ/スタイルシート

ページのヘッダ

<h1><hatena name="title"></h1>

ページのフッタ

<div id="sub">
	<p class="up"><a href="#simple-header" title="上へ戻ります">▲</a></p>
	<hatena name="rss" url="http://b.hatena.ne.jp/hotentry.rss" template="hatena-module" listlimit="10">
	<hatena name="rss" url="http://d.hatena.ne.jp/hatenadiary/rss" template="hatena-module" listlimit="5">
	<p class="up bottom"><a href="#simple-header" title="上へ戻ります">▲</a></p>
</div>

<ul id="links">
	<li><a href="http://a.hatena.ne.jp/">a.hatena.ne.jp</a></li>
</ul>

スタイルシート

body {
	text-align: center;
	font-family: Verdana, sans-serif;
	background: #f5f5f2 url("http://img.f.hatena.ne.jp/images/fotolife/c/cervo/20100812/20100812212901.png") top left repeat-x fixed;
}
.hatena-body a {
	padding: 0.1em;
	text-decoration: none;
	color: #369;
	border: 1px solid transparent;
	_border: 1px solid  #fefefd; /* ie6 */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.hatena-body a:hover {
	text-decoration: none;
	color: #007 !important;
	background-color: #fee;
	border-color: #e22;
}
#hatena-antenna-simple ol li a {
	font-weight: normal;
	color: #258;
}
#simple-header,
.hatena-body {
	margin: 0 auto;
	width: 54em;
	text-align: left;
	border-right: 1px solid #aa9;
	border-left: 1px solid #aa9;
}
#simple-header {
	/* background: #45a;ヘッダ色 */
}
.hatena-body {
	overflow: hidden;
	background-color: #fefefd;
}
p.pager {
	font-size: 0.9em;
}
p.pager b {
	padding: 0.1em;
	background-color: #fe9;
}
p#pager_relate a {
	font-size: smaller;
}
p#pager_group a {
	white-space: nowrap;
}
.hatena-body ol {
	list-style-position: outside
	margin-left: 0;
	padding-left: 1%;
}
#hatena-antenna-simple ol {
	padding-left: 4%;
}
ol li {
	font-size: 0.9em;
}
.modified {
	font-size: 0.9em;
	font-family: "Arial", sans-serif;
	color: #555;
}
p.diff {
	margin: 0.1em 0 0.5em 1em;
	padding: 0.5em 1em 0;
	line-height: 1.2;
	max-height: 4.8em;
	/height: 5.3em; /* ie */
	overflow: auto;
	font-size: 0.9em;
	color: #3c3c3c;
	border-left: 0.5em solid #ddd;
	background-color: transparent;
}
#hatena-antenna-detail p.diff {
	line-height: 1.4;
	max-height: none;
	height: auto;
	font-family: "Hiragino Kaku Gothic Pro", "Meiryo", Verdana, sans-serif;
	border-left: 0.5em double #bbd;
	/display: inline-block;/* ie */
}
a.screenshot {
	padding: 0;
	border: 0;
}
a.screenshot img {
	margin-right: 0.8em;
}
#hatena-antenna-normal a.screenshot img {
	width: 5.4em;
	height: 4.2em;
}
/* ========================================= */
#sub,
ul#links {
	margin: 1em 5%;
}
#sub {
	overflow: hidden;
	padding: 0.8em 1em;
	font-size: 0.9em;
	border: 1px solid #aa9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#sub ul li {
	list-style-type: decimal;
	font-size: 0.9em;
}
p.up {
	margin: 0 0 -1em 0;
	text-align: right;
}
p.bottom {
	margin: -1em 0 0 0;
}
ul#links {
	text-align: center;
}
ul#links li {
	margin-right: 1em;
	display: inline;
	font-size: 0.8em;
}
#sub li a:link,
#sub li a:visited,
ul#links a:link,
ul#links a:visited {
	white-space: nowrap;
	/white-space: none; /* ie */
	font-weight: normal;
	color: #258;
}