origin

このデザインについて

originchepooka サンプル
カテゴリー:シンプルベーステーマ:なしヘッダー:白(太)
登録日:2006/11/08更新日:2007/02/09利用数:2200
サイドバーつきのテーマ。無しでも使えます。
サンプルのようにサイドバーには更新を確認する必要のないものを並べリンク集として利用すると便利です。

■サイドバーのはずし方
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: #000000;
	background-color: #e5e5e5;
	text-align: center;
}


/*::: header :::::::::::::::::::::::::::::::::::::::::::::*/

table{
	margin: 0 auto;
	padding:  0;
	width: 700px;
	background-color: #ffffff;
}

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: #000000;
	background-color: #eeeeee;
	clear: both;

}

.hatena-body{
	margin: 0 auto;
	width: 700px;
	position:relative;
	background-color: #ffffff;
	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: 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: #f0f0f0;
	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: #FB7BD9;
}

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: #000000;

}

li a:visited {
	color: #999999;
}

li a:hover {
	color: #FB7BD9;
}

.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: #FB7BD9;
}

/*::: 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: #000000;
	background-color: #eeeeee;
}

.hatena-module a{
	color: #000000;
}

.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: #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: 50px;
}