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