CSSで色を変更したのに反映されない！確認したい5つの原因

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

WordPressでサイトの色を変更しようと思ってCSSを書いたのに、

「色が変わらない」

ということはありませんか？

例えば、

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

「背景色を変更したのに元のまま」

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

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

といったケースです。

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

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

① セレクタが間違っている

まず確認したいのが、CSSを当てている場所が正しいかです。

CSSでは、class名やIDなどを使って変更したい場所を指定します。

しかし、実際のHTMLとCSSで指定している名前が違っていると、スタイルは反映されません。

よくあるのが、

・class名のスペルミス

・ドットやシャープの付け間違い

・違う要素を指定している

・親要素と子要素の指定が違う

といったケースです。

「CSSを書いたのにまったく変わらない」という場合は、まず正しい場所を指定できているか確認してみましょう。

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

CSSは、同じ場所に複数のデザイン指定がある場合、優先順位によってどのCSSが反映されるか決まります。

自分で文字色を赤に変更していても、テーマ側などでより優先順位の高いCSSが設定されていると、そちらの色が表示される場合があります。

WordPressでは、

・テーマのCSS

・プラグインのCSS

・追加CSS

・ページビルダーのCSS

など、複数のCSSが読み込まれていることがあります。

ブラウザの開発者ツールを使うと、現在どのCSSが適用されているのか確認できます。

③ キャッシュが残っている

CSSを変更したのに以前の色のままの場合は、キャッシュが原因になっている可能性があります。

例えば、

・ブラウザのキャッシュ

・WordPressのキャッシュプラグイン

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

・CDNのキャッシュ

などです。

実際にはCSSが変更されていても、古いデータが表示されていることで、

「変更が反映されていないように見える」

ことがあります。

この場合は、

・ページを再読み込みする

・ブラウザのキャッシュを削除する

・シークレットウィンドウで確認する

・WordPressのキャッシュを削除する

などを試してみましょう。

④ CSSの記述にミスがある

CSSの書き方に問題があると、スタイルが正常に反映されない場合があります。

例えば、

・カッコを閉じ忘れている

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

・不要な記号が入っている

・全角の記号を使用している

・コメントアウトが正しく閉じられていない

などです。

特に、CSSを追加した直後から反映されなくなった場合は、追加した部分だけでなく、その前後の記述も確認してみましょう。

ひとつの記述ミスが、その後に書かれているCSSへ影響することもあります。

⑤ スマホ用CSSや別の設定で上書きされている

PCでは色が変わっているのに、

「スマホでは元の色のまま」

という場合は、スマホ用のCSSが別に設定されている可能性があります。

WordPressテーマによっては、PCとスマホで別々のスタイルが設定されていることもあります。

そのため、

・スマホ用のCSS

・メディアクエリ

・テーマのレスポンシブ設定

・ページビルダーのスマホ設定

なども確認してみましょう。

PCだけでなく、スマートフォンでも変更が反映されているか確認することが大切です。

importantを使えば解決する？

CSSが反映されないときに、importantを使って優先順位を高くする方法があります。

これによって、一時的にCSSが反映されることもあります。

ただし、

「反映されないから、とりあえずimportantを付ける」

という使い方には注意が必要です。

importantを増やしすぎると、あとからCSSを変更するときに分かりにくくなる場合があります。

まずは、

「なぜ現在のCSSが反映されていないのか」

を確認してから使用するようにしましょう。

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

原因が分からない場合は、次の順番で確認してみましょう。

STEP 1

指定しているclassやIDが正しいか確認する

STEP 2

開発者ツールで現在適用されているCSSを確認する

STEP 3

別のCSSに上書きされていないか確認する

STEP 4

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

STEP 5

スマホ用CSSやレスポンシブ設定を確認する

CSSは、書いたコードだけを見るのではなく、実際にブラウザ上でどのCSSが適用されているのか確認することが大切です。

まとめ

CSSで色を変更したのに反映されない場合は、

① セレクタの間違い

② 別のCSSによる上書き

③ キャッシュ

④ CSSの記述ミス

⑤ スマホ用CSSや別設定

などを確認してみましょう。

「CSSを書いたのに色が変わらない」

「どのCSSが効いているのか分からない」

「何を修正すればいいのか分からない」

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

実際のサイトやCSSを確認し、どこでスタイルが上書きされているのか、どの部分を修正すればいいのかをできるだけ分かりやすくご案内します。

WordPressで困ったときの「まず聞ける場所」として、お気軽にご相談ください。