2022.01.20WordPressを使っていると、サイトをいろいろカスタマイズしたくなるものです。細かいカスタマイズをする時はCSSファイルを編集しますが、WordPressの機能を使うとCSSファイルの変更結果をリアルタイムで確認する事がです。このCSSファイルを変更しても変更結果がサイトに反映されないと悩んだ事はないでしょうか。CSSのコードをチェックしても構文に間違いも無く、または、さっきと同じ記述に戻しているのに、さっきは動作したのに今はうまく動作しないという経験があると思います。こちらでは、CSSの変更が反映されない時の対応方法を記載していますので、困った時は試してみてください。CSSの変更が反映されない時の、よくある例としては下記のケースがあるのですが、ここではこれらを全てチェックしたのにCSSの変更が反映されない場合の対処方法です。順を追って分かりやすく説明するために、まずはCSSの変更が正常に反映される例を説明します。CSSを変更するには、ナビゲーションメニューの[外観]の中の[カスタマイズ]をクリックします。下のような画面になったら、メニューから[追加CSS]をクリックします。なんらかのカスタマイズをしている場合は、カスタマイズ用に記述したCSSコードが表示されます。何もカスタマイズしていない場合は、何も表示されません。ここにカスタマイズ用のコードを記述してみましょう。テスト用に次のコードを用意したので、コピー&ペーストで貼り付けしてみてください。#99ffbb;}追加したCSSコードの機能ですが、画面の右側にアーカイブのウィジェットがあるのですが、この部分にマウスカーソルを移動させると、項目が少し右側にずれて色が変わるというものです。コードを記述したら実際にマウスカーソルをアーカイブの上に移動させてみましょう。アーカイブの上にマウスカーソルを置くと、マウスカーソルが置かれた項目の色が緑色に変化して、項目が少し右側にずれているのが確認できます。ここまでは、CSSファイルの変更が正常に反映される場合の説明でした。CSSの変更が反映されない例これまでは、CSSの変更が正常に反映される場合を説明してきました。次に、CSSの変更が正常に反映されない場合を説明していきます。先ほどはアーカイブの上にマウスカーソルを置くと、項目が薄緑色に変化しました。この色を変更してみましょう。色のパラメータ変更が終わったら、マウスカーソルを再びアーカイブの項目の上に移動させてみます。すると何故か色の変更が反映されないどころか、あたかも色の設定がしていないかの様に色が変化しません。文字が少し右に動いているので色以外の機能は動作しています。変更したのは色の設定だけなので構文的に間違いがあるわけでは無いです。???CSSの変更を正常に反映させる方法ここからは、CSSの変更を正常に反映させる方法を記載していきます。記述したCSSを一旦削除しましょう。削除したら、色のパラメータが変更済みの次のコードをコピー&ペーストで貼り付けします。事前にメモ帳等で変更コードを作成しておいて、それをコピー&ペーストで貼り付けします。#ff22bb;}コードを貼り付けしたら、マウスカーソルを再びアーカイブの上に置いてみましょう。すると、なんという事でしょう、色の変更が正常に反映されるようになりました。CSSの変更が正常に反映されない原因CSSの変更が正常に反映されない原因は、正直言うとよくわかりません。WordPressの仕様か、バージョン的な事だと思いますが予想は下記になります。正常に反映されない場合を時系列に考えてみると、まずは正常なコードの状態でコードの一部を変更するという作業が発生すると、コードの変更中は一時的にCSSコードのプログラムエラーがあるという状態を経由する事になります。WordPressのCSSの変更/確認機能はリアルタイムで動作しているため、何らかのエラー処理状態になって、全体が正常なコードに戻ってもエラー処理を継続していると予想します。CSSの変更が正常に反映されない場合は、事前にCSSコードをメモ帳で作っておいて、コピー&ペーストで貼り付けする事を試してみてください。Python・Cocoon・WordPress関連記事WordPressWordPressの最大アップロードサイズを変更する方法ファイルのアップロードサイズを増やす方法を紹介。WordPress初心者が必ず思う疑問。WordPressWordPressのサイドバーに投稿数を表示WordPressで作ったブログの投稿数を管理する際に、投稿数が表示されると便利です。投稿数の表示方法を紹介。WordPressFTPソフトを使ってみようFTPソフトって何?FTPソフトはインターネット上にあるサーバーのファイル操作をするソフトです。