デジタルメディア

ワードプレスCSSの修正が反映されない時、編集前のCSS情報を削除する方法。

投稿日:2018年4月12日 更新日:

-, , , ,

CSSが効かない、反映されない。そんな時もあわてずに

ワードプレスを新しいテーマに変えました。WING - AFFINGER5 というテーマです。テーマを変えたとき、デフォルトのままなにもせずに使うという人は少ないですよね。多少なりともブログの趣旨に合うようなイメージに近づけると思います。
その際、色の変更など表面的なカスタマイズは、CSS(スタイルシート)を書き替えたり、追記したりします。テーマフォルダーの中に「style.css」というファイルがあります。そのファイルを編集します。
ところが「編集したスタイルが反映されななくて困っている。」という話を良く聞きます。そもそも「指定したCSSが間違っているということは?」ということもあるかもしれませんが、今回ご紹介する内容は、CSSが間違っていないということを前提にしたお話になります。

CSSは間違っていないのになぜ反映されないのでしょうか?

多くの場合、ブログを表示するブラウザに残されたデータに原因があります。ブラウザでブログを表示するとき、サーバ上にあるファイルを毎回読み込んでいるわけではありません。1度閲覧するとそのページの情報がブラウザに保存されます。
その情報を「キャッシュ」といいます。キャッシュをブラウザに残しておくことで、2回目以降のページの表示速度を速くする効果があります。キャッシュのおかげで何度も同じファイルを毎回読み込む必要がないということです。
よく考えられた仕組みですね。ただし、そのためにCSSをカスタマイズしている場合に面倒なことが起こります。CSSを修正したにも関わらず、ブラウザが古いCSSの情報を読み込んでしまうのです。
当然、修正したスタイルは反映されません。

ブラウザのキャッシュを削除する

解決策は、ブラウザに保存されている古いCSS情報を削除することです。

ブラウザが Chrome の場合

Chrome を利用している場合は、簡単です。Chrome にはデベロッパーツールというのがあり、ワードプレスをカスタマイズするためには便利なのでおすすめです。

まずは、デベロッパーツールを開きます。

Windows の場合、は [F12]で開きます。
Mac の場合は、[Command]+[Option]+[I]で開きます。
右クリックで「検証」を選んでも開くことができます。
ブラウザ上を右クリック
デベロッパーツールを開くと、そのページのページソース(HTML)、CSSプロパティーと適用されるスタイルなどを確認しながら作業することができます。ワードプレステーマのカスタマイズには欠かせません。
Chromeデベロッパーツール

スーパーリロードする

スーパーリロードというのは、通常の再読込ではなくキャッシュを削除する再読込する方法です。デベロッパーツールを開いた状態でブラウザのリロードボタンを右クリックしてください。
スーパーリロード

もっと簡単にブラウザのキャッシュを削除する方法

上に書いた方法で十分簡単なのですが、もっと簡単にキャッシュをクリアできる方法もあるので書いておきます。Chrome の拡張機能「Clear Cache」を Chrome にインストールすれば、ボタンひとつでキャッシュを削除することができます。
 Clear Cache - Chrome ウェブストア
であればはじめから簡単な方を書けば良い...と言われてしまいそうですが、人によって、また使い方によって「より簡単」と感じる方法が異なるかもしれませんので2つの方法を書きました。あなたはどちらの方法が簡単と感じましたか? ちなみに私は後者の拡張機能「Clear Chche」を利用しています。

今年の春は寒暖の差が激しいですね。桜も咲くタイミングを計りかねたようです。つくしんぼうは、マイペースで伸びていました。ブログのページビューもマイペースで伸びていくことを願いたいですね。

-デジタルメディア
-, , , ,

Copyright© ミラーレス一眼カメラとオールドレンズで撮る草花ポートレート写真 , 2020 All Rights Reserved.