ウィジェットのスタイリング

認めよう。WordPress（ワードプレス）最高！私はワードプレスのすねをかじって生きている。毎日ワードプレスを使って仕事をしているので、何か新しい動きがあれば必ず勉強する。そういうわけで、WordPress 2.2にウィジェット機能が内蔵されたという先日の発表を目にした私は、誰でも自由に使えるこのクールなウィジェット内蔵サイドバーをスタイリングする方法を皆さんに紹介していこうと思う（知らなかった人のために言っておこう。これらのウィジェットはかつてプラグインであったため、自動的な機能として付随しているわけではなかった）。

勘違いしないで欲しい。私はサイドバーで「ウィジェットを使える状態」にするためのチュートリアルを提供するわけではない。…こういう類のチュートリアルは腐るほどあるし、今さら同じものを再発明する理由は見当たらないからね。

私が紹介したいのは、単純にサイドバーを「ウィジェット化」してしまい、それに伴ったスタイリングの影響を考えなかったときに生じる問題点だ。

いいかい、理由が何であれ、ウィジェットはデフォルトではウィジェットの内容を表示するためにネスト化されたリストを利用している。ウィジェット内蔵型サイドバーが出力するソースがどんな感じなのかを以下に記載してみる。

<div id=”sidebar”>
<ul>
<li>
<h2>Widget Header（ウィジェットがヘッダーを含んでいると仮定）</h2>
*ここに別のネスト化されたリスト、イメージあるいはフォーム等がくるかもしれない。すべてに対応する準備を整えるのは君の仕事だ。*
</li>
<li>
<h2>Another Widget Header（別のウィジェットのヘッダー）</h2>
*ここにその他諸々、上記を確認。
</li>
</ul>
</div>

*気づいたかもしれないが、サイドバーに内蔵するウィジェットの種類を予測するには占い師に頼る必要があるよね。でも、とりあえず、すべてのウィジェットに対して対応できるように準備をしておくこと。また、自分のサイドバーが上記のコードとは異なるコードを出力していることにも気づいたかもしれない。これはウィジェットをコールする前後でどのようにコードを構造化したのかによって左右されるんだ。1つや2つでは済まないので、絶対にブログのhtmlソースを見て、ウィジェットが出力する構造を確認しておきたい。そうしたら、その構造に基づいてスタイリングしよう。とりあえず今は上記のコードで話を進めていこう。

前提として、サイドバーのスタイリングを済ませておくこと。CSSの階層構造をこれから活用していく。

次の要素は順序のないリスト、<ul>だ。次にスタイリングする方法を記載する（そう、CSSファイルの編集が絡んでくる。）

#sidebar ul {
attributes;
}

次に、リスト・アイテム<li<に対処する。

#sidebar ul li {
list-style-type: none;
other attributes;
}

list-style-type を「none」に変えたことに注意。各ウィジェットの隣に中黒を置きたいなら、忘れずに加えよう。

次に、ヘッダー<h2<を取り扱う。

#sidebar ul li h2 {
attributes;
}

最後に、サイドバーのウィジェットに表示される各種エレメントのスタイリングに取り掛かろう。

#sidebar ul li img
#sidebar ul li form
#sidebar ul li p
#sidebar ul li a （サイドバーのリンクで他の人と差をつけないなら）
#sidebar ul li ul
#sidebar ul li ul li
#sidebar ul li ul li ul
#sidebar ul li ul li ul li

最後の2行は必要なさそうに見えるが、サブカテゴリーやサブページがワードプレスにリストアップされていることを考えると、ネスト化されたリストは複数必要になってくる。… つまり、君にはこれらを網羅するスタイルが必要なのだ。ここが大事なポイント…先に考えておこう、先手必勝の法則ここにあり。様々な可能性のすべてに対応していないテーマがどれぐらいあるのかは全く想像つかない。… 認めるのは忍びないがが、私のテーマにも該当するものが幾つかある。しかし少し計画を練れば、君のテーマでもこういったウィジェットに対応させることができるんだ。さぁ、早速取り掛かろう！テーマを直そう！

ああ、あとこの記事に書いている内容がチンプンカンプンでもどうかご心配なく。この記事はブログデザイナーや、気分よくワードプレスのテーマを使っている人達を対象にしている:-) ワードプレスのテーマを使った制作や作業の詳細は、wpdesigner.com（wpデザイナードットコム）のチュートリアルシリーズ、あるいはブライアン・ガードナー（パート1 – パート2）で確認しよう。ウィジェットに関する詳細はAutomattic（オートマティック）のこのページを参照。

[ネイサン・ライスはブロガー兼フリーランスのウェブデザイナーである。ネイサンはRockinThemes.com（ロッキンテーマドットコム）に協賛し、Performancing（パフォーマンシング）とWordPressThemes.com（ワードプレステーマドットコム）に投稿している。]

[原文へ]

0件のコメントがあります。