WordPressは、公開されているページではstyle.css、投稿を編集するページではeditor.style.cssがレイアウト・文字装飾などのデザイン関係に使われています。

公開されてるページではテーマや使用中プラグインによって他のCSSファイルも使われますが、基本的にはstyle.cssが使われています。

しかし、これらのcssをカスタマイズしてみたものの、なぜか反映されない、何回保存しても一向に変化がないということもあるでしょう。

今回はstyle.css・editor-style.cssのカスタマイズ内容が反映されない原因や解決方法を紹介していきます。

style.cssやeditor-style.cssの変更が反映されない原因

style.cssやeditor-style.cssの変更内容が反映されない理由はいくつかあります。

ほとんどの場合、ここで紹介するいずれかのことが原因です。
一つ一つ原因を見ていて、心当たりあるものを探してみましょう。

テーマやプラグインのキャッシュ機能が働いている

WP Fastest CacheやAutoptimizeなどのキャッシュプラグインを導入していた場合、キャッシュプラグインのキャッシュが読み込まれる影響で最新のstyle.cssなどが読み込まれていない可能性があります。

キャッシュ機能はプラグインを使って導入する方が多いと思いますが、テーマにキャッシュ機能が備わっていた場合、テーマ固有の設定を触る必要も出てきます。

ブラウザにキャッシュが残っている

キャッシュ機能を持つプラグインやテーマを導入していなくても、ブラウザが持つキャッシュ機能が働いて変更内容が反映されないことがあります。

これはWordppressに限った話ではないので覚えておくと良いでしょう。

サーバーにキャッシュが残っている

使用してるサーバーにもキャッシュ機能があった場合、テーマやプラグインブラウザにあるキャッシュをいくら削除しても、カスタマイズ内容が反映されないトラブルが発生します。

CSSの記述ミスをしている

結構ありがちですが単純にCSSの記述ミスをしている可能性もあります。

  • CSSの書き方を間違っている
  • CSSの優先順位の関係で変更が別の設定で上書きされている

CSSがうまく反映されなかったり、なぜかいじってない所のレイアウト・デザインが崩れたという場合はこの原因を疑うようにしましょう。

WordPressのファイルバージョン管理機能が働いている

これはeditor-style.cssで起きやすいものですが、WordpressはCSSなどのファイルに自動的にバージョンを割り振っています。

このバージョンが更新されない限りいくらキャッシュを削除してもカスタマイズ前のCSSが読み込まれることになり、変更がいつまでたっても反映されなくなります。

変更の反映トラブルを解決する方法まとめ

style.cssやeditor-style.cssが反映されない原因は以上です。

ここからはstyle.css・editor-style.cssの変更が反映されないトラブルの解決方法を一つずつ紹介していきます。

使用中のキャッシュプラグインのキャッシュを削除する

キャッシュプラグインやキャッシュ機能を持つテーマを使用している場合は真っ先にキャッシュを削除してください。

テーマファイルの変更を自動的に検知してキャッシュを自動削除してくれるプラグインもあるかもしれませんが、あまり期待せず自分で削除するようにしましょう。

Ctrl+F5キーでスーパーリロードを行う

基本的にCSSなどのリソースファイルを変更した際は、ブラウザのキャッシュを削除してアクセスします。

各ブラウザの設定からキャッシュを一括削除してアクセスし直す方法もありますが、その方法では毎回設定画面を開く必要があるので非常に面倒です。

そういう場合は[Ctrl+F5]キーでスーパーリロードを行うことがおすすめです。
スーパーリロードを行うとそのページで読み込むファイルをキャッシュの有無に関わらず再度ダウンロードし直すため、最新のファイルが適用されてWebページが表示されるようになります。

そのため、スーパーリロードを行うことでカスタマイズ後のstyle.cssやeditor-style.cssが読み込まれて、正しく表示されるようになる可能性があります。

サーバーのキャッシュを削除する

エックスサーバーやConoHa WINGなどの一部のレンタルサーバーはサーバー機能としてキャッシュ機能が提供されています。

どれくらいの間キャッシュされるのかは使用するサービスによって異なりますが、この機能を有効化していた場合はどれだけテーマやプラグインやブラウザのキャッシュを削除しても最新のCSSが読み込まれない状態になります。

ですので、使用しているサーバーにキャッシュ機能があるかどうか、あった場合はその機能を有効化していないか確認しておいてください。

別のブラウザで開いてみる

ブラウザのキャッシュなどを削除しても変更内容が反映されない場合は、何らかの不具合でキャッシュが残ったままになってしまい、カスタマイズした後の最新のCSSファイルが読み込まれていない可能性があります。

テーマやプラグイン・ブラウザのキャッシュを削除してもうまくいかない場合は別のブラウザでWordPressの管理画面やトップページなどを開いてみてください。

WordPressのファイルバージョン管理機能を停止させる

言うのはカンタンですがWordpressの設定にファイルバージョンの管理機能を設定できる項目はなく、テーマのfunctions.phpを編集することになります。

といっても以下のソースコードをfunctions.phpに追加するだけです。

functionextend_tiny_mce_before_init($mce_init){

$mce_init['cache_suffix']='v='.time();

return$mce_init;
}
add_filter('tiny_mce_before_init','extend_tiny_mce_before_init');

functions.phpの編集方法さえわかっていれば簡単ですが、間違えると画面が真っ白になる可能性があるほか、消してはいけないソースコードを削除してしまう危険性もあるので、わからなくて不安という場合はご相談ください。

お問い合わせ

CSSのエラー・優先順位をチェックする

当然ですがCSSの記述にミスが有ると正しく反映されません。
CSSに関してしっかり理解している場合は、CSSを見直しておかしなところがないかどうか確認するようにしてください。

 

記述の仕方によっては「!important」をつけていても優先順位の関係で反映されないこともあるので注意が必要です。

どこを直せばいいのか分からない場合は当サイトまでお問い合わせください。

まとめ：対策の流れがよくわからない場合はお問い合わせください

style.cssやeditor-style.cssのカスタマイズ内容がうまく反映されない、テーマファイルを触ってWordpressを破壊してしまわないか不安という方は当サイトまでご相談ください。

状況をお伺いさせていただいて、style.cssなどのトラブルを解決させていただきます。

それ以外にもセキュリティ対策などの対応もできますので、お問い合わせお待ちしています。