WordPressでCSSがデザインに反映されない時の対処法【スーパーリロード】
「WordPressでデザインを変えようと思い、CSSを編集したんだけど、デザインが全く変わりません。何が悪いのやら…助けて…」
こういった疑問に答えます。
本記事の内容
- WordPressでCSSがデザインに反映されない時の対処法
記事の信頼性
今回は、WordPressで、編集したCSSがデザインに反映されないときの対処法を解説します。
先に結論を言うと、私の場合は、
原因：ブラウザキャッシュが残っている
対処法：スーパーリロードを行う
で解決しました。
上記についてはもちろん、それ以外の原因と対処法についてもわかりやすく解説しています。
「編集したCSSがデザインに反映されない…」とお困りの方はぜひご覧ください
目次
WordPressでCSSを編集する方法
最初に、WordPressでCSSを編集する方法をお伝えします
CSSの編集方法は以下の３つ
- 方法①：CSSを直接編集する
- 方法②：子テーマを作る
- 方法③：追加CSSを作る
順に見ていきます。
方法①：CSSを直接編集する
１つめはお使いのWordPressテーマのCSSを直接編集すること。
注意点として、何かあったとき元に戻せるように、CSSのバックアップを取っておくのをお忘れなく。
まず、WordPressの管理画面で左メニューから、[外観] > [テーマエディター]をクリックします。
画面右に表示されるテーマファイルの中から、「style.css」をクリックします（注：お使いのテーマによって表示は異なる）
表示された「style.css」を編集していきます
この画面上で編集してもよいし、別エディターで編集したものをこちらにコピペするでもOK
» HTMLエディタのおすすめ３選【初心者も使いやすい無料版】
編集したら最後に画面下にある[ファイルを更新]をクリックします
方法②：子テーマを作る
２つめは、WordPressの子テーマを作ること。
詳しくはこちらの外部サイトを参考にどうぞ
方法③：追加CSSを作る
３つめは、WordPressで追加CSSを作ること。
詳しくはこちらの外部サイトを参考にどうぞ
WordPressでCSSがデザインに反映されない原因
上述した方法でWordPressのCSSを編集しても、デザインに反映されない原因としては、以下の２つがあるでしょう
私の場合は①でした(^o^)/
- 原因①：キャッシュが残っている
- 原因②：CSSの記載ミス
順に見ていきます。
原因①：キャッシュが残っている
キャッシュとは、Webページの読み込みを早くするために、本来のファイルとは別に用意しておくことです。
キャッシュされたCSSファイルを読み込んでしまうと、編集後のCSSファイルが読み込まれないので、修正内容が反映されません。
キャッシュには、
- ブラウザキャッシュ
- サーバーキャッシュ
の２種類があります。
ブラウザキャッシュ
ブラウザキャッシュは、ChromeやEdge、Firefox、Safariなどすべてのウェブブラウザに搭載されています。
サーバーキャッシュ
サーバーキャッシュは、キャッシュプラグインにより生成されている場合が多いです。
該当のプラグインとしては、
・W3 Total Cache
・WP Fastest Cache
などがあります。
このように、原因の１つめはブラウザあるいはサーバーのキャッシュが残っていること。
原因②：CSSの記載ミス
原因の２つめは、CSSの記載をミスっていること。
CSSの記載ミスとしては以下の２種類があるでしょう
- CSSの文法ミス
- 優先度の考慮もれ
CSSの文法ミス
いわゆるポカミス。
ミスの事例は、こちらの外部サイトをご覧ください
優先度の考慮もれ
CSSでは適用される詳細度や優先度が決まっています。
たとえば、CSSのセレクタでは「id」がもっとも優先度が高く、次に「class」「要素」の順です。
これらの優先度を考慮していないと、CSSの編集が反映されません
WordPressでCSSがデザインに反映されないときの対処法
では対処法を紹介します
私の場合は①で治りました(^o^)/
- 対処①：スーパーリロードを行う
- 対処②：キャッシュを削除する
- 対処③：CSSの記載ミスを修正する
順に見ていきます。
対処①：スーパーリロードを試す
ブラウザキャッシュが原因でCSSが反映されない場合、もっとも簡単にキャッシュの影響を排除できる方法はスーパーリロードです。
スーパーリロードとは、ブラウザのキャッシュを残しつつ、サーバーにある新しいデータを取り込む操作。
スーパーリロードを実行することによって、CSSの変更がしっかりと反映されます。
スーパーリロードの方法は、Shift+更新ボタンです。
Google Chromeの場合は、Shiftを押しながら、ここをクリック
Safariの場合は、Shiftを押しながら、ここをクリック
Firefoxの場合は、Shiftを押しながら、ここをクリック
これで治るケースが多いかと。
対処②：キャッシュを削除する
上記のスーパーリロードを試しても治らない場合は、キャッシュを削除してみましょう。
ブラウザキャッシュを削除する方法
1つ目は、ブラウザキャッシュの削除。
ブラウザキャッシュの削除は、お使いのブラウザによって手順が異なります。
以下ではまず、Google Chromeについて紹介しましょう。
画面右上から、[３点マーク] > [履歴] > [履歴]をクリックします
[閲覧履歴データの削除]をクリックします。
期間を「全期間」にして、[データを削除]をクリックします。
以上で完了！
Chrome以外のブラウザで、キャッシュをクリアする方法は、以下を参考にどうぞ。
» Safari キャッシュクリア方法
» Firefox キャッシュクリア方法
» Edge キャッシュクリア方法
サーバーキャッシュを削除する方法
こちらは、キャッシュ関連のWordPressプラグインを使ってる方向けです。
たとえば、WP Fastest Cacheを使っている方ですと、画面上部のメニューから[Delete Cache]をクリックします
詳しくは、以下をご覧ください。
» WP Fastest Cacheの設定方法｜ページ高速化におすすめのプラグイン
対処③：CSSの記載ミスを修正する
対処①②でも治らない場合は、CSSの記載ミスがないか見直しましょう
さきほどお伝えしたように、
- CSSの文法ミス
- 優先度の考慮もれ
が無いかを見直すということ
CSSの文法ミスについては、こちらの外部サイトを参考にしてみてください
優先度の考慮もれについては、こちらの外部サイトが参考になるかと
以上、対処法を３つ紹介しました。
まとめ
WordPressで、編集したCSSがデザインに反映されないときの対処法を紹介しました
私の場合は、
原因：ブラウザキャッシュが残っている
対処法：スーパーリロードを行う
で解決しました。
参考になれば幸いです (^o^)/
今後もし、CSSを編集してないのにデザインが崩れたときは、以下の記事を参考にどうぞ
» WordPressの表示がおかしい時の対処法【画面レイアウトが崩れる】
なお、WordPressに関する記事は以下にまとめてますので、あわせてご覧ください
» 【ブロガー向け】WordPress習得への完全マップ
今回は以上です。