« ワールドアパートのPV公開中♪ | メイン | 今夜はスガシカオが心にしみるじぇ。 »

2006年02月11日

サイドバーのカテゴリリストを階層化 - MT備忘録

mt_categorylist.jpgサイドバー(横っちょの細長~いスペースね)にある、カテゴリーの一覧表示を階層構造にしてやろうと前から思ってたけど、ようやくできたっ!

音楽関連のカテゴリが、アジカン、バンブ、エルレ、リップ、スガシカオ、ってあるんだけど、順番がバラバラになっちゃってたので、どーしても「音楽」としてひとまとめにしておきたかった。

でも、それ以外のカテゴリは全部「My soul...」にまとめちゃった。もっとちゃんとイイ感じに分類されてるといいのかもしんないけど、そんなんめんどくさい、ってかあんまり意味ないし。まとめた後は、再構築を忘れずに!

今回、参考にさせていただいたHPはコチラっ!(多謝!)

Techknow Weblog: サブカテゴリを表示するためのタグ
小粋空間: カテゴリーリストをサブカテゴリー表示に切り替える
UL-HTMLタグリファレンス

今回は、階層化ってことで、スタイルシートをちょいといじってます。

もともとのスタイルシートはこんな感じ。

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

このままだと、左側が全部そろっちゃいます↓

mt_categorylist_1.jpg

てことで、2階層目の「ul」タグは、左に少し余白をとるようにします。具体的には、以下を追加しました。

.sidebar ul ul {
margin-bottom: 0px;
}
.sidebar #categories ul {
padding-left: 0px;
}
.sidebar #categories ul ul {
padding-left: 10px;
}

この赤字の部分のおかげで、左に10ピクセルの余白が出来ました。

青字の部分は、「ul」タグの下方に30ピクセルの余白を開けるようにしてありましたが、ここでは不要なので0ピクセルにしてます。これでようやく完成!

・・・長かった。。。

投稿者 noha : 2006年02月11日 19:10 [Blog]

トラックバック

このエントリーのトラックバックURL:
http://noha.piyo.to/cgi/mt/mt-tb.cgi/390

コメント

コメントよろしこ




保存しとく?


※句読点のないコメントはスパムとしてハジかせていただきますので、ご了承くださいませ。
 

© noha.piyo.to