ワードプレスでCSSが効かない(反映されない)時の対処法を紹介

こんにちは、宮瀬です。

 

ワードプレスに慣れてきたら、そろそろ自分でCSSを変更してカスタマイズしていきたくなります。

しかし、ワードプレスでは、いくら変更してもCSSが効かない(反映されない)場合があります。

 

そこで今回は、ワードプレスでCSSが効かない時の対処法を紹介していきます。

なぜワードプレスではCSSの変更が効かないの?

私も詳しいことはわからないのですが、ワードプレスではcookieで古い情報を優先して読み込むことがあるようです。

ですので、「テーマの編集」で変更しても、新しい情報よりも古い情報が読み込まれ、CSSが効いていないように見えます。

 

そうですね、この時点で、もしかしたらあなたも気付いているかもしれませんね。

早速、対処法の紹介をしていきます。

ワードプレスでCSSの変更が効かない(反映されない)時の2つの対処法

ワードプレスでCSSの変更が効かない時には、大きく2つの対処法があります。

  1. cookieの削除。
  2. シークレットウィンドウで見る。

 

cookieを削除して、ワードプレスにCSSを反映させる

先ほど、

「ワードプレスではcookieで古い情報を優先して読み込むことがある」

とお話しました。

 

ですので、古い情報を消してあげれば、CSSの変更が反映されるのです。

 

それでは、グーグルクロームでのcookieの削除方法を見ていきましょう。

右上から、メニューを開いてください。

 

そして「設定」⇒「詳細設定を表示」⇒「閲覧履歴データの消去」⇒「閲覧履歴データを消去」

これで、cookieが消えます。

ただ、cookieを消去すると、ワードプレスのログインも切れてしまうので、再ログインする必要があります。

 

ここまでの流れを、画像で見ていきましょう。

cookieの消去方法①
設定 ⇒ 詳細設定を表示

 

cookieの消去方法②
閲覧履歴データの消去

 

cookieの消去方法③
閲覧履歴データを消去

シークレットウィンドウで見れば、サクッとCSSの変更を確認できる

さて、cookieを消去するやり方を見てきましたが、さまざまなログイン情報がリセットされてしまうというデメリットがありました。

ASPやワードプレスなど、ログイン情報をCSS確認のたびに再入力するのは、面倒です。

そこで、シークレットウィンドウを使いましょう!

 

シークレットウィンドウを開いて、自分のブログのURLを入力してみましょう。

表示されたページでは、変更したCSSが効いてる(反映されている)はずです。

 

シークレットウィンドウは、開くたびにまっさらな状態のブラウザが開きます。

また、cookieも閉じるたびに消去されるため、ワードプレスでのCSSの確認にもってこいです。

ちなみに、私はこの方法を使ってCSSが効いているかどうかを確認しています。

おわりに

今回は、ワードプレスでCSSの変更が効かない(反映されない)場合の原因と対処法をご紹介しましたが、いかがでしたでしょうか?

実は、CSSをきちんと記述すれば、デザインの変更は効いている(反映されている)んです。

しかし、自分が使っているブラウザの影響で、その反映が表示されていないだけです。

 

また、今回はcookieを消去して、古い情報を強制的に消しましたが、数日経てば表示されるデザインも変更されます。

ただ、CSSの変更でレイアウトが崩れてしまっている場合もあるので、シークレットウィンドウで確認しておくようにしましょう。

では、今回はこのへんで。