Twenty TenのカスタマイズをCSSから考えていますが、前回はサイドバーに移り、まずはサイドバーで使われる事の多いウィジェットの使い方などをみてみました。

いよいよカスタマイズの話に入っていきたいと思います。この記事の前半には今までの記事でサイドバーに関係のある所もピックアップしてあります。

Twenty Ten のサイドバー

まずは、サイドバーの大きな囲みについてです。
Twenty Ten のサイドバーは、前にも見た通り、「primary」「secondary」というidのついたdivで囲まれています。
Twenty Ten テーマの構成（レイアウト）-1とか、Twenty Tenのレイアウトを変える(1)などに詳しく書いてありますので、よかったら読んでみて下さい。

Twenty Ten のサイドバーの位置変更

Twenty Ten のサイドバーの位置を変えたり、カラム数を変えたり、ということについては、

• サイドバーの幅調整→Twenty Tenのレイアウトを変える(2)〜コンテンツ幅の調整
• 2カラムのままサイドバーを左にする→Twenty Tenのレイアウトを変える(3)〜サイドバーを左にする
• 右サイドバー2つの3カラム→Twenty Tenのレイアウトを変える(4)〜3カラムにする
• コンテンツ中央の3カラム→Twenty Tenのレイアウトを変える(5)〜コンテンツ中央の3カラムにする

などで書いてきましたので、興味のある方はそちらを読んでみて下さい。

ウィジェットエリア

Twenty Tenではウィジェットエリアは#primaryと#secondaryに対応し、「widget-area」というクラス名がつきます。例えば、ウィジェットエリア1はこのように始まります。

<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
...

ひとつひとつのウィジェットはリストでマークアップされています。そして、それぞれのウィジェットによって色々なidやclass名が振られますが、共通で「widget-container」というclass名がつきます。

<ul class="xoxo">
<li class="widget-container>ウィジェット</li>
<li class="widget-container>ウィジェット</li>
<li class="widget-container>ウィジェット</li>
</ul>

ウィジェットのタイトル

ウィジェットのタイトルはh3でマークアップされ、「widget-title」というクラス名がつきます。

<h3 class="widget-title">

サイドバー（ウィジェット）のデザインを変える

以上のことをまとめると、サイドバーのデザインを変える事ができます。

例えば、primaryのウィジェットのタイトルの横にボーダーをつけるには、

#primary .widget-area .widget-title{
border-left: 5px solid #333; 
}

などと指定してあげればよい訳ですね。

リストの入れ子に注意！！

Twenty Tenではウィジェットの一つ一つがリストでマークアップされています。ウィジェットではカテゴリーの一覧や、最近の投稿、アーカイブ、などなど、リストで表すものを表示する事が多いですね。単純なリストも、大きなリストに入れ子になってしまいますので、CSSでスタイルを設定するときなど、気をつけなければなりません。

<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<li class="widget-container>
<h3 class="widget-title">最近の投稿</h3>
<ul>
<li>最近の投稿1</li>
<li>最近の投稿1</li>
<li>最近の投稿1</li>				
</ul>
</li>
...
...
...</ul>
</div>

こんな感じですから、この「最近の投稿」などのリストにスタイルを設定しようとして、うっかり、

#primary li{...}

などどしてしまうと、
「あれあれ？？」
という事になりかねません。
カテゴリーなどで、子カテゴリーを階層表示なんかしてしまうとさらに複雑に。。

リストの入れ子は、CSSの継承も面倒な部分もあるので、よく入れ子の状態を確認してあげるといいのでは、と思います。

次回は各ウィジェットに当てられるクラス名を一覧にしてみたいと思います。