夜モード

このデザインについて

popopo サンプル
カテゴリー:シンプルベーステーマ:なしヘッダー:標準(細)
登録日:2008/04/25更新日:2008/04/25利用数:65
夜モード(http://d.hatena.ne.jp/designset/1061)のアンテナ版

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

ページのヘッダ

<h1><a href="./"><hatena name="title"></a></h1>
<div class="main">

ページのフッタ

</div>
<div class="sidebar">

<div class="adminmenu">
<ul>
<li><a href="http://www.hatena.ne.jp/">Hatena</a>
<li><a href="http://d.hatena.ne.jp/">Diary</a>
<li><a href="http://r.hatena.ne.jp/">Rss</a>
<li><a href="http://b.hatena.ne.jp/">Bookmark</a>
<li><a href="http://f.hatena.ne.jp/">Fotolife</a>
</ul>
</div>
<hatena name="rss" url="http://b.hatena.ne.jp/hotentry?mode=rss" listlimit="50" desclength="0" template="hatena-module" moduletitle="Hotentry">
</div>

スタイルシート

/* ********************************************************************************全体な構造 */

*{ margin:0 auto; padding:0; }

body{
margin:0; padding:0;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:80%;
line-height:1.35;
text-align:center;    
word-break:break-all; word-wrap:break-word;
scrollbar-base-color: #00080E;
/* 星もあるよ→http://f.hatena.ne.jp/images/fotolife/p/popopo/20080421/20080421163912.gif */
background:#043067 url('http://f.hatena.ne.jp/images/fotolife/p/popopo/20080424/20080424034302.gif') repeat-x;
}

div.hatena-body{ width:750px; }
div.main{
width:580px;
float:left;
margin:0;
background-color:#fff;
border-top:solid 3px #C7C240;
border-bottom:solid 3px #C7C240;
}
.sidebar{
width:170px;
float:right;
margin:0;
padding-bottom:7px;
background-color:#001326;
border-top:solid 3px #0050B4;
border-bottom:solid 3px #0050B4;
font-size:10px;
color:#5B7682;
text-align:left;
}

h1{
width:750px;
margin:65px auto 2px auto;
padding-left:7px;
text-align:left;
letter-spacing:1;
font-size:150%;
font-weight:normal;
}

h1 a{ color:#fff; text-decoration:none }
h1 a:hover{ text-decoration:underline }
a{ text-decoration:none; }

/* ********************************************************************************はてなヘッダ */

/* ふといの */
table{ width:750px; background-color:transparent; font-size:90%; }
table td{ background-color:transparent; }
table table{ padding:0;  width:100%; }
table font, table a{ color:#043067;font-size:100%; }
table font font{ font-size:100%; }
.hatena-body table font, .hatena-body table a{ font-size:100%; }

/* ほそいの */
#simple-header{ width:750px; background-color:transparent; }
#simple-header img, #simple-header input{ vertical-align:middle; }
#simple-header img{ margin-top:2px; background-color:#00080E }
#simple-header form.search-form{ display:inline; }
#simple-header input, #simple-header select{ }
#simple-header input.search-word{ width:10em; font-size:10px; margin-top:4px; margin-left:5px; background-color:transparent; border:solid 1px #043067 }
#simple-header input.search-button{ width:3em; font-size:10px; margin-top:4px; margin-left:5px; background-color:transparent; border:solid 1px #043067 }
#simple-header ul{ list-style:none; margin:5px 0 0 0; padding:0; }
#simple-header ul li{ display:inline; font-size:10px; padding-left:5px; font-family:Verdana, Osaka, sans-serif; }
#simple-header ul li a{ color:#0050B4; text-decoration: none; }
#simple-header ul li a:hover{ text-decoration:none; }

/* ********************************************************************************アンテナ中身 */

.main{ text-align:left; }
.main a{ color:#0079B1 }
.main a:hover{ color:#1CA5E5; text-decoration:underline; }

p.pager{
margin:7px 7px 0px 7px;
padding:7px 7px 7px 7px;
font-size:90%;
_font-size:80%;
font-weight:normal;
text-align:left;
background-color:#E9EEE0;
}
p#pager_group{ background-color:#DDE2D5 }
p#pager_relate{ text-align:right; }
p.pager a{ color:#0073a8; }
p#pager_relate a{ color:#8D9089; }
a{ text-decoration:none; }

.main ol{
font-weight:normal;
color:#B7B11F;
letter-spacing:0.5;
}

.main ol li{
margin:0px 7px 7px 7px;
padding:11px 17px 11px 17px;
background-color:#E9EEE0;
font-size:100%;
color:#202811;
}

.main img{ margin:1px; }

span.modified{ color:#FFA800; }
p.diff{
padding-top:10px;
background:#E9EEE0 url('http://f.hatena.ne.jp/images/fotolife/p/popopo/20080421/20080421233305.gif') repeat-x left top;
}

ol.image li{ background-color:#fff; }

/* ********************************************************************************サイドバー */

.hatena-module{ margin:2px 7px 5px 7px; }
.hatena-moduletitle{
margin-top:7px;
padding:10px 7px 7px 0;
text-align:right;
font-size:10px;
font-weight:normal;
color:#004F74;
line-height:100%;
background-color:#001F35;
border-left:solid 1px #004F74;
border-right:solid 1px #004F74;
border-top:solid 1px #004F74;
}

.hatena-modulebody{
padding:0px 7px 10px 7px; 
background-color:#001F35;
border-left:solid 1px #004F74;
border-right:solid 1px #004F74;
border-bottom:solid 1px #004F74;
}

/* リンク */
.sidebar a{color:#696969; }
.sidebar li a{ margin:0; padding:2px; color:#696969; }
.sidebar li a:hover{ color:#004F74; }
.hatena-moduletitle a{ color:#004F74; }

/* 各モジュール */
.sidebar li{ color:#014260; }
.sidebar ul{ margin:0; padding:0; list-style-type:none; }
.hatena-module li,
.sidebar dd{ margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:dotted 1px #004F74;  }
.hatena-hotstar img{ display:none }
.adminmenu{ margin:15px 7px }
.adminmenu a{ display:block; margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:solid 1px #004F74; }
img.bcounter{ margin:3px 7px 2px 7px }