WordPressでCSSを編集してもブログデザインの変更が反映されない

どうも。葉です。

この記事では、WordPressでCSSを編集しても、ブログデザインに変更が反映されなかった場合の原因と対処法をお話していきます。

1.ブログデザインが反映されない原因はキャッシュにある!

まず、CSSを編集したのにブログデザインの変更が反映されない原因からお話していきますね。原因の9割は、キャッシュにあります。

キャッシュとは?

キャッシュとは、あなたが見たWebページを「一時的に保存したファイル」のことです。

一般的にWebページというのは、特定のページにアクセスすると、データベースから「呼び出し→読み込み→表示」という順をえてPC上で表示されます。

静的ページの表示順序

しかし、キャッシュ(一時的に保存したファイル)が存在している場合は、データベースからデータを読み込まずに、キャッシュ(一時的に保存したファイル)をそのまま表示させます。

CSSを編集前のキャッシュが表示されている

キャッシュがあると、データベースからデータを読むこむという行程を省略できるので、ページ表示速度が早くなり、ユーザーは快適なウェブブラウジングを楽しむことができます。

しかし、ブログデザイン等を変更した場合は、それがアダになってしまいます。どういうことかというと、CSSを編集したのに、CSSを変更する前のキャッシュを読み込んでしまうので、CSS変更前のデザインが表示されてしまうのです。

これを解決するには、残っているキャッシュを削除すればOKです。ということで、ここからは、キャッシュを削除する方法を解説していきます。

2.キャッシュを削除して更新したらOK!

ブログデザインが変更されない原因は、主に、次の2つのキャッシュが影響しています。

それぞれのキャッシュを削除していきましょう。

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

おそらく、ほとんどの場合は、ブラウザキャッシュを削除すれば、問題は解決されるはずです。主要ブラウザである、Chrome、Firefox、Edgeでのキャッシュ削除手順を解説していきます。

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

下の図を参考に「履歴」をクリックしてください。

Chromeのキャッシュを削除する手順1

「閲覧履歴データの消去…」をクリックして下さい。

Chromeのキャッシュを削除する手順2

下図のように

  • 期間は、「すべて」を選択
  • 「キャッシュされた画像とファイル」にチェック(他の項目のチェックは任意で外してください。)

された状態で、「閲覧履歴データを消去する」をクリックしてください。

Chromeのキャッシュを削除する手順3

これで、Chromeのブラウザキャッシュは削除されました。この状態で、ブログを再読込してください。デザインの変更が反映されているはずです。

もし、デザインの変更が反映されていなかったら、「3.データベースキャッシュを削除」を行ってください。

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

下図を参考に「履歴」をクリックしてください。

Firefoxのキャッシュを削除する手順1

「最近の履歴を消去…」をクリックしてください。

Firefoxのキャッシュを削除する手順2

  • 「すべての履歴」を選択
  • 「キャッシュ」にチェック

した状態で「今すぐ消去」をクリックしてください。

Firefoxのキャッシュを削除する手順3

これで、Firefoxのブラウザキャッシュは削除されました。この状態で、ブログを再読込してください。デザインの変更が反映されているはずです。

もし、デザインの変更が反映されていなかったら、「3.データベースキャッシュを削除」を行ってください。

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

下図を参考に「設定」をクリックしてください。

Edgeのキャッシュを削除する手順1

「クリアするデータの選択」をクリックしてください。

Edgeのキャッシュを削除する手順2

「キャッシュされたデータとファイル」にチェックを入れて「クリア」をクリックしてください。

Edgeのキャッシュを削除する手順3

これで、Edgeのブラウザキャッシュは削除されました。この状態で、ブログを再読込してください。デザインの変更が反映されているはずです。

もし、デザインの変更が反映されていなかったら、「3.データベースキャッシュを削除」を行ってください。

3.データベースキャッシュを削除

ブラウザキャッシュを削除してもデザインの変更が反映されない場合は、さらにデータベースキャッシュを削除しましょう。

通常、WordPressでは、データベースキャッシュは保存されないようになっています。ですが、キャッシュ系プラグインを使用していると、データベースキャッシュが保存されてしまいます。

なので、キャッシュ系プラグインを停止または、データベースキャッシュ機能を停止させてください。ちなみに、キャッシュ系プラグインとは次のようなプラグインです。

  • W3 Total Cache
  • Wp Super Cache
  • WP Fastest Cache
  • DB Cache Reloaded Fix
  • WP File Cache
  • etc…

キャッシュ系プラグインを停止した後に、WordPressブログを再度読み込んでください。これで、WordPressブログのデザイン編集が反映されているはずです。

4.まとめ

この記事では、WordPressでCSSを編集したのに、ブログデザインの変更が反映されない原因と、その解決策は、キャッシュにあることをお話しました。

多くの方は、ブラウザキャッシュを削除すれば解決されたと思います。また、キャッシュ系プラグインを使っていた人にとっては盲点だったかもしれませんね。

最後まで読んでいただきありがとうございました。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします