WordPressで追加CSSだけ反映されない！確認したい7つの原因

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

WordPressでデザインを調整するために「追加CSS」へCSSを書いたのに、

「何度書き直しても反映されない」

ということがあります。

例えば、

「テーマのCSSは正常に読み込まれている」

「追加CSSに書いた色だけ変わらない」

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

といったケースです。

追加CSSが効かない場合、CSSの書き方だけでなく、優先順位やキャッシュ、テーマ側の設定などが影響している可能性があります。

今回は、WordPressの追加CSSだけ反映されないときに確認したい7つの原因をご紹介します。

① CSSのセレクタが違っている

まず確認したいのがセレクタです。

CSSでは、

「どの要素のデザインを変更するのか」

をセレクタで指定します。

見た目では同じようなボタンや見出しでも、実際には別のクラス名が設定されている場合があります。

特に、

・テーマを変更した

・ページを作り直した

・ブロックを変更した

といったあとでは、以前使っていたCSSが効かなくなることがあります。

まずは変更したい要素を正しく指定できているか確認してみましょう。

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

追加CSS自体は読み込まれていても、テーマやプラグイン側のCSSが優先されている場合があります。

CSSには優先順位があり、より強い指定が別の場所に書かれていると、追加CSSに書いた内容が反映されないことがあります。

例えば、

「追加CSSには赤色と書いているのに、テーマ側で指定された青色のまま」

というケースです。

この場合、CSSを何度追加しても原因を解決できないことがあります。

開発者ツールを使って、どのCSSが実際に適用されているのか確認してみましょう。

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

CSSを変更したあと、古いデザインがキャッシュとして残っている場合があります。

例えば、

・ブラウザキャッシュ

・キャッシュプラグイン

・サーバーキャッシュ

・CDN

などです。

CSS自体は正しく変更できていても、古い状態が表示されているだけということもあります。

別のブラウザやシークレットモードで確認すると、キャッシュが原因かどうかを切り分けやすくなります。

④ CSSの記述にミスがある

追加CSSの中に記述ミスがないかも確認してみましょう。

例えば、

・記号が抜けている

・括弧が閉じられていない

・プロパティ名が間違っている

などです。

特に長いCSSを追加している場合、途中の記述ミスによって後ろに書いたCSSが期待通り動かないことがあります。

「途中までは効いているのに、それ以降だけ反映されない」

という場合は、直前の記述も確認してみましょう。

⑤ テーマ側の設定が優先されている

WordPressテーマによっては、独自のデザイン設定機能が用意されています。

例えば、

・文字色

・背景色

・ボタンカラー

・フォントサイズ

などをテーマの設定画面から変更できる場合があります。

テーマによって出力されるCSSの指定方法が異なるため、追加CSSよりテーマ側の指定が優先されるケースもあります。

特定の部分だけCSSが効かない場合は、テーマ側に同じデザインを設定する項目がないか確認してみましょう。

⑥ スマホ用のCSSが設定されている

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

という場合は、スマホ用CSSが影響している可能性があります。

テーマやプラグインによっては、画面サイズに応じて別のCSSが適用されます。

そのため、PC用のCSSでは変更できていても、スマホ表示になると別の指定で上書きされることがあります。

PCとスマホで結果が違う場合は、スマホ表示時にどのCSSが適用されているのか確認してみましょう。

⑦ 追加CSSが期待通り出力されていない

CSSの記述や優先順位に問題がない場合は、追加CSSそのものがページ上に出力されているか確認してみましょう。

テーマやサイトの構成、カスタマイズ方法などによっては、想定していた状態で追加CSSが適用されていないケースも考えられます。

「どんなCSSを書いてもまったく変化しない」

という場合は、CSSを書き続けるのではなく、まず追加CSSが実際のページに存在しているかを確認することが大切です。

まず開発者ツールで確認しよう

追加CSSが反映されないと、

「もっと強いCSSを書けば直るかも」

とCSSを追加し続けてしまいがちです。

しかし、まず確認したいのは、

「書いたCSSがページ上に存在しているか」

そして、

「存在しているけれど別のCSSに打ち消されているのか」

という点です。

ブラウザの開発者ツールを使えば、実際に適用されているCSSを確認できます。

原因を確認してからCSSを修正した方が、余計な記述を増やさずに済みます。

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

STEP 1

変更したい要素のセレクタを確認する

STEP 2

CSSの記述ミスがないか確認する

STEP 3

開発者ツールで追加CSSが存在するか確認する

STEP 4

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

STEP 5

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

STEP 6

スマホ用CSSが設定されていないか確認する

STEP 7

テーマ側のデザイン設定を確認する

CSSを何度も追加するより、「読み込まれていないのか」「読み込まれているけれど負けているのか」を最初に切り分けると原因を見つけやすくなります。

まとめ

WordPressの追加CSSだけ反映されない場合は、

① セレクタ

② CSSの優先順位

③ キャッシュ

④ CSSの記述ミス

⑤ テーマ側の設定

⑥ スマホ用CSS

⑦ 追加CSSの読み込み状態

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

特にCSSがまったく効かない場合は、記述を増やす前に開発者ツールで現在の状態を確認するのがおすすめです。

CSSを確認しても直らない場合はご相談ください

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

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

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

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