ステップ３ – サイドバーのスタイリング

これまではサイドバーの PHP 関数について説明していくつか変更してきた。サイドバーの外観はまだとても簡単なものなので、今度はこれをスタイリングしていく。

おぼえていると思うが、サイドバーは順序なしのリストで構成され、各リスト項目が一つのセクションになっている。 これら各セクションはたいてい見出しとそれに続く別の順序なしリストで構成されている。 デフォルトでは順序なしリストは黒丸で始まるようになっている。 これは決して見出しに望むものではない。

最初のステップは一番上のリスト階層から黒丸を取り除くことだ：

残念なことに、こうするとサブリストを含むすべての順序なしリストから黒丸が取り除かれてしまう。 もう一つスタイルをつけるとこの問題は解決できる：

これによってサブリストを持つ順序なしリストに黒丸をつける。 ここではリストのマークとしてイメージを使用し、イメージが見つからない場合は白丸を表示するようにしてある。

これではリストマークが左に寄りすぎてよくないし、階層の字下げもない。 その原因は前回のガイドで導入したすべてのマージンをゼロにリセットする全体的なスタイリングにある。 次のスタイルを追加すればすべてもとに戻る：

これで望み通りになった：

覚えておいてほしいのだが、これを含めすべてのスタイルは最適化されているわけではない。 これは WordPress を理解するためのガイドであり、必要なだけ冗長になる。 最小最適化された CSS コードを書くためのガイドではない。

では次に、このサイドバーと見出しにいくつか色とボーダーを追加してみよう。

複雑に見えるが次のような変更として要約できる：

• サイドバーの背景と見出しに色を追加（３、４、１０）
• サイドバーの周りと見出しの上下にボーダーを追加（５、１１、１２）
• 見出しのフォントを 1.2em に設定。すべてのブラウザで基準となる。（１３、１４）
• もっと間を空けるため見出しのマージンとパディングを変更（１５、１６）

スタイリングはほぼ完成しているが、まだスペースを調整することができる。 一番分かりやすい変更は見出しと前のリストの間にもっとスペースを入れることだ。 見出しの上（top）にマージンを追加することもできるが、そうすると一番上の見出しが下がってしまい見てくれがよくない。 かわりに、リストスタイルには見出しの下（bottom）にマージンを追加してみよう：

これでうまくはいくのだが、サブリストを含むすべてのリストにマージンが導入されてしまう：

こうしたサブ-サブ-リストのマージンをリセットする必要がある。

これですべての見栄えが良くなった：