ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2

div.module-content, div.module-widget

sidebarの中身を見ていきます。

<div class="sidebar">
<div id="profile" class="module-about module">
<div class="module-content link-note">
<a href="http://pocolog.cocolog-nifty.com/about.html">プロフィール</a>
</div>
</div>
<div id="syndicate" class="module-syndicate module">
<div class="module-content link-note">
<a href="http://pocolog.cocolog-nifty.com/mt/index.rdf">RSSを表示する</a>
</div>
</div>
(以降省略)

「module-content」を編集すればいいことがわかります。また、省略しましたが、「module-widget」も一緒に編集します。

sidebar div.module-content{
  margin: 0px;
  padding: 0px 24px 0px 28px;
  background-image: url("http://pocolog.cocolog-nifty.com/images/sidebar.gif");
  background-repeat: repeat-y;
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5em;
}
.sidebar div.module-widget div.module-content{
  margin: 0px;
  padding: 0px;
  background-image: url("http://pocolog.cocolog-nifty.com/images/sidebar.gif");
  background-repeat: repeat-y;
}

paddingで周りとの間を指定して、背景画像にsidebar.gifを設定します。
line-heightは本文より詰めて1.5emにします。

.sidebar div.module-widget div.module-content li{
  padding: 0px 24px 0px 28px;
}
.sidebar div.link-note{
  padding-bottom: 4px;
}
.sidebar h2{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  border-color: #f65300;
  letter-spacing: .2em;
  padding: 2px 0px;
  margin: 0px 24px 0px 28px;
}

サイドバー内で表示する<li>要素のpaddingも設定します。
.sidebar div.link-noteのpadding-bottom(下の隙間)を設定します。

サイドバー内の<h2>要素の指定もします。

ソースは省略しましたが、サイドバー内の各要素の設定をします。

.sidebar ul{
  margin: 0px;
  padding: 0px 0px 16px 0px;
}
.sidebar li{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5em;
  margin-top: 4px;
}
.sidebar div.module-widget div.module-content li{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.8em;
  margin-top: 4px;
}
.sidebar div.module-recent-comments li{
  font-size: 14px;
}
.sidebar div.module-recent-trackbacks li{
  font-size: 14px;
}
.sidebar div.module-categories li{
  font-size: 14px;
}
.sidebar div#archive-datebased li{
  font-size: 14px;
}

サイドバーの設定はこれで終わりです。
次節は本文を取り上げます。