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

サイドバーの編集

サイドバーの編集をしていきましょう。ソースが複雑ですが、がんばっていきましょう。

まず、2カラムの初期設定をしている個所を編集します。

#left{
  width: 228px;
  background-color: #f1f1ed;
}

#center{
  width: 732px;
  background-color: #f1f1ed;
}

次にサイドバーの編集をしていきます。ソースが複雑ですが、

<div id="left">
<div class="sidebar-top"></div>
<div class="sidebar">
(省略)
<div class="sidebar-bottom"></div>

の構造になっています。

ここにスタイルシートを設定していきます。

.sidebar{
  background-image: url("http://pocolog.cocolog-nifty.com/images/sidebar.gif");
  background-repeat: repeat-y;
  padding: 0px;
  margin: 0px;
}
.sidebar-top{
  background-image: url("http://pocolog.cocolog-nifty.com/images/sidebar-top.gif");
  height: 12px;
  padding: 0px;
  margin: 0px;
}
.sidebar-bottom{
  background-image: url("http://pocolog.cocolog-nifty.com/images/sidebar-bottom.gif");
  height: 20px;
  padding: 0px;
  margin: 0px;
}
.sidebar a:link{
  color: #ffffff;
}
.sidebar a:visited{
  color: #ffffff;
}
.sidebar a:hover{
  color: #f65300;
}
.sidebar a:active{
  color: #f65300;
}
.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;
}
.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-topの画像

sidebarの画像

sidebar-bottomの画像

marginとpaddingは、色々数値を変えて、ぴったりな値を見つけましょう。
今回はこれで終わりです。
次回はサイドバー内の「module-*」を編集します。