CSS が反映されない時に最初にやるべき事[WordPress style.css]

こんにちは、このブログの裏方担当です！

先日、このブログの大幅アップデートを行いました。その中で、style.css の変更が適応されないという問題に苦しみました。

結局、2時間近く格闘した末に、あっけなく解決しましたので共有します！

1. 問題点

今回問題となったのは、pagination の仕様です。

上の写真のような pagination を実装して、ブログの User Interface を向上させたかったのです。

Local 環境でテストに成功したので、喜び勇んでブログに反映させたのですが、結果は、次の写真のようになりました。

位置が左によっていますし、おまけにせっかく凝ったデザインが完全に無視されています。php ファイルを何度も見直しましたが問題はなさそう。style.css にも特に問題は見られませんでした。

➀プラグインに干渉されている。
②WordPress のバージョンアップに干渉されている。
③コーディングに失敗している。

という事を疑ったのですが、pagination自体は反映されているわけですし、デベロッパーツールを使って html の記述を直接見てみたところ、 style.css が反映されていない可能性が最も疑わしいという結論になりました。（というか、➀、②の可能性なんて面倒くさくて受け入れられなかっただけなんですが（笑））

2. 解決策

さて、 style.css が反映されないのだとしたら、疑うべきはブラウザのキャッシュ機能です。ブラウザのキャッシュ機能については、次にご説明しましょう。まずは、解決策を説明します。

「キャッシュの消去と再読み込み」の手順は以下の通り！

➀CSSが反映されていないと考えられるwebページを開く。
②F12 キーを押して、デベロッパーモードを起動。
③”再読み込み” のアイコンを右クリックします。
④”キャッシュの消去と再読み込み” を選択してください。

実際の画面の様子は、上のようになります。

これで、解決！ ……しなかったら、少し骨ですね…….

3. ブラウザのキャッシュ機能とは何か？

さて、今回悪さをしていたキャッシュ機能とは何者なのでしょうか？

例えば、このブログは複数の php ファイルと１つの css ファイルで構成されています。php に文章が記述されていて、 css にその文章をどういう配置で並べるかが書いているイメージになります。

さて、みなさんに質問ですが、webページの表示が遅いとイライラしませんか？

そんな皆さんの為に、ブラウザは可能な限り処理を早めようとしてくれています。その工夫の一つが、キャッシュ機能です。

css ファイルは１つしかないので、最初にダウンロードして保持しておきます。皆さんがページを移動するときには、php ファイルだけダウンロードする訳です。この css を取っておいてくれる機能が、キャッシングです。

つまり、style.css を更新したのにも関わらず、それが反映されないのは、古い css ファイルをブラウザが使い続けているからである可能性があるわけです。

まとめ

CSSが反映されない場合、真っ先に確認すべきはブラウザのキャッシング機能です。キャッシングの消去と再読み込みでうまくいかない場合、変更箇所のデバックやファイルの構成を確認していくことになります。

by teru