WordPressでキャッシュを削除してもCSSが反映されない原因7選

こんにちは、Dr.WordPressです。

WordPressでCSSを変更したのに、

「キャッシュを削除してもデザインが変わらない」

ということがあります。

例えば、

「ブラウザキャッシュを削除した」

「キャッシュプラグインも削除した」

「シークレットモードでも確認した」

それでもCSSが反映されないケースです。

WordPress公式でも、変更が反映されない原因としてブラウザやサーバー、キャッシュプラグインなど複数のキャッシュが案内されています。一方、それらを削除しても変わらない場合は、CSSそのものや読み込み先を確認する必要があります。

今回は、キャッシュを削除してもCSSが反映されないときに確認したい7つの原因をご紹介します。

① CSSのセレクタが間違っている

まず確認したいのが、CSSのセレクタです。

CSSでは、

「どの要素にデザインを適用するのか」

をclassやidなどで指定します。

例えば、テーマのアップデートやページの編集によってHTML構造が変わると、以前使えていたCSSが効かなくなることがあります。

・class名が変わっていないか

・指定している要素が本当に存在するか

・別の要素を指定していないか

などを確認してみましょう。

キャッシュを何度削除しても、セレクタ自体が違っていればCSSは反映されません。

② CSSの優先順位で負けている

CSS自体は正常に読み込まれているものの、別のCSSに上書きされているケースがあります。

例えば、

「文字色を変更したのにテーマ側の色から変わらない」

「余白を変更しても元の状態のまま」

といったケースです。

この場合はキャッシュではなく、CSSの優先順位を確認する必要があります。

ブラウザの開発者ツールを使って、変更したい要素にどのCSSが適用されているのか確認してみましょう。

③ CSSに記述ミスがある

CSSの記述そのものに問題がある場合もあります。

例えば、

・記号が抜けている

・括弧が閉じられていない

・プロパティ名を間違えている

・値の書き方が間違っている

などです。

特に長いCSSを書いている場合、途中の記述ミスが原因で、それ以降のCSSが期待通りに反映されないことがあります。

「ここから下のCSSだけ効かない」

という場合は、直前の記述も確認してみましょう。

④ 編集しているCSSファイルが違う

意外と見落としやすいのが、

「変更しているCSSと、実際にサイトで読み込まれているCSSが違う」

というケースです。

例えば、

・親テーマのCSS

・子テーマのCSS

・プラグインのCSS

・追加CSS

・ページビルダーが生成したCSS

など、WordPressでは複数の場所からCSSが読み込まれることがあります。

WordPress公式でも、変更が反映されない場合には「正しいファイルや場所を編集しているか」の確認が案内されています。

キャッシュを削除してもまったく変わらない場合は、編集しているCSSが本当にページで使われているのか確認してみましょう。

⑤ テーマやページビルダーのCSSに上書きされている

WordPressテーマやページビルダーが独自のCSSを出力している場合があります。

例えば、

・テーマのデザイン設定

・ブロックのスタイル設定

・ページビルダーのデザイン設定

などです。

特にブロックテーマでは、サイト全体やブロック単位でスタイルを設定できる仕組みがあります。

そのため、自分で書いたCSSより別のスタイルが優先されていることがあります。

特定の要素だけ反映されない場合は、その要素に別のCSSが適用されていないか確認してみましょう。

⑥ 別のキャッシュが残っている

「キャッシュは削除した」と思っていても、別の場所にキャッシュが残っているケースがあります。

WordPressでは、

・ブラウザキャッシュ

・キャッシュプラグイン

・レンタルサーバー側のキャッシュ

・CDN

など、複数の場所でキャッシュが使われることがあります。

特にレンタルサーバー側でキャッシュ機能が有効になっていると、WordPressのキャッシュプラグインだけ削除しても古い状態が表示されることがあります。

「キャッシュプラグインは削除したから大丈夫」と決めつけず、どこでキャッシュされているのか確認してみましょう。

⑦ CSS自体が読み込まれていない

最後に確認したいのが、

「変更したCSSがそもそもページに読み込まれているか」

という点です。

WordPressではテーマやプラグインからスタイルシートが読み込まれます。

テーマ変更やカスタマイズなどによって読み込み方法が変わると、編集しているCSSファイル自体が現在のページで使われていない可能性があります。

例えば、

「CSSを大きく変更しても何も変わらない」

「そのCSSに書いてある内容がすべて効かない」

という場合は確認したいポイントです。

CSSを書き直す前に、開発者ツールなどを使って対象のCSSが読み込まれているか確認してみましょう。

キャッシュを消しても直らないならCSS側を確認しよう

CSSが反映されないと、

「とりあえずキャッシュを消す」

という対処を何度も繰り返してしまいがちです。

しかし、キャッシュを削除しても変化がない場合は、

「本当にキャッシュが原因なのか？」

と考えることも大切です。

特に、

・CSSは読み込まれているか

・セレクタは合っているか

・別のCSSに上書きされていないか

この3つを開発者ツールで確認すると、原因をかなり絞り込みやすくなります。

キャッシュ削除後もCSSが反映されないときの確認順序

STEP 1

別ブラウザやシークレットモードで確認する

STEP 2

セレクタとCSSの記述を確認する

STEP 3

開発者ツールでCSSが読み込まれているか確認する

STEP 4

別のCSSに上書きされていないか確認する

STEP 5

編集しているCSSファイルが正しいか確認する

STEP 6

サーバーやCDNなど別のキャッシュを確認する

STEP 7

テーマやページビルダーの設定を確認する

キャッシュ削除を何度も繰り返すより、**「CSSが読み込まれていないのか」「読み込まれているけれど効いていないのか」**を切り分けるのがポイントです。

まとめ

WordPressでキャッシュを削除してもCSSが反映されない場合は、

① CSSのセレクタ

② CSSの優先順位

③ CSSの記述ミス

④ 編集しているCSSファイル

⑤ テーマやページビルダー

⑥ 別のキャッシュ

⑦ CSSの読み込み状態

などを確認してみましょう。

キャッシュを削除しても直らないのであれば、キャッシュ以外に原因がある可能性があります。

まずは開発者ツールを使って、「変更したCSSがページまで届いているのか」を確認すると原因を見つけやすくなります。

CSSを確認しても直らない場合はご相談ください

ここまで確認してもCSSが反映されない場合、テーマやプラグイン、CSSの優先順位など、複数の原因が重なっている可能性があります。

「どこを直せばいいのか分からない」という場合は、実際の状況を確認しながら原因を切り分けます。

1件1,000円で、原因の特定から対処方法までご案内しています。

「この症状でも相談できますか？」と、購入前にメッセージいただくだけでも大丈夫です。