 chepooka
 サンプル
|
|||
| カテゴリー：シンプル | ベーステーマ：なし | ヘッダー：■白(太) | |
| 登録日：2006/11/10 | 更新日：2008/02/11 | 利用数：1184 | |
|
ダイアリーとお揃い。中身はoriginとほぼ同じです。サイドバーつき。サンプルのようにサイドバーには更新を確認する必要のないものを並べリンク集として利用すると便利です。 ■サイドバーのはずし方 1) ページのヘッダに書かれている<div class="main">を消す 2) ページのフッタに書かれているものをすべて消す ■色の変更方法 以下のものをスタイルシート部の一番下に書き加えるとデザインの配色を簡単に変更することが事ができます。背景の白は変えることができません。 /* 背景 */ body{ background-color: #dddddd; } /* ダイアリータイトル、サイドバー背景、商品詳細 */ h1,.hatena-module,.hatena-asin-detail{ background-color: #eeeeee; } /* サイドバー部タイトル */ .hatena-moduletitle{ background-color: #dddddd; } /* アンカー */ span.sanchor{color:#999999;} h4{border-color:#999999;} |
|||
<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" moduletitle="Hotentry"> </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: #000000;
background-color: #DDEE79;
text-align: center;
padding: 22px 0 0 0;
background: #DDEE79 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20060802/20060802152436.gif") no-repeat center 15px;
}
/*::header:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
table{
padding: 0;
font-size: 100%;
margin: 0 auto;
width: 700px;
text-align: left;
background-color: #ffffff;
}
.hatena-body table,
.hatena-body table table{
padding: 0;
background-image: none;
background-color: transparent;
margin: 0;
border: none;
width: auto;
}
table td{
background-color:transparent;
padding: 0 10px;
}
table table{
background-color: transparent;
background-image: none;
border: none;
width: 100%;
line-height: 1;
}
table table td{
background-color:transparent;
padding: 0;
margin: 0;
}
table div{
}
table font,
table a{
border: none;
color: #a0a0a0;
font-size: 100%;
}
table font{
font-size: 80%;
}
table font font{
font-size: 100%;
}
.hatena-body table font,
.hatena-body table a{
color: #000000;
font-size: 100%;
}
table a{
border: none;
}
table input{
background-color : #f9f9f9;
color: #000000;
border: none;
}
/*::: title :::::::::::::::::::::::::::::::::::::::::::::*/
h1{
padding: 55px 30px 0 30px;
font-size: 140%;
line-height: 1.6;
text-align: left;
color: #000000;
font-family: Helvetica,Arial,sans-serif;
clear: both;
margin: 0 auto;
font-weight: bold;
width: 640px;
height: 85px;
_width: 700px;
_height: 140px;
?width: 700px;
?height: 140px;
background: #E6F395 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20060802/20060802164417.gif") no-repeat left center;
clear:both;
}
.hatena-body{
margin: 0 auto;
width: 700px;
position:relative;
background-color: #ffffff;
padding: 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: 11px;
}
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: #DDEE79;
padding: 1px 5px;
color: #666666;
font-weight: bold;
font-size: 10px;
}
p.pager a{
color: #000000;
padding: 1px 5px;
font-size: 10px;
}
p.pager a:hover{
color: #ffffff;
background-color: #F96383;
}
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: 3px 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: #000000;
}
li a:visited {
color: #999999;
}
li a:hover {
color: #F96383;
}
.main li a img{
}
p {
margin: 0;
display: block;
}
p.diff {
text-align:left;
padding: 5px;
margin: 3px 0 12px 0;
font-size: 10px;
line-height: 1.5;
color: #666666;
}
.footer{
margin: 0 0 0 50px;
padding: 5px 0;
text-align: center;
background-color: #ffffff;
font-size: 10px;
width: 500px;
clear: both;
display: none;
}
/*::: a :::::::::::::::::::::::::::::::::::::::::::::*/
a {
text-decoration: none;
color: #000000;
}
a:hover,
a:hover font{
color: #F96383;
}
/*::sidebar:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.sidebar {
float: right;
clear: right;
width: 200px;
color: #000000;
margin: 0;
text-align: left;
}
.hatena-module{
margin: 0 15px 15px 0;
padding: 0;
text-align: left;
_width: 100%;
background: #E6F395 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20060802/20060802160757.gif") no-repeat left bottom;
}
.hatena-moduletitle,
.hatena-moduletitle a{
border: none;
text-decoration: none;
color: #000000;
}
.hatena-moduletitle{
font-size: 120%;
line-height: 1;
padding: 7px 10px 5px 10px;
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
background: #DDEE79 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20060802/20060802160756.gif") no-repeat left top;
}
.hatena-modulebody{
padding: 5px 10px;
margin: 0;
zoom: 1;
font-size: 80%;
}
.hatena-modulebody a{
border: none;
text-decoration: none;
color: #000000;
}
.hatena-modulebody ul{
margin: 0 ;
padding: 0 0 0 1.5em;
line-height: 1.5;
list-style: circle;
}
.hatena-modulebody li{
margin: 0 0 2px 0;
padding: 0;
}
.hatena-modulebody li a:link{
color: #000000;
}
.hatena-modulebody li a:visited {
color: #000000;
}
.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 #eeeeee;
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: 53px;
}