 feverfew
 サンプル
|
|||
| カテゴリー：シンプル | ベーステーマ：なし | ヘッダー：■黒(太) | |
| 登録日：2007/02/27 | 更新日：2007/02/27 | 利用数：315 | |
|
chepookaさんの公開されている「origin」を黒背景にしてみました。配色変更以外は元のままです。 以下、本家「origin」( http://a.hatena.ne.jp/designset/4 )からの引用です。 -----ここから サイドバーつきのテーマ。無しでも使えます。 サンプルのようにサイドバーには更新を確認する必要のないものを並べリンク集として利用すると便利です。 ■サイドバーのはずし方 1) ページのヘッダに書かれている<div class="main">を消す 2) ページのフッタに書かれているものをすべて消す -----ここまで |
|||
<h1><hatena name="title"></h1> <div class="main">
</div> <div class="sidebar"> <div class="hatena-module"> <div class="hatena-moduletitle">Hatena</div> <div class="hatena-modulebody"> <ul> <li><a href="http://www.hatena.ne.jp/">はてな</a> <li><a href="http://d.hatena.ne.jp/">はてなダイアリー</a> <li><a href="http://b.hatena.ne.jp/">はてなブックマーク</a> <li><a href="http://f.hatena.ne.jp/">はてなフォトライフ</a> </ul> </div></div> <hatena name="rss" url="http://b.hatena.ne.jp/hotentry?mode=rss" listlimit="10" template="hatena-module" desclength="0"> </div>
body {
font-size: 80%;
font-family: Verdana, Osaka, sans-serif;
margin: 0;
word-break: break-all ;
word-wrap: break-word ;
text-align: center;
color: #fcfcfc;
background-color: #333333;
text-align: center;
}
/*::: header :::::::::::::::::::::::::::::::::::::::::::::*/
table{
margin: 0 auto;
padding: 0;
width: 700px;
background-color: #000000;
}
table td{
padding: 0 5px;
}
table table{
margin: 0;
width: 100%;
border: 0;
padding: 0;
}
table table td{
padding: 0;
}
td{
background-color: transparent;
}
table font{
color: #a0a0a0;
}
table font{
font-size: 60%;
}
table font font{
font-size: 100%;
}
table input{
background-color: #f5f5f5;
border: none;
}
/*::: title :::::::::::::::::::::::::::::::::::::::::::::*/
h1 {
text-align: left;
margin: 0 15px 15px 15px;
font-size: 140%;
line-height: 1.5;
padding: 40px 10px;
font-weight: bold;
font-family: Arial;
color: #fcfcfc;
background-color: #222222;
clear: both;
}
.hatena-body{
margin: 0 auto;
width: 700px;
position:relative;
background-color: #000000;
padding: 15px 0 0 0;
}
.hatena-body:after{
content:"";
display:block;
clear:both;
border-bottom:1px transparent solid;
}
.main{
margin: 0 ;
padding: 0;
width: 500px;
float:left;
clear: left;
}
.description{
padding: 15px;
font-size: small;
}
p.pager {
margin: 0 0 0 10px ;
padding: 2px 2px 3px 2px;
clear: both;
text-align: left;
color: #f0f0f0;
font-size: 1px;
}
p.pager b{
background-color: #f0f0f0;
padding: 1px 5px;
color: #666666;
font-weight: bold;
font-size: small;
}
p.pager a{
color: #fcfcfc;
padding: 1px 5px;
font-size: small;
}
p.pager a:hover{
color: #000000;
background-color: #d9d9FF;
}
iframe{
display: none !important;
}
ol {
margin: 0 15px 5px 15px;
padding: 0;
text-align: center;
list-style-position: inline;
list-style: none;
text-align: left;
}
li {
padding: 2px 0;
}
span.modified{
font-size: 80%;
margin: 0 3px 0 0;
}
li a.screenshot{
}
li a.screenshot img{
margin: 0 7px 7px 0;
}
li a{
text-decoration: none;
}
li a:link{
color: #fcfcfc;
}
li a:visited {
color: #999999;
}
li a:hover {
color: #d9d9FF;
}
.main li a img{
}
p {
margin: 0;
display: block;
}
p.diff {
text-align:left;
padding: 5px;
margin: 3px 0 12px 0;
font-size: small;
line-height: 1.5;
color: #666666;
}
.footer{
margin: 0 0 0 50px;
padding: 5px 0;
text-align: center;
background-color: #000000;
font-size: small;
width: 500px;
clear: both;
display: none;
}
/*::: a :::::::::::::::::::::::::::::::::::::::::::::*/
a {
text-decoration: none;
color: #fcfcfc;
}
a:hover,
a:hover font{
color: #d9d9FF;
}
/*::: sidebar :::::::::::::::::::::::::::::::::::::::::::::*/
.sidebar{
width: 200px;
font-size: 100%;
text-align: left;
margin: 0 0;
padding: 0;
float: right;
clear: right;
}
.hatena-module{
margin: 0 15px 15px 0;
padding: 0;
line-height: 1.5;
color: #fcfcfc;
background-color: #222222;
}
.hatena-module a{
color: #fcfcfc;
}
.hatena-moduletitle{
font-size: 100%;
line-height: 1;
letter-spacing: 0;
padding: 10px 10px 7px 10px;
margin: 0;
text-align: left;
font-weight: bold;
}
.hatena-modulebody{
padding: 0 10px 10px 10px;
_width: 100%;
margin: 0;
font-size: 80%;
}
.hatena-modulebody ul{
margin: 0 ;
padding: 0;
line-height: 1.2;
}
.hatena-modulebody li{
list-style: none;
margin: 0 0 2px 0;
padding: 0;
}
.hatena-modulebody li a:link{
color: #fcfcfc;
}
.hatena-modulebody li a:visited {
color: #fcfcfc;
}
.hatena-modulebody .hatena-rss li a:visited {
color: #666666;
}
#hatena-antenna-image ol.image li {
float:left;
display:block;
width: 140px;
height: 135px;
white-space : -pre-wrap ;
white-space : -o-pre-wrap ;
white-space : pre-wrap ;
word-break : break-all ;
word-wrap : break-word ;
text-align: left;
margin: 0 15px 10px 0;
padding: 0;
list-style:none;
}
#hatena-antenna-image ol.image li a{
margin: 0;
padding: 0;
}
#hatena-antenna-image ol.image li a.screenshot img{
margin: 0;
padding: 0;
border: 1px solid #222222;
float: none;
}
#hatena-antenna-image ol.image li .modified,
#hatena-antenna-image ol.image li .author
{
text-align:left;
display: block;
}
#toggle_visited{
position: absolute;
right: 15px;
top: 50px;
}