WordPressのCSSセオリー

IDIA.JP > レポート > WordPressのCSSセオリー
IDIA.JP

WordPressにおけるCSSの特質を知ると、コーディングの効率を高めたり、テーマの再利用性や汎用性を向上させたりすることができる。また「editor-style.css」を導入して編集画面と表示画面とを一致させると、デザインクオリティの維持や精度の高いマークアップが期待できる。WordCamp Kobe 2013のセッション「知っておくべきWordPressのCSSセオリー」の発表資料をベースに加筆。

WordPressのCSS

WordPressのCSSが特殊な仕様なわけではない。WordPressで必須とされるセレクタや、テンプレートタグによって生成されるセレクタなどを知って、「正しいコーディングのフロー」に従うだけでよい。

正しいコーディングのフローとは?

  1. 情報収集(提示すべき情報をあつめる)
  2. 情報設計(文書の構造と提示の仕方を考える)
  3. マークアップ(文書構造に基づき各ページをHTMLでマークアップする)
  4. 視覚化(デザイナーがデザインする)
  5. CSSコーディング(デザインに基づきコーダーがコーディングする)

WordPressのデザインを決める3つの要素

WordPressは

  • テンプレートファイル(構造の決定)
  • テンプレートタグ(データの要求)
  • CSS(デザインの指定)

を組み合わせて見栄えを作成する。WordPressはダッシュボードからCSSやウィジェットを編集することで、テーマを作らずとも大きく見栄えを変更することもできるが、独自性の高いデザインのWebサイトを作るにはテーマを作る必要がある。

WordPressのテーマはHTML、CSS、PHPなどの知識があれば、大きな制限もなく自由に作ることもできる。しかし、多くのWordPressテーマで採用されている基本的なルール(必須のフックやテンプレートタグ、CSSセレクタなど)に基づいてテーマを作ると、いくつかのメリットがある。

基本的なルールに基づくメリット

  • バージョンアップに速やかに対応できる
  • スマホサイトや携帯サイトの作成が容易になる
  • テーマやその構成要素をほかのWebサイトでも使うことができる
  • テーマの頒布が可能になる
  • チームでテーマの制作作業をすることができる

WordPressのCSSセオリー

WordPressで必須のCSS

テーマの情報
テーマの名前や説明、作者名など
画像やブロック要素の整列
.aligncenter、.alignleft、.alignright、.alignnone
キャプション付き画像
.wp-caption、.wp-caption img、.wp-caption p.wp-caption-text
デフォルトで生成されるクラス
カテゴリーリスト関連(.categories、.cat-item、.current-cat、.current-cat-parent、.children)
ページリスト関連(.pagenav、.page_item、.current_page_item、.current_page_parent、.current_page_ancestor )
ウィジェット関連(.widget、.widget_text)

テンプレートタグが生成するセレクタ

WordPressのテンプレートタグは、「何かを表示したいとき」や「データを取得したいとき」に使う。CSSでは、条件でデザインを変えたい場合などに、ユニークなセレクタを取得するために使うことができる。

条件でデザインを変えるのに有用なテンプレートタグ

カテゴリーで
get_the_category()、get_category_parents()、post_class()
タグで
get_the_tags()、post_class()
テンプレートファイルの種類で
body_class()、post_class()
コンテンツを直接指定して
the_ID()
著者で
the_author()
時間で
the_time()

一般的なWebサイトで使うと思われるたいていの条件分岐は、独自のPHPなどを書かずともテンプレートタグで実装することができる。

WordPressの編集画面と表示画面の一致

Webサイトのデザインを2つに分ける

このサイトのデザイン
このサイトのデザイン
分け方とその詳細
説明デザイン(≒マークアップ)をする人
共通部ヘッダー、フッター、サイドバーなどWebデザイナー
コンテンツ部投稿の内容、固定ページの内容など当初はWebデザイナー、公開後は利用者
このサイトのデザインを2つに分けると
このサイトのデザインを2つに分けると

利用者はHTMLやCSSがわからない

利用者がHTMLやCSSの知識を十分にもっているとは限らない。この場合、ダッシュボードでは「ビジュアルエディタ」を使うことになるが、編集画面の見た目と実際の表示画面の見た目は一致していない

editor-style.cssの導入

editor-style.cssを使うと、「編集画面での見た目」と「表示画面での見た目」とを一致させることができる。

editor-style.css

editor-style.cssの使い方

editor-style.cssには、大きく分けて2通りの使い方がある。

その1:editor-style.cssを別に作る場合
  1. 「functions.php」に「add_editor_style();」を記述
  2. 「editor-style.css」に編集画面の見た目が表示画面のものと同じになるようにCSSを記述
  3. 「editor-style.css」をテーマファイルのルートに作成
その2:公開画面用のCSSを読み込む場合
  1. 「functions.php」に「add_editor_style(‘style.css’);」と「add_editor_style(‘editor-style.css’);」を記述
  2. 「editor-style.css」をテーマファイルのルートに作成
  3. 「editor-style.css」で編集画面の表示を調整

また、読み込んだ公開画面用のCSSにはオリジナルのクラスやIDが設定されている事が多い。次の記述で適用できる。

function custom_editor_settings( $initArray ){
$initArray['body_id'] = 'id';
$initArray['body_class'] = 'class';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

functions.phpに記述する。

編集画面と表示画面とが一致すると

編集画面と表示画面とが一致すると、利用者が文書構造を視覚的に意識するようになる。最終的には「見出し」や「段落」、「リスト」などを適切に使用するようになり、専門家でなくとも精度の高いマークアップをすることが可能になる。

この流れを作るためにも、Webデザイナーはデザインの段階で「文書構造を意識しやすいデザイン」を実践する必要がある

精度の高いマークアップのメリット
ビジュアルデザイン的メリット
みやすさの向上、サイト全体の統一感アップ、デザイナーの意図を正しく反映
情報デザイン的メリット
総合的な伝わりやすさの向上、情報の再利用性向上、SEO

WordPressでのCSSコーディングに関するTips

コーディングガイドラインをつくる

コーディングガイドラインがあると、コーディング効率の向上や品質の均質化が期待できる。しかし、案件毎にコーディングガイドラインを文書化するのは中小の制作会社には大きな負担となる。そこで、コーディングガイドラインの代替として、「サイト内で使用すると思われるすべての要素を含んだページ」をはじめに作ることをおすすめする。
WordPressではテンプレートファイル「index.php」をそれに充てたり、コーディングガイドライン用に投稿や固定ページを設けるなどすれば、以後の制作の効率化に役立つであろう。

このサイトのコーディングガイドライン
このサイトのコーディングガイドライン

バージョンアップをフォローする

WordPressがバージョンアップして、これまでより簡単にコーディングできるようになることがある。一方で、これまで使っていたコードが非推奨になったりすることもある。WordPress本体のみならず、使用しているプラグインのバージョンアップ情報をきちんと把握し、理解することで「汎用性」や「再利用性」のある寿命の長いテーマを作るよう心がける。

コーディングのフローから外れないようにする

上述の「正しいコーディングのフロー」を再掲する。

  1. 情報収集(提示すべき情報をあつめる)
  2. 情報設計(文書の構造と提示の仕方を考える)
  3. マークアップ(文書構造に基づき各ページをHTMLでマークアップする)
  4. 視覚化(デザイナーがデザインする)
  5. CSSコーディング(デザインに基づきコーダーがコーディングする)

WordPressなどCMSを利用したWeb制作では、CMS固有の制限や特質に縛られてしまい、デザインありきで制作が進んだり、情報の収集が制作の後半になってしまう場合があったり、最悪のケースでは情報設計がなされないまま制作が進むケースも少なくない。コンテンツの再利用性を高め、精度の高いマークアップを維持するためにも、「正しいコーディングのフロー」を保てるよう努めたい。

まとめ

  • WordPressにおけるCSSの特質を知ると、コーディングの効率が向上したり、再利用性や汎用性のあるCSSやテーマを作ることができる
  • 「editor-style.css」を使うと、デザインクオリティの維持や精度の高いマークアップが期待できる

参考

記事のデータ

公開日2013年6月18日
カテゴリー
タグ
関連する記事

記事を共有する