テンプレートPart5：ラベルのカスタマイズ

最近、ウィジェットのカスタマイズ方法を知りました。
いまさらって感じなんですが、「HTMLの編集」ページにある「ウィジェットのテンプレートを展開」にチェックをいれれば、ウィジェット内のタグを見ることができるようになりました。

ここをいじれば、日付とタイトルの位置を変更したりできそうですな！

今回は、サイドバーにあるラベルをカスタマイズしました。

とりあえずいつものようにググってソースコードを探してきます。

ラベルリストの表示法いろいろ
http://www.kuribo.info/2009/01/blog-post.html

こちらのサイトを参考にして作成したCSSがこちら↓

/* Label Content
----------------------------------------------- */
.Label ul{
   margin-left: -35px;
   line-height:　100%;
}
.Label li {
  float:left;
  padding:5px;
　list-style-type:none;
  background-color: #333333;
  color: #fff;
  border: 1px solid #fff;
}
.Label a{
  color: #fff;
}
div.clear {
  clear:both;
}

メトロ風な表示を意識してカラーの背景に白字のラベルにかすたまいずしました。
リストにある黒丸(マーカー)は邪魔なので非表示です。

完成したのがこちら↓

左が以前のラベル、右が新しいラベルのデザインです

大分メトロらしいものができたと思います。
次は、ブログページ以外の作成でもしようかな