まず、「左右サイドバーと本文ブロックの構成」の復習からです。
サイドバーは、div.layoutContensAのなかのdiv.skinSubA, div.skinSubAreaの下、およびdiv.layoutContensBのなかのdiv.skinSubB, div.skinSubAreaの下に、同じ構造で入っていることを見てきました。そのブロックは、div.skinMenu/div.（※各サイドバークラス）の形でクラス指定されています。
概念図は、右図の通りです。
それぞれのブロックへのアクセス方法
このクラス設定により、全サイドメニュー共通、幅の狭いサイドメニュー共通、ワイドサイドメニュー共通、個別のサイドメニューそれぞれにデザイン設定ができるようになっています。
概念図では省略していますが、div.skinSubA, div.skinSubAreaおよびdiv.skinSubB, div.skinSubAreaは、内側にdiv.skinMenu2をもつ2重構造になっています。
それを踏まえて、それぞれの設定へのアクセス方法を見てゆきます。
全サイドメニュー共通の設定
div.skinSubArea { /* 全サイドメニュー共通の設定。外側のブロック */
/* ここにスタイルを記述 */
}
div.skinSubArea2 { /* 全サイドメニュー共通の設定。内側のブロック */
/* ここにスタイルを記述 */
}幅の狭いサイドメニュー共通の設定
div.skinSubB { /* 幅の狭いサイドメニュー共通の設定 */
/* ここにスタイルを記述 */
}ワイドサイドメニュー共通の設定
div.skinSubA { /* ワイドサイドメニュー共通の設定 */
/* ここにスタイルを記述 */
}個別のサイドメニューへの設定
div.（※各サイドバークラス） { /* 各サイドメニュー個別の設定 */
/* ここにスタイルを記述 */
}※各サイドメニュークラス
デフォルトでタイトルに背景グレーの帯がひかれているメニューについて、各サイドメニューのクラスを表にしてまとめてみました。
| メニュー名 | クラス名 |
|---|---|
| テーマ一覧 | themeMenu |
| 最近の記事一覧 | recentEntriesMenu |
| 月別アーカイブ | archiveMenu |
| カレンダー | calendarMenu |
| ブックマーク | bookmarkMenu |
| ランキング | rankingMenu |
| プロフィール | ProfileMemu |
| 最近のコメント | recentCommentMenu |
| 読者一覧 | readerMenu |
| お気に入りブログ | favoriteMenu |
これがわかっていれば、「各メニューを画像にする」、「各メニュー名の前にアイコンを配置する」といった設定も簡単にできますね。
訂正（2011年12月27日）
幅の狭いサイドメニュー（div.skinSubB）、サイドサイドメニュー（div.skinSubA）へのアクセス方法が逆になっていました。すみません！ 本日訂正いたしました。