WordPressでCSSを追加・修正したのに、
・デザインが変わらない
・変更内容が反映されない
・一部だけCSSが効かない
このようなトラブルで困っていませんか？
WordPressでCSSが反映されない原因は、キャッシュ・記述ミス・読み込み順・テーマやプラグインの影響など複数あります。
本記事では、WordPressでCSSが反映されない原因と対処法を初心者でも分かるように解説します。
すぐに解決したい方へ
・CSSを変更しても反映されない
・サイトの見た目が崩れて困っている
・原因が分からない
まずは簡単にできる確認をする
CSSが反映されない場合は、まず以下を確認してください。
・ブラウザを再読み込みする（Ctrl + F5）
・別ブラウザで確認する
・スマホでも同じか確認する
・ログイン中とログアウト状態で見比べる
これだけで原因の切り分けがしやすくなります。
WordPressでCSSが反映されない主な原因
WordPressでCSSが反映されない主な原因は以下の通りです。
・ブラウザキャッシュが残っている
・キャッシュプラグインの影響
・CSSの記述ミス
・読み込み順の問題
・セレクタ指定が間違っている
・テーマやプラグインで上書きされている
・追加CSSの保存が反映されていない
・CDNのキャッシュが残っている
それぞれ詳しく解説します。
原因別の対処法
CSSを変更してもブラウザ側に古いデータが残っていると、変更が反映されません。
対処法：
・スーパーリロードを行う（Ctrl + F5）
・ブラウザキャッシュを削除する
・シークレットモードで確認する
まず最初に確認したいポイントです。
キャッシュ系プラグインが古いCSSを保持していると、WordPressでCSSが反映されない原因になります。
対処法：
・キャッシュプラグインのキャッシュを削除
・一時的にキャッシュ機能を停止
・最適化機能（CSS結合・圧縮）を見直す
特に高速化系プラグインを使っている場合は要注意です。
CSSの文法ミスがあると、途中から反映されなくなることがあります。
よくある例：
・セミコロン「;」の付け忘れ
・波かっこ「{ }」の閉じ忘れ
・全角スペースや全角記号が混ざっている
対処法：
・記述内容を見直す
・直前に追加したCSSを一度削除して確認する
正しい場所にCSSを書いていても、対象の要素を正しく指定できていないと反映されません。
対処法：
・検証ツールで対象要素を確認
・class名・id名を見直す
・より具体的なセレクタで指定する
「CSSが反映されない」のではなく、「当てる場所が違う」ケースも多いです。
テーマやプラグイン独自のCSSが強く効いていると、追加したCSSが反映されないことがあります。
対処法：
・テーマ独自設定を確認
・プラグインを一時停止して確認
・テーマファイル側のCSSを確認
ordPressの「追加CSS」に保存したつもりでも、実際には反映されていないことがあります。
対処法：
・保存ボタンを再度押す
・公開状態になっているか確認
・別の場所に書いたCSSと重複していないか確認
CDNやサーバー側のキャッシュが残っていると、CSS変更が反映されないことがあります。
対処法：
・CDNキャッシュを削除する
・サーバーキャッシュを削除する
・時間を置いて再確認する
高速化設定をしているサイトではよくある原因です。
追加CSSが反映されない場合の確認ポイント
WordPressの「外観」→「カスタマイズ」→「追加CSS」を使っている場合は、以下も確認してください。
・保存できているか
・プレビューだけで満足していないか
・別のテーマを有効化していないか
・子テーマではなく親テーマ側を見ていないか
追加CSSは便利ですが、保存場所の勘違いで反映されないことがあります。
一部だけCSSが反映されない場合
一部だけCSSが反映されない場合は、以下の可能性があります。
・該当要素に別のCSSが強く効いている
・スマホ用CSSとPC用CSSが分かれている
・メディアクエリの条件が合っていない
この場合は検証ツールで対象要素を確認するのが最も確実です。
WordPressで変更が反映されない場合との違い
CSSが反映されない問題は、「WordPressで変更が反映されない」トラブルと似ています。
ただし、見た目だけの問題であればCSSやキャッシュの可能性が高く、記事本文や設定自体が変わらない場合は別の原因が考えられます。
それでもCSSが反映されない場合
上記を試してもCSSが反映されない場合は、以下の可能性があります。
・テーマファイルの構造が特殊
・プラグインによる動的なスタイル変更
・JavaScript側の制御
・サーバーやCDNの複雑なキャッシュ問題
この場合は専門的な確認が必要です。
CSSが反映されない場合の最終手段
上記の方法でも解決しない場合、原因が複雑になっている可能性があります。
・デザイン修正を急いでいる
・どこを直せばいいか分からない
・自分で触ると崩れそうで不安
最後に
WordPressでCSSが反映されない原因は複数ありますが、多くは以下で解決できます。
・ブラウザやキャッシュの削除
・CSS記述ミスの確認
・セレクタや上書き関係の見直し
・テーマやプラグインの影響確認
焦らず1つずつ確認することが重要です。
よくある質問（FAQ）
- QWordPressでCSSが反映されない一番多い原因は何ですか？
- A
最も多いのはブラウザキャッシュやキャッシュプラグインの影響です。
- Q追加CSSに書いたのに反映されないのはなぜですか？
- A
保存ミス、上書き、セレクタの誤りなどが考えられます。
- Q!importantを使えば必ず反映されますか？
- A
効くことはありますが、原因解決にならないことも多いため多用はおすすめしません。
- QスマホだけCSSが反映されないのはなぜですか？
- A
メディアクエリやキャッシュ、端末ごとの表示条件が原因の可能性があります。
- Q初心者でも自分で直せますか？
- A
キャッシュ削除や簡単な記述確認で直ることも多いですが、複雑な上書きや構造の問題は難しい場合があります。
