WordPressの CSS 変更・追加が反映されない・・・！？

どうも、Linです。未定、です。

 

WordPressのデザインをいじりたい時は CSS を編集しますよね？

CSS は style.css というファイルに記述されていて、このファイルを編集するとサイトのデザインを変更・追加できます。

しかしながら、そんな WordPress の CSS を変更しても、

反映されない・読み込まれない・効かない

といった事件が起こることがあります。

 

実際、この悲劇は僕の身にも起きました。

僕がハマったのは、

ウェブブラウザのキャッシュ機能が原因で反映されなかった

ということです。

ほとんどのウェブブラウザには「キャッシュ」と呼ばれる機能が付いていて、こちらは

一度読み込んだサイトの情報をブラウザ内に保存しておく機能のこと

です。

同じサイトを閲覧する時に0から情報を取り寄せなくていいので表示速度が速くなるなどのメリットがあるのですね。

 

がしかし、です。

キャッシュではCSS の情報も記憶されているのです。

変更前の CSS がキャッシュで読み込まれている場合、変更前のデータが読み込まれてしまうといった珍現象が起きてしまうわけです。

 

 

キャッシュが原因でWordPress の CSS 変更が反映されない時の対処法

「キャッシュが原因でWordPress のCSSの変更が反映されない」という事態には、次の3つの解決策があります。

1. キャッシュを消す
2. キャッシュが残らないショボイブラウザを使う
3. シークレットウィンドウを使う

僕自身、2つ目の解決策の「ショボイブラウザ」でしのいできたんですが、ついに限界がきました。

いつのまにかバージョンアップしていて、キャッシュで CSS の情報を一時保存するようになっていたのです笑

 

3つの「シークレットウィンドウ立ち上げてページを開く」もいいんですが、CSSの更新ごとに新規ウィンドウを立ち上げなければいけないので面倒ですね。

ゆえに、オススメは1つ目の

ブラウザのキャッシュを消す

という方法です。

 

 

ブラウザのキャッシュを消す方法（Chrome編）

今回はChromeを例として解説していきますね。

 

Step1. ディベロッパーツールを開く

まずは Chrome のデベロッパーツールを開きましょう。

Chrome の右上のメニューから「その他のツール＞ディベロッパーツール」と進むと開けますよね。

 

 

Macをお使いの方はショートカットキーの「command + option +I」と打ち込んであげると一瞬でデベロッパーツールを立ち上げることができますよ。

 

Step2. 「更新マーク」で右クリック

ディベロッパーツールを開いたら「更新マーク」の上で右クリックしてみましょう。

 

 

Step3. キャッシュを消去する

いくつか候補が選択肢が出てくると思うんですが、今回は

キャッシュの消去とハード再読み込み

を選択します。

 

 

すると、キャッシュで一時保存されていた CSS データがリセットされるでしょう。

WordPressのstyle.css を編集して CSS を変更した後に行えば、変更点が反映されると思います。

 

 

WordPress の CSS が反映されない時はキャッシュを消してみよう

と、以上が WordPress の CSS が反映されない時の対処方法でした。

僕自身、このキャッシュを消す方法に助けられて、なんとかデザインを変更することができました。

腸でくすぶっていた便が一気に出たような清々しさを感じています。

もしかしたら、僕と同じように、キャッシュが原因で CSS の変更が反映されていない可能性もあります。

とりあえずブラウザのキャッシュを消してみましょう。

 

それでは！

Lin

 

【参考記事】