ワードプレス

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

更新日:

つくしんぼう

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」を利用しています。

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

プロフィール

畑本伸一

 奏でる写真作家| 畑本伸一
1969年 大阪市生まれ 京都市在住。写真作家|写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。デジタル写真教室 講師フォトマスター検定1級写真印刷ツールデザイン制作|写真・カメラ・Webメディアに関する執筆。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Twitter  Instagram  Google+ RSS Feedly

PickUp

見上げる桜 1

トップページの記事一覧に表示されているサムネイル画像を大きくしたいと思いませんか? 当ブログで利用しているワードプレステーマを WING - AFFINGER5 に変えて数日が経ちます。多くの事が管理 ...

京都 円山公園の桜|2018.3.28 2

当ブログでも採用しているワードプレスのテーマ「AFFINGER」の最新版「AFFINGER5 WING」の公開及び販売が始まりました。今回も大幅に機能アップや高速化が図られている模様です。早速購入。AFFINGER4購入者は期間限定でお買い求め安くなっています。

-ワードプレス
-, , , ,

Copyright© フォトクリエイティブ|写真のある暮らし , 2018 All Rights Reserved.