【Twenty Ten】サイドバーのタイトルとデザイン変更

サイドバーが味気ないので、デザインを少しカスタマイズします。デザインやレイアウトのスタイル設定は好みがあるので参考（になるかわかりませんが）程度に書きます。

【変更前のサイドバー画像】

【変更後のサイドバー画像】

まず、ウェジェットごとに枠で囲う形にするためにボーダーをを使います。style.css内の「/* =Widget Areas」にあるwidget-containerの内容を書き換えます。

【変更前：style.css】

.widget-container {
  margin: 0 0 18px 0;
}

【変更後：style.css】

.widget-container {
  margin: 0 0 18px 0;
  border: 1px solid #CCC;
}

サイドバーのタイトルのデザインを変更します。
【変更前：style.css】

.widget-title {
  color: #222;
  font-weight: bold;
}

【変更後：style.css】

.widget-title {
  color: #222;
  font-weight: bold;
  background-color: #EFEFEF;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #999;
}

＊タイトルのフォントサイズを変更する場合下記を追加。
【例】font-size:14px;

サイドバーのリストの位置など細かな変更をします。二つのstyle設定を試してみたので書きます。
【変更前：style.css】

.widget-area ul ul {
  margin-left: 1.3em;
  list-style-type: square;
}

【変更後１：style.css】

.widget-area ul ul {
  margin-left: 1.3em;
  list-style-type: none;
  margin-right: 5px;
  list-style-position: outside;
  list-style-image: url(images/画像名.gif);
}

【追加：style.css】

.widget-area ul ul li{
  margin-bottom: 5px;
  margin-left: 5px;
}

【変更後２】

.widget-area ul ul {
  margin-left: 1.3em;
  list-style-type: none;
  margin-right: 5px;
}
.widget-area ul ul li{
  margin-bottom: 5px;
  background-image: url(images/yajirusi3.gif);
  background-repeat: no-repeat;
  background-position: left 6px;
  padding-left: 10px;
}
#main .widget-area ul ul {
  border: none;
  margin-left: 5px;
  padding: 0;
}

テキストにアンダーラインを入れたいので下記のように変更しました。
【変更前：style.css】

.widget-area a:link,
.widget-area a:visited {
  text-decoration: none;
}

【変更後：style.css】

.widget-area a:link,
.widget-area a:visited {
  text-decoration: underline;
}