追加CSSが効かない？WordPressでカスタマイズが反映されないときの確認ポイント

WordPressでサイトのデザインを少し変えたくて、カスタマイザーの「追加CSS」にコードを書いたのに、なぜか反映されない…。
「合ってるはずなのに効いてない」「リロードしても変わらない」──そんな経験、ありませんか？

CSSが効かないのにはいくつか“よくある理由”があります。
この記事では、WordPressにおける追加CSSの基本と、効かないときに確認すべきポイント、そしてCSSの優先順位（上書きのルール）について解説します。

目次

• WordPressの「追加CSS」でカスタマイズする方法
• 追加CSSが効かないときに確認すべきこと
  • セレクタが間違っていないか
  • キャッシュ削除を試してみる
  • 重複しているCSSはないか
  • 詳細度の高いCSSを書いてみる
  • !importantを使う
  • 子テーマ内にCSSを書く
• まとめ：焦らず、順番に原因を探ろう

WordPressの「追加CSS」でカスタマイズする方法

まず、「追加CSS」とは、WordPressの管理画面から簡単にCSSを追記できる機能です。
管理画面の「外観」→「カスタマイズ」→「追加CSS」から入力することで、テーマファイルを直接編集せずにデザインを変更できます。初めての方でも気軽に試せる方法として、とても便利な機能です。

たとえば、

h1 {
  color: red;
}

と入力すれば、すぐに見出し（h1）の文字色が赤に変わるはず…ですが、うまく反映されないこともよくあります。
その原因は、コードの書き方だけではなく、ブラウザやテーマの仕様、他のスタイルとの競合など、さまざまです。

追加CSSが効かないときに確認すべきこと

CSSが効かないと感じたときは、まずは基本的なチェックポイントをひとつずつ見ていくのがおすすめです。

セレクタが間違っていないか

CSSが効かない原因として、そもそも対象のHTML要素を正しく指定できていないというケースもよくあります。
とくに、慣れないうちはセレクタの書き方でつまずくことが多いため、以下のようなよくあるミスをチェックしてみましょう。

• クラス名の前に「.（ドット）」をつけ忘れている
  　例：title {} → 正しくは .title {}
• IDを使っているのに「#」をつけていない
  　例：main-header {} → 正しくは #main-header {}
• スペルミスや全角文字が混ざっている
  　例：conteｎt（nが全角）など、気づきにくい間違いが紛れていることもあります

検証ツール（Chromeの「検証」やFirefoxの「開発ツール」）を使えば、今のページにどんなクラスやIDが付いているか、どのCSSが適用されているかを確認できます。CSSが効かないときは、まずこのツールで対象要素をチェックしてみるのが近道です。

キャッシュ削除を試してみる

見落とされがちなのが「キャッシュ」です。
サーバー側やブラウザのキャッシュが残っていると、変更しても古いスタイルが表示されてしまうことがあります。表示が変わらないときは、一度ブラウザのキャッシュをクリアする、もしくはシークレットモードで確認してみましょう。

重複しているCSSはないか

CSSは基本的に「後に書かれたものが優先される」というルールが存在します。
そのため、同じセレクタでスタイルが複数書かれていた場合、最後に読み込まれたスタイルが有効になるため、追加CSSが先に読み込まれていたり、別のプラグインやテーマのCSSに後から上書きされている場合は、意図したスタイルが反映されないこともあります。

追加CSSに書いたコードは縦に長くなるため、気づかないうちに同じセレクタに対して複数のコードを書いてしまっている可能性があります。そんな時は、「Ctrl」キー(Macの場合はcommandキー)と「F」キーを同時に押すと、追加CSS内の文字列を検索することができます。この機能を使って、重複しているスタイル指定はないかを確認しましょう。

詳細度の高いCSSを書いてみる

CSSには「詳細度（Specificity）」という概念があり、これによってどのスタイルが優先されるかが決まります。
たとえば、h1 だけを指定したスタイルよりも、.header .title h1 のように階層やクラス名が含まれたスタイルの方が強く適用されるというルールです。

たとえば、ヘッダーのタイトル(h1)を変えたい場合、以下のように書き換えることで、効かなかったCSSが反映されることがあります。

/* 詳細度が高い方が優先される */
.header .title h1 {
  color: red;
}

「誰に」「どの階層に」対して適用するかを明確に書くことが、CSSを効かせるコツのひとつです。

!importantを使う

どうしても他のスタイルに負けてしまうとき、強制的にそのスタイルを適用させる方法があります。
それが !important です。

h1 {
  color: blue!important; /* こちらが優先される */
}

h1 {
  color: red; 
}

このように指定すると、他のすべてのスタイルよりも優先されて適用されるため、追加CSSが効かない場合の“最終手段”として使われることが多いです。

ただし、!important を多用しすぎると、後で別のスタイルを追加・変更したときに競合が起きやすくなり、CSSの管理が難しくなるというデメリットもあります。

どうしても今すぐ反映させたいときや、他に変更できる手段がない場合に限定して使うようにするとよいでしょう。

子テーマ内にCSSを書く

テーマによっては、カスタマイザーの「追加CSS」が既存のスタイルより後に読み込まれず、上書きされてしまうケースがあります。
この場合は、「子テーマ」を作成し、その中にCSSを記述することで、より自由にスタイルをコントロールできるようになります。

「追加CSS」だけでは限界を感じた場合は、子テーマでの管理に切り替えることで安定した運用ができるようになります。

あわせて読みたい

WordPressの子テーマとは？作る理由と基本の作り方を解説！

まとめ：焦らず、順番に原因を探ろう

追加CSSが効かないときは、コードのミスだけでなく、WordPressならではの構造や、ブラウザ・テーマ側の仕様が影響していることがほとんどです。

「ちゃんと書いたのに変わらない！」と焦る前に、セレクタの確認、キャッシュのクリア、CSSの優先順位などを一つずつチェックしてみてください。
それでも解決しない場合は、デベロッパーツールを使って、どのスタイルが適用されているかを調べてみるのが一番の近道です。

正しくCSSが反映されたときの達成感は格別。
少しずつ試して、思いどおりのデザインを作っていきましょう！