WordPressはCSSを記述できる場所が多数あるので「どこに書いたらいいですか？」という質問があります。
この質問に対する私の回答は「それぞれのメリット・デメリットを理解して、どこに記述するか決めてください」です。
明確な回答が欲しいかもしれませんが、「最適解はなく、ケースバイケース」というのが私の考えです。
組み合わせて使ってもよいと思います。
CSSの記述場所
まずはCSSを記述できる場所をリストアップしてみましょう。
私が思い付くのは次の５つです。
- カスタマイザー：［外観］＞［カスタマイズ］＞［追加CSS］
- スタイルシート：［外観］＞［テーマファイルエディター］＞［style.css］
- テーマの機能
- プラグイン
- カスタムHTMLブロック
メリット・デメリット
「テーマのアップデートや変更に対応できるか」を整理してみましょう。
| 記述場所 | テーマのアップデート | テーマの変更 |
|---|---|---|
| カスタマイザー | 〇 | × |
| 親テーマのスタイルシート | × | × |
| 子テーマのスタイルシート | 〇 | × |
| テーマの機能 | 〇 | × |
| プラグイン | 〇 | 〇 |
| カスタムHTMLブロック | 〇 | 〇 |
親テーマのスタイルシートにCSSを記述することは非推奨ですが、子テーマのスタイルシートであれば問題ありません。
一般的には、HTMLとCSSは分離した方がよいと言われます。
また、HTML文書内にCSSを記述する場合、head要素内に記述することが推奨されています。
WordPressには当てはまらないこともあるので、気にしすぎる必要はありません。
次に「どこに追加されるか」も整理しましょう。
| 記述場所 | 別ファイル | サイト全体 | 特定のページ |
|---|---|---|---|
| カスタマイザー | 〇 | ||
| スタイルシート | 〇 | 〇 | |
| テーマの機能 | 〇 | ||
| プラグイン | 〇 | 〇 | 〇 |
別ファイルにする場合は、link要素を使って読み込みます。
例外はありますが、別ファイルにしない場合は、head要素内にstyle要素を追加してCSSを記述します。
サイト全体に追加する場合は、必要ないページにもCSSコードが追加される可能性があります。
特定のページに追加する場合は、同じCSSコードを複数のページに記述する可能性があります。
分かりやすいよう表にしましたが、テーマやプラグインによるので、詳しく見ていきましょう。
ここでは、塾で紹介されているテーマとプラグインについて解説します。
テーマの機能
CocoonやEmanonを有効にしていると、固定ページ／投稿エディターに［カスタムCSS］が追加されます。
この［カスタムCSS］に入力したCSSは、そのページにのみ適用されます。
このような機能はプラグイン化して欲しと思ってしまいます。
プラグイン化すれば、テーマを変更してもCSSを残すことができるからです。
Simple Custom CSS and JS
管理画面のメニューに［カスタムCSS & JS］が追加されます。
［外部のファイル］にするか、［<head>要素内］に追加するかを選べます。
プロ版を購入すると指定したURLにのみ適用することができますが、無料版はサイト全体に適用されます。
VK All in One Expansion Unit
Lightningの必須プラグインの１つです。
固定ページ／投稿エディターに［カスタムCSS］が追加されます。
この［カスタムCSS］に入力したCSSは、そのページにのみ適用されます。
CocoonやEmanonとは異なり、Lightningはプラグイン化してくれています。
Contact Form 7
フォームを作成するさいにHTMLタグが使えるので、style要素を使ってCSSを記述することができます。
form要素内に追加されます。
カスタムHTMLブロック
HTMLを記述できるブロックなので、style要素を使ってCSSを記述することができます。
body要素内に追加されます。
CSSが反映されない問題
CSSが反映されないという問題も、「CSSをどこに書いたらいいか」という質問と関係があります。
この問題を解決するカギは、競合するCSSルールを解決する方法を理解することです。
そもそも、どんなときに競合が発生するか知っていますか？
同じHTML要素の同じプロパティの値を設定するルールを２つ以上つくってしまったときです。
テーマやプラグインもCSSを追加しているので、ルールの競合は起きやすいです。
例えば、Contact Form 7で作成したお問い合わせフォームの送信ボタンの色を変更したいとします。
このボタンの色は、カスタマイザーで設定したボタンの色が反映されます。
したがって、送信ボタンの色を変えたいときは、テーマが追加したルールとの間で発生する競合を避けることができません。
では、どのルールが適用されるのか、そのメカニズムをみていきましょう。
まず、セレクターの詳細度が高いルールが適用されます。
詳細度の計算方法は複雑です。
詳細度の高さは、idセレクター、classセレクター、タグセレクターの順ということを最低限覚えておきましょう。
セレクターの詳細度が等しい場合、ルールの出現順がキーになります。
ソースコード上の順番が最後のものが適用されるからです。
ここで、「CSSをどこに書いたらいいか」という質問と関係してきます。
CSSの記述場所によって、HTML文書上の順番が異なるからです。
実験してみることをオススメします。
CSSの記述場所でリストアップしたところに、段落の文字色を変えるCSSを追加して、どのルールが適用されるか確認してみると、理解が深まります。
記述場所によって色を変えると分かりやすいです。
ルールが読み込まれた順番は、開発者ツールで確認できます。
［ページのソースを表示］でも出現順が分かります。
その他
テーマのアップデートやテーマを変更したときに影響を受けないよう、テーマのIDやクラスの使用は可能な限り避けた方がよいと思います。
HTMLアンカー（IDの追加）や追加CSSクラスを上手に利用すると、テーマに依存しないセレクターにできます。
参考にした外部サイト
これらのリソースに目を通すと、理解が深まります。
非常に面白い記事でした！
特に表になっているところが分かりやすいです。
ありがとうございます。