CSSが反映されないときに確認したい7つの原因

こんにちは、Dr.WordPressです。

WordPressでサイトをカスタマイズしていると、

「CSSを書いたのにデザインが変わらない」

「文字色を変更したのに反映されない」

「追加CSSに書いたのに何も変わらない」

「PCでは反映されるのにスマホでは変わらない」

といったことがあります。

CSSが反映されないと、

「CSSの書き方を間違えた？」

と思って何度もコードを書き直してしまいがちです。

しかし、CSSが反映されない原因は、コードの間違いだけとは限りません。

キャッシュやCSSの優先順位、スマホ用CSS、編集しているCSSファイルの違いなど、さまざまな原因が考えられます。

今回は、WordPressでCSSを変更したのに反映されないときに確認したい7つの原因と対処法をご紹介します。

WordPressでCSSが反映されないとき、最初に確認すること

CSSを変更しても見た目が変わらない場合、いきなりコードを書き直す必要はありません。

まずは、

「変更したCSSが正しく読み込まれているか」

を確認してみましょう。

WordPressでは、CSSを変更して保存したあと、ブラウザが新しいCSSを読み込むことでデザインが変更されます。

この途中で古いCSSが読み込まれていたり、別のCSSに上書きされていたりすると、コード自体が正しくてもデザインが変わらないことがあります。

それでは、原因を順番に確認していきましょう。

1. ブラウザのキャッシュが残っている

まず確認したいのがブラウザのキャッシュです。

ブラウザには、一度読み込んだCSSや画像などのデータを保存して、次回以降のページ表示を速くする仕組みがあります。

そのため、CSSファイルを変更していても、ブラウザ側では変更前のCSSが表示され続けている場合があります。

CSSを変更したのに何も変わらない場合は、まずページを再読み込みしてみましょう。

通常の再読み込みでも変わらない場合は、キャッシュを削除したり、シークレットウィンドウや別のブラウザで確認したりする方法もあります。

「CSSは合っているはずなのに全然変わらない」

という場合は、最初に確認したいポイントです。

2. WordPressやサーバー側のキャッシュが残っている

ブラウザを再読み込みしてもCSSが反映されない場合は、WordPressやサーバー側のキャッシュも確認します。

WordPressサイトでは、

・キャッシュ系プラグイン

・レンタルサーバーのキャッシュ機能

・CDN

・テーマ独自のキャッシュ機能

などが使われている場合があります。

この場合、ブラウザ側のキャッシュを削除しても、サーバーから古いCSSが読み込まれているため変更が反映されないことがあります。

特に、

「WordPressではCSSを保存できているのに、サイトを見ると変わっていない」

という場合は確認してみましょう。

キャッシュ機能は使用しているプラグインやサーバーによって操作方法が異なります。

よく分からない状態で設定を変更するのではなく、まずはどのキャッシュ機能が使用されているのか確認することをおすすめします。

関連記事：WordPressの更新、そのまま押して大丈夫？更新前に確認したい5つのこと

WordPressの「更新」、そのまま押して大丈夫？更新前に確認したい5つのこと

3. CSSの記述に間違いがある

キャッシュに問題がなければ、次はCSSの記述を確認します。

例えば、

・セミコロンが抜けている

・閉じ括弧が抜けている

・クラス名を間違えている

・プロパティ名を間違えている

・全角文字が混ざっている

・セレクタの書き方を間違えている

などです。

少しの記述ミスでも、意図したCSSが正常に反映されないことがあります。

また、今回追加したCSSではなく、それより前に記述されているCSSに問題がある場合もあります。

追加した部分だけではなく、周辺のCSSも確認してみましょう。

4. CSSの優先順位で負けている

WordPressでCSSが反映されないときによくあるのが、CSSの優先順位です。

CSSには、複数のスタイルが同じ場所に指定されている場合に、どのCSSを優先するのかを決めるルールがあります。

自分で追加したCSSよりも、テーマやプラグイン側のCSSが優先されていると、正しいCSSを書いていても見た目が変わらないことがあります。

WordPressでは、

・使用しているテーマ

・WordPressのブロック

・ページビルダー

・プラグイン

・追加CSS

など、さまざまな場所からCSSが読み込まれています。

「CSSの書き方は合っているのに反映されない」

という場合は、別のCSSに上書きされていないか確認してみましょう。

importantを使えば解決する？

CSSが反映されない場合に、importantを使用する方法を見かけることがあります。

importantを指定することでCSSが反映される場合もあります。

しかし、何でもimportantで解決するのはおすすめできません。

後からCSSを変更するときに優先順位が複雑になり、管理しにくくなることがあるためです。

まずは、なぜ現在のCSSが反映されていないのかを確認することが大切です。

5. 指定しているクラスや要素が違う

意外と多いのが、変更したい場所とCSSで指定している場所が一致していないケースです。

WordPressでは、テーマやブロック、プラグインなどによって複数のクラスが設定されている場合があります。

そのため、見た目だけで判断してCSSを指定すると、実際には違うクラスを指定していることがあります。

このような場合は、ブラウザの開発者ツールを使って実際のHTMLを確認すると原因を見つけやすくなります。

開発者ツールで確認してみる

Google Chromeなどでは、変更したい部分を右クリックして「検証」を選択すると、その部分に設定されているHTMLやCSSを確認できます。

ここを見ることで、

・自分のCSSが読み込まれているか

・別のCSSに上書きされているか

・指定しているクラスが正しいか

などを確認できます。

CSSが反映されない原因を調べるときに便利な機能です。

6. PCでは反映されるのにスマホではCSSが反映されない

「パソコンでは変更できたのに、スマホではデザインが変わらない」

という場合は、スマートフォン用のCSSを確認してみましょう。

レスポンシブ対応のWordPressサイトでは、画面幅によって異なるCSSが設定されていることがあります。

そのため、通常のCSSを変更しても、スマートフォンでは別のCSSに上書きされている可能性があります。

特に、

「PCではCSSが反映されるのにスマホだけ反映されない」

という場合は、スマホ用のCSSやメディアクエリが設定されていないか確認してみましょう。

関連記事：WordPressでスマホだけ表示が崩れる原因7選

WordPressでスマホだけ表示が崩れる原因7選

7. 編集しているCSSファイルが違う

最後に確認したいのが、本当にそのCSSファイルがサイトで使用されているのかという点です。

WordPressでは、

・親テーマのstyle.css

・子テーマのstyle.css

・WordPressの追加CSS

・テーマ独自のCSS

・プラグインのCSS

・独自に作成されたCSSファイル

など、複数の場所からCSSが読み込まれている場合があります。

そのため、

「style.cssを変更しているのに全然反映されない」

と思って調べてみると、実際には別のCSSファイルが使用されていたということもあります。

特に制作会社が独自に作成したWordPressテーマでは、style.css以外のCSSファイルでデザインを管理している場合があります。

子テーマを使用している場合も確認する

WordPressでは、親テーマと子テーマを組み合わせて使用することがあります。

親テーマのCSSを変更しているつもりでも、実際には子テーマ側のCSSが優先されている場合があります。

反対に、子テーマへCSSを書いたものの、正しく読み込まれていないケースもあります。

「どのファイルを変更すればいいのか分からない」

という場合は、まず現在読み込まれているCSSファイルを確認してみましょう。

WordPressでCSSが反映されないときの確認順序

CSSが反映されない場合は、コードを何度も書き直すよりも、順番に原因を確認する方が解決しやすくなります。

次の順番で確認してみてください。

STEP 1

ページを再読み込みする

STEP 2

ブラウザのキャッシュを確認する

STEP 3

WordPressやサーバー側のキャッシュを確認する

STEP 4

CSSの記述ミスを確認する

STEP 5

開発者ツールでCSSの優先順位を確認する

STEP 6

指定しているクラスや要素を確認する

STEP 7

スマホ用CSSや読み込まれているCSSファイルを確認する

この順番で確認すると、

「CSS自体が読み込まれていないのか」

「CSSは読み込まれているけれど、別のCSSに上書きされているのか」

を切り分けやすくなります。

まとめ

WordPressでCSSが反映されない場合は、

ブラウザのキャッシュ

WordPressやサーバー側のキャッシュ

CSSの記述ミス

CSSの優先順位

指定しているクラスや要素

スマホ用CSS

編集しているCSSファイル

を順番に確認してみましょう。

特に、

「CSSを書いているのにまったく反映されない」

という場合でも、CSSそのものが間違っているとは限りません。

キャッシュやテーマ側のCSS、プラグイン、スマホ用CSSなどが原因になっている可能性があります。

それでも、

「どのCSSが原因なのか分からない」

「開発者ツールを見ても分からない」

「制作会社が作ったWordPressなので、どこを触ればいいのか分からない」

「CSSを変更してサイトが崩れるのが怖い」

という場合は、Dr.WordPressでもWordPressやCSSに関するご相談を受け付けています。

関連記事：WordPressが突然真っ白になった！考えられる原因5選

WordPressが突然真っ白になった！考えられる原因5選

ここまで確認してもCSSが反映されない場合、テーマやプラグイン、CSSの優先順位など、複数の原因が重なっている可能性があります。

「どこを直せばいいのか分からない」という場合は、実際の状況を確認しながら原因を切り分けます。

1件1,000円で、原因の特定から対処方法までご案内しています。

「この症状でも相談できますか？」と、購入前にメッセージいただくだけでも大丈夫です。