Twenty Ten のサイドバーのカスタマイズ

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

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

Twenty Ten のサイドバー

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

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

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

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

ウィジェットエリア

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の継承も面倒な部分もあるので、よく入れ子の状態を確認してあげるといいのでは、と思います。

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

Twenty Ten のサイドバーのカスタマイズ」への4件のフィードバック

  1. hana

    サイドバーの「カテゴリー」「最近の投稿」「アーカイブ」などの文字を小さくするにはどうすればよいのでしょうか?
    本文の文字は小さくできたのですが、さっぱりわかりません。
    ちょっとだけ小さくしたいのです、

    お時間がございましたら教えてください。
    どうぞよろしくお願いいたします。

    返信
    1. webourgeon 投稿作成者

      hanaさん

      お返事遅くなりました。

      Twenty Tenの場合ですと、サイドバーのタイトルは、h3.widget-titleにフォントサイズを指定してあげれば変える事ができます。
      他にフッターなどでウィジェットを使っている場合などにはそちらにも共通で適用されてしまいますので、
      サイドバーのID #primary を指定してあげるといいと思います。

      うまくいかないようでしたら、またコメントくださいね。

      返信
      1. hana

        コメントありがとうございます。
        style.cssの下のほうに、  /* =Widget Areas  がありますが、その中でしょうか?
        boldをnormalには変更できましたが、フォントサイズの変更がわかりません。
        上のほうの /* =Fonts  の中でしょうか?
        それとも、sidebar.php の中でしょうか?

        私は言語がわからずに作っています。
        変更できたのは、ヘッダ画像の差し替え、背景の差し替え、書体の変更(メイリオに)、サイドバー以外のフォントサイズの変更、透明ファビコンの設置、と、これだけです。

        もしご迷惑でなければ、どの部分にどのように記述をするのかをお願いいたします。

        返信
        1. webourgeon 投稿作成者

          hanaさん、

          もしかしたらテーマの編集は管理画面から直に行なっていますか?
          もちろんそれでも出来るのですが、子テーマを作って、必要部分だけ編集していくようにするとよいと思います。
          もし、記述がおかしくなってもすぐにもとに戻せますし、バージョンアップに伴ってせっかくの変更を上書きされてしまうこともありません。
          このブログでも子テーマについて触れていますし、codexや色々なブログなどでも取り上げられているので、ぜひ一度子テーマについて調べてみてください。

          今回の質問の変更については、子テーマを作って、子テーマのstyle.cssでh3.widget-titleに好きなフォントサイズの指定を書いてあげれば大丈夫です。

          またブラウザの機能(firebug)などを使うと、どの部分にどのようなスタイルが書かれているか調べることが出来ますので、そのようなものを併用しながら、少しずつ作って行くのがよいのではないかと思います。

          >私は言語がわからずに作っています。
          デザインなど、CSSを変えたいときはstyle.css、出力されるHTMLそのものを変更したいときは、該当するテーマのファイル(php)を変更します。
          「テンプレート階層」について調べると色々なことが分かってくるはずです。

          がんばってくださいね。

          返信

コメントをどうぞ♪