
WordPressでCSSを変更したけど反映されない
本日はこんなお悩みを解決していきます。
最近、別サイトのCSSを変更したらなぜかCSSが反映されなくてかなり苦戦しました。
私はいつもデザインの変更をして反映されない時は、以下のことを見直すようにしています。
- CSSコードの記述間違い
- キャッシュが残っていないか
- コードの間に全角スペースが入ってないか
- 閉じカッコを忘れていないか
などをチェックします。
自分で記述したコード、どこからかコピペしてきたコード関わらず一度見直します。
前に変更が反映されなかった時には、リロード(更新)すれば変更が反映されていたのですが、今回はそれでも反映されませんでした。
今回は、検証(デベロッパーツール)を確認したところ変更後のコード自体が読み込まれていなかったのでキャッシュが残っているのかなと思いました。
CSSが読み込まれていないかどうかは、カーソルを当てて右クリックで検証を押すとコードが出てくるので該当するコードを探して確認します。
今回は上記のことから、キャッシュについての解決策を探してみました。
また、他のWebブラウザでも確認したところ、きちんと変更されていたのでキャッシュの問題だと確信しました。
キャッシュは、履歴からクリアすることもできますが、これをするとcookieも消えてしまって他のサイトのログイン情報もログアウトしてしまうので少し面倒臭いです。
「他に良い方法はないかな・・」と探していたら良い方法があったので今回ご紹介します。
CSSを変更したのに反映されない・・という人は参考にしてください。
今回はGoogle chromeの解説になります。
CSS変更が反映されない時に試すキャッシュをクリアする方法

CSSコードを変更した時に反映されなかった・・
そんな時にキャッシュをクリアする方法があります。
しかし履歴からクリアしても他のサイトのログイン情報もクリアされてしまうので後々面倒です。
やり方はとても簡単なので一緒にやっていきましょう。

2ステップです!
デベロッパーツールを開く
まず、リロードしたいページで右クリックをして検証を選択してデベロッパーツールを開きます。
リロードボタンを長押しする
次に、ブラウザの左上のリロード(更新)ボタンを長押しします。
すると次の3つが出てくると思います。
- 通常の再読み込み
- ハード再読み込み
- キャッシュの消去とハードの再読み込み
今回はハードの再読み込みを選択します。
これでCSSが反映されます。
ハードの再読み込みは、キャッシュ機能を無視して強制的にサーバーからページをダウンロードするという方法なんです。
キャッシュを全てクリアしなくてもこれだけで変更が反映されるはずです。
まとめ:CSSを変更しても反映されない時の対処法
いかがだったでしょうか。
今回はCSSを変更しても反映されない時の対処法についてご紹介してきました。
困った時はとても簡単なので試してみてください。
それでもうまくいかない・・という人は、キャッシュは全てクリアされてしまいますが、さっきの方法でキャッシュと消去とハードの再読み込み選択してみてください。
コメント