WordPressのカスタマイズをしていて「CSSを書いたのに全然変わらない」という経験、一度はありますよね。
せっかく時間をかけてCSSを書いたのに、サイトを確認したら何も変わっていない。
ページをリロードしても変わらない。
「私、書き方が間違っているのかな…」と自信をなくしてしまう人も多いです。
でも、安心してください。
CSSが反映されない原因はだいたいパターンが決まっています。
そのパターンさえ知っておけば、ほとんどの場合は自分で解決できます。
この記事ではWordPressでCSSが反映されない原因と解決方法について解説していきます。
CSSが反映されない原因は「キャッシュ・優先順位・記述場所」の3つがほとんど
WordPressでCSSが反映されない場合、原因の9割はこの3つです。
- ブラウザやサーバーのキャッシュが古いままになっている
- CSSの優先順位（詳細度）が低くて他のスタイルに負けている
- CSSを書く場所が正しくない（反映されない場所に書いてしまっている）
特に初心者の方がハマりやすいのがキャッシュ問題です。
CSSは正しく書けているのに、古いデータがブラウザに残っていて変化が見えていないだけ…というケースがとても多いです。
また、WordPressのプラグイン（LiteSpeed CacheやW3 Total Cacheなど）がキャッシュを持っている場合は、プラグインの設定からキャッシュをクリアする必要があります。
「CSSを変えたのに変わらない」と感じたら、まず最初にキャッシュクリアを試すのが鉄則です。
CSSの優先順位（詳細度）が低いと他のスタイルに上書きされてしまう
CSSには「詳細度（Specificity）」というルールがあります。
同じ要素に複数のスタイルが当たっている場合、詳細度の高いほうが優先されます。
- インラインスタイル（style属性）
- IDセレクタ（#id）
- クラスセレクタ（.class）
- タグセレクタ（h1, pなど）
この順番で詳細度が高く、上にあるほど優先されます。
WordPressのテーマはすでに細かいCSSが組まれているため、単純なクラスセレクタで書いても負けてしまうことがあります。
セレクタをもう少し具体的に書くと詳細度が上がります。
例えば `.content p` より `.page-content .entry p` のように、より細かく指定する方法です。
ブラウザの開発者ツール（F12キー）でどのスタイルが優先されているか確認できるので、打ち消し線が入っているCSSが「負けているスタイル」です。
これを使えばどのセレクタに負けているか一目でわかります。
CSSを書く場所が間違っていると正しく読み込まれない
WordPressでCSSをカスタマイズする場合、書く場所によっては正しく反映されないことがあります。
- テーマの style.css を直接編集する方法
- 「外観 > カスタマイズ > 追加CSS」に書く方法
- 子テーマに書く方法
テーマのstyle.cssを直接編集するのはおすすめしません。
なぜなら、テーマをアップデートすると編集内容がすべて消えてしまうからです。
また、子テーマを使っている場合は子テーマの style.css に書くのが正解です。
親テーマと子テーマのCSSが両方読み込まれますが、子テーマの方が後に読み込まれるため、子テーマのスタイルが優先されます。
書く場所を間違えると「正しく書けているのに反映されない」という状態になるので注意しましょう。
CSSが反映されないときの確認手順をまとめて解説
実際にCSSが反映されない場合、以下の手順で順番に確認していくと原因を特定しやすいです。
- まずブラウザのキャッシュをクリア（Ctrl+Shift+R）してリロード
- キャッシュ系プラグインのキャッシュをクリアする
- 開発者ツール（F12）でスタイルが正しく読み込まれているか確認
- 打ち消し線のあるCSSを確認してどのセレクタに負けているか調べる
- 詳細度を上げるか「!important」で上書きする
開発者ツールは最初は難しそうに見えますが、「Elements（要素）タブ」で要素を選んで「Styles（スタイル）パネル」を見るだけで大丈夫です。
打ち消し線が入っているスタイルが「適用されていないCSS」なので、そこを手がかりに修正できます。
また、CSSのセレクタのスペルミスや記述ミスもよくある原因のひとつです。
「.clsas」のようなタイポは開発者ツールでも気づきにくいので、コピー＆ペーストを活用するのがおすすめです。
WordPressのCSS反映に関するよくある質問まとめ
CSSのカスタマイズに関してよく寄せられる疑問に答えていきます。
- Q. 追加CSSに書いたのに反映されません
- A. まずキャッシュクリアを試してください。それでもダメな場合はセレクタの詳細度を確認しましょう。
- Q. テーマを変えたらCSSが消えました
- A. テーマのstyle.cssを直接編集していた場合、テーマ変更で消えます。次からは追加CSSか子テーマを使いましょう。
- Q. !importantを使っても変わりません
- A. インラインスタイル（style属性）には!importantも負けることがあります。要素のstyle属性を削除するか、JavaScriptで対応が必要な場合もあります。
WordPressのブロックエディタ（Gutenberg）を使っている場合、ブロック自体にスタイルが設定されていることもあります。
その場合はブロックの設定パネルから変更するのが正しいアプローチです。
WordPressをもっと快適に使うためのサービス紹介
CSSのカスタマイズを自由にできるようになると「もっと本格的なサイトを作りたい」という気持ちが出てくると思います。
そのためには安定したレンタルサーバーとドメインの選択が重要です。
- 表示速度が速いサーバーを使う
- 独自ドメインでサイトの信頼性を上げる
- WordPressの管理機能が充実したサービスを選ぶ
mixhostはWordPressの自動インストール機能が充実していて、初心者でもすぐにサイトを作り始められます。
高速なサーバー環境でCSSの変更もストレスなく確認できるので、カスタマイズを楽しみたい人にはとてもおすすめです。
独自ドメインを持ってWordPressを運営することで、CSSや各種カスタマイズの幅が一気に広がります。
無料ブログサービスでは制限されていたことも、自分のサーバーとドメインがあれば自由にできます。
ぜひこの機会に本格的なWordPressサイト運営にチャレンジしてみてください。
CSSが反映されない原因を把握して快適なWordPressライフを
この記事ではWordPressでCSSが反映されない原因と解決方法について解説しました。
まとめると「キャッシュクリア」→「詳細度の確認」→「記述場所の確認」の順で対処すれば、ほとんどの問題は解決できます。
開発者ツール（F12）を使いこなせるようになると、CSSのトラブルがグッと解決しやすくなります。
最初は難しく感じるかもしれませんが、ぜひ一度試してみてください。
WordPressのカスタマイズは最初こそ戸惑いますが、仕組みを理解すると一気に楽しくなります。
ぜひ今回の内容を参考に、あなたのサイトをどんどん理想の形に近づけていってください。
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
