サイドバー付きでシンプルにアンテナ

このデザインについて

kagebane サンプル
カテゴリー:シンプルベーステーマ:なしヘッダー:白(細)
登録日:2009/01/22更新日:2009/01/22利用数:368
シンプルにサイドバー要素を付加

サイドバーには良く使うブックマーク等を追加していく形にすると
出先でも不自由しなくなるので使い勝手が良いかと。
ただ、少々面倒ですが…

※スクリーンショットを挿入するのが前提のデザインです。
 「ページのフッタ」を変更すれば、各ブロックの要素を追加・編集できます。

※要初心者程度のHTML知識

※スクリーンショットは「設定」から中or大を選択してください

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

ページのヘッダ

<h1>サイドバー付きアンテナ</h1>
<div class="main">

ページのフッタ

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

<div class="original-module">
<div class="original-moduletitle">■第一ブロック</div>
<p class="sidebar-b">
 | <a target="_blank" href="http://www.hatena.ne.jp/" title="はてな">はてな</a><br>
 | <a target="_blank" href="http://d.hatena.ne.jp/">はてなダイアリー</a><br>
</p>
</div>

<div class="original-module">
<div class="original-moduletitle">■第二ブロック名</div>
<p class="sidebar-b">
◆必要な場合は説明文を挿入<br>
 | <a target="_blank" href="http://www.google.co.jp/" title="GOOGLE">GOOGLE</a><br>
 | <a target="_blank" href="http://www.yahoo.co.jp/">YAHOO</a><br>
</p>
</div>

<div class="original-module">
<div class="original-moduletitle">■その他</div>
<p class="sidebar-b">
 | <a target="_blank" href="http://a.hatena.ne.jp/check">手動更新チェッカー</a><br>
</p>
</div>

<div class="original-module">
<div class="original-moduletitle">■カウンター</div>
<p class="sidebar-b">
 | <hatena name="counter">
</p>
</div>

</div>

スタイルシート

body {font-family : Verdana;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;font-weight:none;
  background-color: #ffffff;color:#000000;
}
li {font-size: 14px;font-weight:none;}
a{color:black;font-weight:none;}
a:visited{color:gray;font-weight:none;}
a:active,a:hover{color:;background-color:#f83b3c;font-weight:none;}
h1 {
  text-align: left;
  font-size: 20px;
  font-weight: none;
  border-bottom: 1px dotted red;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 1%;
  margin-right: 5%;
  padding: 4px 4px 4px 4px;
}
ol {font-weight:none;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 50px;
  margin-right: 5%;
}
span.modified{font-size:10px;background-color:black;color:white;  padding: 4px 10px 4px 10px;font-weight:none;}
.diff {color:gray;font-weight:none;
  font-size: 10px;
  background-color:white;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 4px 4px 4px 4px;
width:700px;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : black;border-left-color : black;border-right-color : black;border-bottom-color : black;
}
.pager {font-weight:none;
  font-size: 11px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 3px;
  margin-left:60px;
}

div.adminmenu {font-weight:none;
  font-size: 10px;
  margin: 2% 5% 0% 0%;
  text-align: right
}
span.adminmenu {font-weight:none;}
div.footer {font-weight:none;
  color: black;
  margin: 5px;
  font-size: 10px;
  text-align: right;
}
form.hatena-searchform {font-weight:none;
  text-align: right;
  margin-right: 5%;
}
span.author{color:#f83b3c;font-size:12px;font-weight:none;}
table{background-color:none;font-weight:none;}
.main {
	margin: 0 ;
	padding: 0;
	width: 80%;
	float:right;
	clear:right;
}
.sidebar {
	width: 20%;	
	text-align: left;
	margin: 0 0;
	padding: 0;
	float: left;
	clear: left;
}
.original-module {
	margin: 6px 6px 0px 6px;
	padding: 4px;
	line-height: 1.5;
	background-color: #EFEFFA;
}
.original-moduletitle {
	font-size: 9pt;
	line-height: 1;
	letter-spacing: 0;
	padding: 2px;
	margin:  0;
	text-align: left;
	font-weight: bold;
	background-color: #E0E6FA;
}
.original-modulebody {
	padding: 0 4px 4px 4px;
	_width: 100%;
	margin: 0;
}

/* sidebar-b */  
.sidebar-b {
  font-size: 8pt;
  text-align: left;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 1%;
  margin-right: 1%;
}
.sidebar-b a {
  color: #000000;
  text-decoration: none;
}
.sidebar-b a:hover {
  color: #0000FF;
  text-decoration: underline;
}
.sidebar-b a:visited {
  color: #333333;
}
.sidebar-b a:active {
}
.sidebar-b ul {
}
.sidebar-b li {
}

.banner {
  text-align: center;
  margin-top: 1px;
  margin-bottom: 1px;
}