WordPress CSSの変更が反映されない時の対応

WordPressを使っていると、サイトをいろいろカスタマイズしたくなるものです。細かいカスタマイズをする時はCSSファイルを編集しますが、WordPressの機能を使うとCSSファイルの変更結果をリアルタイムで確認する事がです。ですが、このCSSファイルを変更しても変更結果がサイトに反映されないと悩んだ事はないでしょうか。CSSのコードをチェックしても構文に間違いも無く、または、さっきと同じ記述に戻しているのに、さっきは動作したのに今はうまく動作しないという経験があると思います。こちらでは、CSSの変更が反映されない時の対応方法を記載していますので、困った時は試してみてください。

CSSの変更が反映されない時の、よくある例としては下記のケースがあるのですが、ここではこれらを全てチェックしたのにCSSの変更が反映されない場合の対処方法です。

• キャッシュが残っている
• CSSの文法が間違っている
• 他の項目が優先されている

CSSの変更が正常に反映される例

順を追って分かりやすく説明するために、まずはCSSの変更が正常に反映される例を説明します。CSSを変更するには、ナビゲーションメニューの[外観]の中の[カスタマイズ]をクリックします。

下のような画面になったら、メニューから[追加CSS]をクリックします。

なんらかのカスタマイズをしている場合は、カスタマイズ用に記述したCSSコードが表示されます。何もカスタマイズしていない場合は、何も表示されません。

では、ここにカスタマイズ用のコードを記述してみましょう。テスト用に次のコードを用意したので、コピー＆ペーストで貼り付けしてみてください。

.widget_archive ul li a:hover {
  background: transparent;
  margin-left: 5px;
  background-color: #99ffbb;
}

追加したCSSコードの機能ですが、画面の右側にアーカイブのウィジェットがあるのですが、この部分にマウスカーソルを移動させると、項目が少し右側にずれて色が変わるというものです。コードを記述したら実際にマウスカーソルをアーカイブの上に移動させてみましょう。

アーカイブの上にマウスカーソルを置くと、マウスカーソルが置かれた項目の色が緑色に変化して、項目が少し右側にずれているのが確認できます。ここまでは、CSSファイルの変更が正常に反映される場合の説明でした。

CSSの変更が反映されない例

これまでは、CSSの変更が正常に反映される場合を説明してきました。次に、CSSの変更が正常に反映されない場合を説明していきます。先ほどはアーカイブの上にマウスカーソルを置くと、項目が薄緑色に変化しました。この色を変更してみましょう。色の設定である background-color のパラメータを#55ffbb に変更してみます。

色のパラメータ変更が終わったら、マウスカーソルを再びアーカイブの項目の上に移動させてみます。すると何故か色の変更が反映されないどころか、あたかも色の設定がしていないかの様に色が変化しません。文字が少し右に動いているので色以外の機能は動作しています。変更したのは色の設定だけなので構文的に間違いがあるわけでは無いです。いったい何故でしょう？？？

CSSの変更を正常に反映させる方法

ここからは、CSSの変更を正常に反映させる方法を記載していきます。まずは記述したCSSを一旦削除しましょう。

削除したら、色のパラメータが変更済みの次のコードをコピー＆ペーストで貼り付けします。または事前にメモ帳等で変更コードを作成しておいて、それをコピー＆ペーストで貼り付けします。

.widget_archive ul li a:hover {
  background: transparent;
  margin-left: 5px;
  background-color: #ff22bb;
}

コードを貼り付けしたら、マウスカーソルを再びアーカイブの上に置いてみましょう。すると、なんという事でしょう、色の変更が正常に反映されるようになりました。

CSSの変更が正常に反映されない原因

CSSの変更が正常に反映されない原因は、正直言うとよくわかりません。おそらくWordPressの仕様か、バージョン的な事だと思いますが予想は下記になります。

正常に反映されない場合を時系列に考えてみると、まずは正常なコードの状態でコードの一部を変更するという作業が発生すると、コードの変更中は一時的にCSSコードのプログラムエラーがあるという状態を経由する事になります。WordPressのCSSの変更／確認機能はリアルタイムで動作しているため、何らかのエラー処理状態になって、全体が正常なコードに戻ってもエラー処理を継続していると予想します。

CSSの変更が正常に反映されない場合は、事前にCSSコードをメモ帳で作っておいて、コピー＆ペーストで貼り付けする事を試してみてください。