CSSの変更が反映されない原因はこいつだった!!

Cause css change not reflectどうも、でこいです。

見ての通りテーマ変えました。

その際CSSが反映されないという問題にぶち当たり、なんとか解決までこぎ着けたので、同じような人を救えればという思いで書きます。

CSSが反映されない

フォントサイズとかまぁいろいろ変えようと思ったら「style.css」を弄りますよね。

ご多分に漏れず僕もそうなんですが、どこを変えても何も変わらなかったのです…

管理画面で確認しても変わってるし、FTPでファイルダウンロードしても変わってるし…
え、まじなんなんって感じでした。

僕も馬鹿ではありませんので、小さい脳みそをフルに使って何がいけないのか原因を探ってみる事に。

スペルミス?

やっちゃいがちなやつですね。
変更した部分をくまなく見ましたが、その類いのものは見つからず。

キャッシュ?

これも結構あるようで。

僕は「WP Super Cache」というプラグインを使っていたので、
設定からキャッシュを削除し、プラグインを停止させました。

が、何も変わらず…

ブラウザキャッシュも消したけどだめでした。

 

この2つを試したところでギブアップ。
僕の小さい脳みそではこれが限界でした…

Twitterで悩みを吐き出していたところ、いろいろな方にアドバイスをいただきました。
で、原因判明。

原因は、キャッシュでした

ちゃんとキャッシュ系確認してなかったのかよと言われればその通りなんですが、完全に存在を忘れてました。

CloudFlareというCDNサービスなんですが、以前サイトの高速化の記事をどこかで見て、その時設定していたんですねー。

CloudFlareのキャッシュを停止させる

CloudFlareにアクセスして「CloudFlare settings」にいきます。
Cause css change not reflect 1

で、開発モードをONにします。
Cause css change not reflect 2
キャッシュをバイパスしてCSSとかJavaScriptの変更を即座に見れるようにしてくれるらしい。

そしてキャッシュをパージすればOK!
Cause css change not reflect 3

あ、開発モードは3時間経つと自動でOFFになります。

 

で、改めてCSSを編集したところ、なんともまぁアッサリ変わってくれました。

アドバイスをくださった優しい皆様本当にありがとうございます。

力不足

問題が解決されて喜んでいたところ、「調べる力も含め不足。」と10文字でオーバーキルレベルのお言葉をいただきました。

いやほんとにその通りです。
僕はどうやってCloudFlareが原因か分かったのかすら理解していないので、同じように何かにぶち当たったときとても困ると思うのです。

幸いにして、Twitter等でアドバイスしてくれる優しい方に恵まれているからなんとかなったものの、聞いてばっかでは自分のためにはなりません。

僕も聞く前に調べることはもちろんしますが、今回は完全に調べ方が良くなかったというか調べ方を知らなかったというか。

あの10文字を深く受け止めて精進しようと思いました。

 

最後に
CloudFlareを使っていて「CSSやJavaScriptが反映されない!」とお困りの方はこの方法を試してみましょう!

関連記事

ブログをフォロー

コメントを残す