CSSを書く場所があり過ぎて困る問題

WordPressはCSSを記述できる場所が多数あるので「どこに書いたらいいですか?」という質問があります。

この質問に対する私の回答は「それぞれのメリット・デメリットを理解して、どこに記述するか決めてください」です。

明確な回答が欲しいかもしれませんが「最適解はなく、ケースバイケース」というのが私の考えです。

組み合わせて使ってもよいと思います。

CSSの記述場所

まずはCSSを記述できる場所をリストアップしてみましょう。

私が思い付くのは次の5つです。

  1. カスタマイザー:[外観]>[カスタマイズ]>[追加CSS]
  2. スタイルシート:[外観]>[テーマファイルエディター]>[style.css]
  3. テーマの機能
  4. プラグイン
  5. カスタムHTMLブロック

メリット・デメリット

「テーマのアップデートや変更に対応できるか」を整理してみましょう。

記述場所テーマのアップデートテーマの変更
カスタマイザー×
親テーマのスタイルシート××
子テーマのスタイルシート×
テーマの機能×
プラグイン
カスタムHTMLブロック

親テーマのスタイルシートにCSSを記述することは非推奨ですが、子テーマのスタイルシートであれば問題ありません。

一般的には、HTMLとCSSは分離した方がよいと言われます。

また、HTML文書内にCSSを記述する場合、head要素内に記述することが推奨されています。

WordPressには当てはまらないこともあるので、気にしすぎる必要はありません。

次に「どこに追加されるか」も整理しましょう。

記述場所別ファイルサイト全体特定のページ
カスタマイザー
スタイルシート
テーマの機能
プラグイン

別ファイルにする場合は、link要素を使って読み込みます。

例外はありますが、別ファイルにしない場合は、head要素内にstyle要素を配置してCSSを追加します。

サイト全体に追加する場合は、必要ないページにもCSSコードが追加される可能性があります。

特定のページに追加する場合は、同じCSSコードを複数のページに記述する可能性があります。

分かりやすいよう表にしましたが、テーマやプラグインによるので、詳しく見ていきましょう。

ここでは、塾で紹介されているテーマとプラグインについて解説します。

テーマの機能

CocoonやEmanonを有効にしていると、固定ページ/投稿エディターに[カスタムCSS]が追加されます。

この[カスタムCSS]に入力したCSSは、そのページにのみ適用されます。

このような機能はプラグイン化して欲しと思ってしまいます。

プラグイン化すれば、テーマを変更してもCSSを残すことができるからです。

VK All in One Expansion Unit

Lightningの必須プラグインの一つです。

固定ページ/投稿エディターに[カスタムCSS]が追加されます。

この[カスタムCSS]に入力したCSSは、そのページにのみ適用されます。

CocoonやEmanonとは異なり、Lightningはプラグイン化してくれています。

Simple Custom CSS and JS

管理画面のメニューに[カスタムCSS & JS]が追加されます。

[外部のファイル]にするか[<head>要素内]に追加するかを選べます。

プロ版を購入すると指定したURLにのみ適用することができますが、無料版はサイト全体に適用されます。

Contact Form 7

フォームを作成するさいにHTMLタグが使えるので、style要素を使ってCSSを記述できます。

form要素内に追加されます。

カスタムHTMLブロック

HTMLを記述できるブロックなので、style要素を使ってCSSを記述できます。

body要素内に追加されます。

CSSが反映されない問題

CSSが反映されないという問題も「CSSをどこに書いたらいいか」という質問と関係があります。

この問題を解決するカギは、競合するCSSルールを解決する方法を理解することです。

そもそも、どんなときに競合が発生するか知っていますか?

同じHTML要素の同じプロパティの値を設定するルールを2つ以上つくってしまったときです。

テーマやプラグインもCSSを追加しているので、ルールの競合は起きやすいです。

例えば、Contact Form 7で作成したお問い合わせフォームの送信ボタンの色を変更したいとき、テーマが追加したルールとの間で発生する競合を避けることができません。

では、どのルールが適用されるのか、そのメカニズムをみていきましょう。

まず、セレクターの詳細度が高いルールが適用されます。

詳細度の計算方法は複雑です。

詳細度の高さは、idセレクター、classセレクター、タグセレクターの順ということを最低限覚えておきましょう。

セレクターの詳細度が等しい場合、ルールの出現順がキーになります。

ソースコード上の順番が最後のものが適用されるからです。

ここで「CSSをどこに書いたらいいか」という質問と関係してきます。

CSSの記述場所によって、HTML文書上の順番が異なるからです。

実験してみることをオススメします。

CSSの記述場所でリストアップしたところに、段落の文字色を変えるCSSを追加して、どのルールが適用されるか確認してみると、理解が深まります。

記述場所によって色を変えると分かりやすいです。

ルールが読み込まれた順番は、開発者ツールで確認できます。

[ページのソースを表示]でも出現順が分かります。

その他

テーマのアップデートやテーマを変更したときに影響を受けないよう、テーマのIDやクラスの使用は可能な限り避けた方がよいと思います。

HTMLアンカー(IDの追加)や追加CSSクラスを上手に利用すると、テーマに依存しないセレクターにできます。

参考にした外部サイト

これらのリソースに目を通すと、理解が深まります。

「CSSを書く場所があり過ぎて困る問題」への1件のフィードバック

コメントする