ワードプレス　CSSはどこに書く？３つの方法とそのメリット・デメリット

2021年7月12日

ワードプレスを独自のCSSでカスタマイズするとき、どこにCSSを書くのか？

方法は大きく３つあります。

1. 子テーマのstyle.cssに記述する
2. テーマカスタマイザーの追加CSS欄に記述する
3. プラグインを使う

本記事では、それぞれの方法とメリット・デメリットについて解説します。
あなたに合った方法を使いましょう。

親テーマのstyle.cssには記述しない

実は冒頭あげた３つの方法以外にも親テーマのstyle.cssに記述する、という方法もあります。

子テーマのstyle.cssを使う理由にもなりますが、親テーマのstyle.cssに記述するとテーマのアップデートに伴って消えてしまうので使わない方がよいでしょう。

CSSを記述する３つの方法

今回紹介する３つの方法であれば、どの方法でも親テーマのアップデートでCSSが消されてしまうことはありません。

具体的な手順をテーマTwenty Seventeenで解説します（テーマによる手順の差はありません）。

子テーマを利用する

子テーマのstyel.cssに記述します。

当たり前ですが前提条件として、次の状態でないと使えません。

• 親テーマと子テーマの両方がインストールされている
• 子テーマが有効化されている

子テーマについての記事はこちらがおすすめです。

子テーマのstyle.cssへ記述する手順

１．ダッシュボードメニューの外観＞テーマエディター　を開ける

２．CSSを子テーマstyle.cssに記述する

①子テーマのstyle.cssであることを確認
②子テーマのコメント（/* ～ */）の下に記述する
③”ファイルを更新”で確定

子テーマstyle.cssに記述するメリット

• style.cssという別ファイルなので専用エディターで編集することができる
• サイトのカスタマイズ情報を子テーマのファイルに集約することで整理ができる

これらのメリットは、比較的カスタマイズの規模が大きい場合に力を発揮します。

色を少し変えてみよう、とか、フォントのサイズを調整してみよう、といったちょっとしたカスタマイズであれば必要ありませんが、例えば、

・サイトのレイアウトを大幅に変更したい
・レシポンシブ対応のために、カット＆トライをしながらデザインを詰めていきたい

といった場合はカスタマイズ作業に時間がかかることから、サイトの工事中という状態となってしまいます。

それを避けるために、公開中のサイトでなく自分のパソコンのローカル環境の中でカスタマイズ作業をすることが多くなります。

ローカル環境の場合、style.cssファイルをコーディング専用エディター（vs codeなど）で編集して保存するだけですぐにサイトのデザインを確認できます。

また、専用エディターを使用した方がミスが少なく記述するスピードも速いこともメリットとなるでしょう。

このようにがっつりカスタマイズ作業をする人は、当然style.cssだけでなく、functions.phpやテンプレートファイルといったPHPを記述することもあるでしょう。

こういったときは、カスタマイズ情報は子テーマのメインファイルであるstyle.cssに記述することで、情報の集約化され整理もしやすくなるのです。

子テーマstyle.cssに記述するデメリット

• 子テーマが必要となる
• ワードプレスの管理画面では、編集中のデザインのプレビューができない
• プラグインのCSSの書き換えはやりにくい

最大のデメリットとしては、子テーマが必要となることです。
子テーマがないテーマの場合、あらかじめ子テーマを作成する必要がある、ということですね。

あとの２つのデメリットについては、後述します。

テーマカスタマイザーの追加CSS欄に記述する

テーマカスタマイザー（ダッシュボードの外観＞カスタマイズ）の追加CSS欄を使います。

子テーマである必要はありません。

テーマカスタマイザーの追加CSS欄への記述手順

１．追加CSS欄を開ける

①ダッシュボードメニュー　外観＞カスタマイズ　を開ける
②”追加CSS”をクリックする

２．CSSを記述して公開する

①CSSを記述する
②”公開”をクリックする

※このとき、公開前に画面右のサイトのプレビュー画面でCSSの見映えを確認することができます。

テーマカスタマイザーの追加CSS欄を使うメリット

• プレビューで確認できる
• 子テーマやプラグインが必要ない
• CSSの書き換え優先度が高い

最初の２つのメリットは説明不要でしょう。

3つ目のメリットは後述します。

テーマカスタマイザーの追加CSS欄を使うデメリット

• CSS記述欄が小さく長いコードが読みにくい
• 専用エディターでのコーディング編集ができない

子テーマを使用するメリットの反対といえるでしょう。したがって、比較的小規模のカスタマイズ向けといえます。

プラグインを使う

ここではプラグインとしてSimple CSS and JSを使います。

ほかにもSimple CSSなどのプラグインもありますが、有効インストール数と更新時期が比較的最近なのでこちらを選びました。

CSSだけでなくJSの記述もできる機能もあるので便利です。

Simple Custom CSS and JSへのCSS記述手順

１．プラグインをインストール・有効化する

２．カスタムCSSの記述エディターを開ける

ダッシュボードメニューのカスタムCSS＆JS＞カスタムCSSの追加　をクリックします。

３．CSSを記述して公開する

①CSSを記述する
②タイトルを記述する（任意。わかりやすい名前をつける）
③”公開”をクリックする

Simple Custom CSS and JSを使うメリット

• 子テーマが必要ない
• CSSを分類してリスト化できる
• JS（Javascript）の記述も可能

子テーマがないテーマを使用している場合、子テーマを作成するよりはプラグインを導入する方が簡単です。

したがって、大規模なカスタマイズでない場合は、プラグインを利用するのも１つの手段でしょう。

Simple Custom CSS and JSならば、CSSの記述場所が小さくて読みにくい、といった追加CSS欄への記述のデメリットもなく、CSSごとにタイトルをつけて公開しておけば整理もできるメリットもあります。

以上のことから、子テーマstyle.cssを使うほどではない、中規模なカスタマイズをするのに向いているといえます。

あと、CSSとは関係ありませんが、Simple Custom CSS and JSの場合は、簡単にJavascriptも記述できるのもメリットですね。

Simple Custom CSS and JSを使うデメリット

• プレビューができない
• プラグインが増える
• 専用エディターでの編集ができない

説明は不要と思いますので割愛いたします。

３つの方法のCSS適用優先順位

今回あげた３つの方法を含めてワードプレスでCSSを読み込む順番は次のようになります。

親テーマstyle.cssのCSS
↓
子テーマstyle.cssのCSS
↓
Simple Custom CSS and JSのCSS
↓
追加CSS欄のCSS

実例として、テーマTwenty Seventeenにおいて、サイトタイトルの文字色を変更のCSSを下記のようにそれぞれ同時に記述してみました。

記述場所	記述CSS	サイトタイトル色
親テーマのstyle.css	color: #000;	ホワイト
子テーマのstyle.css	color: #f00;	レッド
Simple Custom CSS and JS	color: #0ff;	シアンブルー
追加CSS欄	color: #ff0;	イエロー

結果は、次のようにイエローとなります。追加CSS欄に記述したCSSが一番優先度が高いわけです。

適用されたCSSの順番を見ると、

①レッドが適用（子テーマstyle.cssが適用）
②レッドをシアンブルーで書き換え（Simple Custom CSS and JSが適用）
③シアンブルーをイエローで書き換え（追加CSS欄のCSSが適用）

と進んでいることがわかります。

以上から次のことがいえます。

• CSS適用の優先度は
  ①追加CSS欄　②simple Custom CSS and JS　③子テーマstyle.css
• 適用の優先度が異なるので、３つの方法を混在して使用するのは望ましくない
  （どれか１つに絞って使うのがよいでしょう）

まとめ

最後にもう一度３つの方法の特徴（メリット・デメリット）をまとめておきます。

	子テーマ style.css	Simple Custom CSS and JS	追加CSS欄
プレビュー	×	×	〇
導入の簡単度	③ 子テーマが必要	② プラグインが必要	①
CSS適用 優先度	③	②	①
CSSの 読みやすさ	〇	△	× 記述欄が小さい
専用エディター 使用可	〇	×	×
カスタマイズ 用途	大規模 カスタイズ向け	中規模 カスタマイズ向け	小規模 カスタマイズ向け

このように、３つの方法にはそれぞれメリット・デメリットがあります。

しかし私は、次の理由から、子テーマを使う方法を推奨しています。

最初は小規模のカスタマイズしか予定していなくても、将来大規模なカスタマイズをしたくなるかもしれません。それに備えて最初から子テーマを使っておく！というのが私の考えです。

もちろん、練習サイトであったり、ほとんどカスタマイズをすることはない、ということであれば、追加CSS欄やプラグインでよいでしょう。