CSS修正が反映されない時のチェックリスト｜WordPress初心者向け

WordPressでCSSを修正したのに、画面を見ても何も変わらず困っていませんか？
追加CSSに書いたはずなのに反映されない、パソコンでは変わったのにスマホでは変わらない、管理画面では直ったのに公開画面だけ古いままという相談はよくあります。

CSS修正が反映されない時は、CSSの書き方だけが原因とは限りません。
ブラウザ、WordPress、キャッシュプラグイン、サーバー、CDN、テーマの読み込み順など、複数の場所で古い表示が残ることがあります。

この記事では、WordPress初心者の方でも順番に確認できるよう、CSS修正が反映されない時のチェックリストを整理します。

よこやま良平

ITエンジニアとして20年以上WordPressに携わってきたよこやま良平です。わたしの現場経験をもとに、CSSが反映されない原因を安全に切り分ける手順を解説します。

CSS修正が反映されない時は、焦ってCSSを何行も足すより、反映を止めている場所を順番に確認するのが正解です。
原因を見つけずに上書きを重ねると、あとから表示崩れの原因になります。

まずは「CSSが保存されていない」のか、「保存されたCSSが読み込まれていない」のか、「読み込まれているが別のCSSに負けている」のかを分けて考えましょう。

CSS修正が反映されない時に最初に見る原因

CSS修正が反映されない時は、最初にキャッシュ、保存場所、CSSの指定ミス、読み込み順を確認します。
この4つを見れば、多くのケースで原因の方向性が見えてきます。

特にWordPressでは、管理画面で保存した内容がすぐ公開画面に出るとは限りません。
キャッシュ系プラグインやサーバー側の高速化機能があると、古いCSSがしばらく残ることがあります。

反映されない画面を1つに絞る

まず、CSSが反映されないページを1つに絞ってください。
トップページ、投稿ページ、固定ページ、スマホ画面などを同時に見ていると、原因が混ざってしまいます。

同じCSSでも、ページテンプレートやブロック構造が違えば効き方は変わります。
最初は「このURLのこのボタンだけ」のように対象を狭くする方が、切り分けが早くなります。

保存したCSSが本当に残っているか確認する

追加CSSやテーマファイルに書いた内容が、保存後に消えていないか確認します。
セキュリティ設定、WAF、権限、テーマ側の制限によって、保存したつもりでも反映されないことがあります。

保存ボタンを押したあとに管理画面を開き直し、書いたCSSが残っているか見てください。
ここで消えている場合は、公開画面を見る前に保存処理や権限の問題を疑います。

CSS修正が反映されない時のキャッシュ確認

CSS修正が反映されない原因で最も多いのはキャッシュです。
ブラウザ、WordPressプラグイン、サーバー、CDNのどこかに古いCSSが残っていると、正しいCSSを書いても画面は変わりません。

キャッシュ確認では、やみくもに全設定を変える必要はありません。
まずブラウザ側から順番に確認し、それでも変わらなければWordPress側、サーバー側へ進みます。

ブラウザキャッシュを先に疑う

自分のパソコンだけCSSが反映されない場合は、ブラウザキャッシュが原因かもしれません。
シークレットウィンドウ、別ブラウザ、別端末で確認すると、ブラウザ側の問題か切り分けやすくなります。

Chromeでは強制再読み込みやキャッシュ削除で変わることがあります。
ただし、毎回ブラウザだけを疑うのではなく、他の端末でも同じ症状か確認してください。

WordPressキャッシュプラグインを確認する

キャッシュプラグインを使っている場合、CSSやHTMLを古い状態で配信していることがあります。
管理バーのキャッシュ削除、プラグイン設定画面のキャッシュ削除、CSS最適化の再生成を確認します。

CSS結合や遅延読み込みを有効にしていると、修正後のCSSが別ファイルにまとめられている場合があります。
一時的に最適化を止めると、CSSそのものの問題か、最適化処理の問題かを分けられます。

キャッシュ削除の画面名は、サーバー会社やプラグインによって違います。「キャッシュ削除」「Purge」「Clear cache」などの表記を探してください。

CDNやサーバーキャッシュも確認する

CloudflareなどのCDN、またはサーバー側の高速化機能を使っている場合、WordPress側でキャッシュを消しても表示が変わらないことがあります。
この場合は、CDNやサーバー管理画面でもキャッシュ削除が必要です。

特にCSSファイル名が同じままの場合、古いCSSが長く残ることがあります。
変更後すぐ確認したい時は、CDN側のキャッシュ削除まで行いましょう。

CSS修正が反映されない時の書き方チェック

キャッシュを消してもCSS修正が反映されない場合は、CSSの書き方を確認します。
セレクタの間違い、波かっこの閉じ忘れ、対象クラスの違い、CSSの優先順位がよくある原因です。

CSSは小さなミスでも、その行以降が効かなくなることがあります。
長いCSSを一度に追加した場合は、問題のある行を見つけるために、数行ずつ分けて確認してください。

対象クラスが変わっていないか確認する

テーマ更新やブロック変更のあと、以前使っていたクラス名が変わることがあります。
その場合、CSSは保存されていても対象が存在しないため、画面には反映されません。

ブラウザの検証ツールで、直したい場所のHTMLを確認してください。
CSSに書いたクラス名と、実際のHTMLにあるクラス名が一致しているかを見るだけでも、多くのミスを見つけられます。

CSSの優先順位に負けていないか見る

CSSが読み込まれていても、別のCSSの優先順位が高ければ表示は変わりません。
検証ツールで取り消し線が付いているCSSは、他の指定に上書きされています。

この時、すぐに !important を付けるのはおすすめしません。
まずは親要素を含めて対象を絞り、必要な場所だけに効く指定へ変える方が安全です。

/* 広すぎる指定 */
.button {
  margin-top: 24px;
}

/* 対象ページや親要素を含めて絞る */
.home .main-cta .button {
  margin-top: 24px;
}

この例のように、同じボタンでも対象範囲を絞ると、他ページへの影響を減らせます。
CSSが反映されない時ほど、強い指定ではなく正しい対象指定を意識してください。

CSS修正がスマホだけ反映されない時の確認

CSS修正がスマホだけ反映されない場合は、メディアクエリ、画面幅、キャッシュ、テーマのレスポンシブ設定を確認します。
パソコン用CSSとスマホ用CSSは、別の条件で読み込まれていることがあります。

スマホ確認では、実機とブラウザの検証ツールの両方を見るのがおすすめです。
検証ツールでは反映されているのに実機では変わらない場合、スマホブラウザのキャッシュやCDNが残っている可能性があります。

メディアクエリの条件を確認する

スマホ用CSSは、@media の条件内に書かれていることがあります。
条件の幅が実際の端末幅と合っていないと、CSSは正しく書いていても反映されません。

@media screen and (max-width: 768px) {
  .main-cta .button {
    width: 100%;
  }
}

この例では、画面幅が768px以下の時だけCSSが効きます。
タブレットや一部のスマホでは条件が変わるため、どの幅で確認しているかも見てください。

スマホ用のCSSが後から上書きしていないか確認する

パソコン用CSSを直しても、あとから読み込まれるスマホ用CSSで上書きされることがあります。
この場合、パソコンでは反映されてもスマホでは変わりません。

検証ツールでスマホ幅に切り替え、どのCSSが最終的に効いているか見てください。
取り消し線になっている指定を直しても、表示は変わらないため注意が必要です。

CSS修正が反映されない時に避けたい対応

CSS修正が反映されない時に避けたいのは、原因不明のまま強い指定を重ねることです。
一時的に見た目が変わっても、別ページの表示崩れや将来の更新トラブルにつながります。

特に、!important の多用、親テーマの直接編集、キャッシュプラグインの全停止、ネット上のCSSの丸写しは慎重に扱ってください。
問題の範囲が広がると、復旧にも時間がかかります。

作業前のCSSを必ず保存する

CSSを修正する前に、現在のCSSをテキストファイルへ保存してください。
追加CSS、子テーマ、カスタムCSSプラグインなど、編集する場所ごとに保存しておくと戻しやすくなります。

反映されないからといって何度も書き換えると、どの時点で問題が起きたのかわからなくなります。
日時と修正内容を残すだけでも、復旧の手がかりになります。

本番サイトで大きな変更を試さない

本番サイトで大きなCSS変更を試すと、訪問者が崩れた画面を見る可能性があります。
できればテスト環境、少なくともアクセスが少ない時間帯に作業してください。

急ぎの場合でも、変更箇所を小さく分けて確認することが大切です。
1回の修正で複数箇所を変えると、反映された部分とされない部分の原因が混ざってしまいます。

CSS修正が反映されない原因を相談する前のメモ

CSS修正が反映されない原因を相談する時は、症状、編集場所、確認端末、キャッシュ削除の有無をまとめておくと調査が早くなります。
「CSSが効きません」だけでは、確認すべき範囲が広くなります。

特に、どのURLで、どの部分が、どう変わるはずだったのかを伝えることが重要です。
修正前後のスクリーンショットがあれば、原因の見立ても立てやすくなります。

症状: 追加CSSに書いたボタン色が公開画面で変わらない
対象URL: https://example.com/contact/
編集場所: 外観 → カスタマイズ → 追加CSS
確認端末: Windows Chrome、iPhone Safari
試したこと: ブラウザ更新、シークレットウィンドウ、キャッシュプラグイン削除
直したい内容: 問い合わせボタンの背景色だけ変えたい
使用テーマ: SWELL
直前の作業: テーマ更新とCSS追加

このようにメモがあると、CSSの書き方の問題なのか、キャッシュやテーマ側の問題なのかを判断しやすくなります。
管理画面情報を渡す前に、まずは症状だけでも整理しておきましょう。

CSS修正が反映されない時は原因を分けて確認する

CSS修正が反映されない時は、CSSを追加し続けるのではなく、キャッシュ、保存場所、書き方、優先順位、スマホ条件を順番に確認しましょう。
原因を分ければ、初心者でも安全に切り分けられるケースがあります。

ただし、テーマ更新後にCSSが効かない、複数ページで症状が違う、キャッシュやCDNが絡んでいる場合は、原因が複数重なっていることもあります。
現在のCSSと症状を保存したうえで、早めに専門家へ相談するのも安全な選択です。

CSS修正が反映されない時、最初に何を確認すればよいですか？

まずシークレットウィンドウや別ブラウザで確認し、ブラウザキャッシュの影響を切り分けます。そのうえで、WordPressのキャッシュプラグイン、サーバーキャッシュ、CSSを書いた場所、CSSの優先順位を順番に確認してください。

追加CSSに書いたのに公開画面だけ変わらないのはなぜですか？

古いキャッシュが表示されている、追加CSSが保存されていない、対象のクラス名が違う、別のCSSに上書きされている可能性があります。管理画面にCSSが残っているか、検証ツールで読み込まれているか確認しましょう。

スマホだけCSSが反映されない時はどうすればよいですか？

メディアクエリの条件、スマホ用CSSの上書き、実機ブラウザのキャッシュ、テーマ側のレスポンシブ設定を確認します。パソコン幅だけで確認せず、実機と検証ツールの両方で見るのが安全です。

CSS修正が反映されず自分で原因を特定できない時は

WordPressのCSS修正・テーマ修正・表示不具合でお困りなら、
クイックレスキューが原因調査から安全な修正まで対応します。

CSS修正が反映されない原因は、現在の状態を残しておくほど調査しやすくなります。
急ぎの場合も、まずは症状とURLをお知らせください。