WordPressで特定のページだけCSSが効かない原因7選

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

WordPressでCSSを調整していると、

「トップページでは効いているのに、固定ページでは効かない」

「同じデザインなのに、このページだけCSSが反映されない」

ということがあります。

同じCSSを使っているはずなのにページによって表示が違うと、CSSそのものに問題があるように感じます。

しかし実際には、ページごとのHTML構造やテンプレート、ページビルダーなどの違いが原因になっているケースもあります。

今回は、WordPressで特定のページだけCSSが効かないときに確認したい7つの原因をご紹介します。

① HTML構造が違っている

まず確認したいのがHTMLの構造です。

見た目では同じようなボタンや見出しでも、ページによって使用されているclassやHTMLが違う場合があります。

例えば、

・トップページは専用のパーツ

・固定ページはWordPressのブロック

・投稿ページはテーマのテンプレート

といった違いがあるケースです。

この場合、トップページで効いているCSSをそのまま使っても、別のページでは対象となる要素が存在しないため反映されません。

まずは、CSSが効くページと効かないページで同じ要素が使われているか確認してみましょう。

② ページ固有のCSSが設定されている

特定のページだけ別のCSSが適用されている場合もあります。

例えば、

「他のページでは文字が黒なのに、このページだけ白になる」

といった場合です。

ページ専用のCSSによって、共通CSSが上書きされている可能性があります。

CSSを追加して対処する前に、現在どのCSSが適用されているのかを確認することが大切です。

③ bodyに付いているclassが違う

WordPressでは、ページの種類などによってbodyタグに異なるclassが付けられることがあります。

このclassを利用して、

「トップページだけこのCSSを適用する」

「特定の固定ページだけデザインを変更する」

といった指定が行われていることがあります。

そのため、CSS自体は間違っていなくても、特定ページだけ対象外になっているケースがあります。

開発者ツールでbodyタグのclassを比較してみると、違いを見つけやすくなります。

④ ページビルダーのCSSが優先されている

Elementorなどのページビルダーを使用している場合、ページビルダー側で独自のCSSが出力されることがあります。

例えば、

・文字サイズ

・余白

・背景色

・ボタンのデザイン

などがページビルダー側で指定されているケースです。

特定のページだけページビルダーを使っている場合、そのページだけCSSの優先順位が変わることがあります。

「普通の固定ページでは効くのに、ページビルダーで作ったページでは効かない」

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

⑤ 使用しているテンプレートが違う

WordPressでは、ページによって異なるテンプレートが使われている場合があります。

例えば、

・トップページ専用テンプレート

・通常の固定ページ

・LP用テンプレート

・投稿ページ

などです。

テンプレートによってHTML構造や読み込まれるCSSが違えば、同じCSSでも結果が変わることがあります。

特定ページだけCSSが効かない場合は、他のページと同じテンプレートを使用しているか確認してみましょう。

⑥ 特定ページのキャッシュが残っている

CSSは正常に変更できているのに、特定のページだけ古いキャッシュが表示されている場合もあります。

例えば、

・キャッシュプラグイン

・サーバーキャッシュ

・CDN

などを使用している場合です。

「他のページは変更されたのに、このページだけ古いデザインのまま」

という場合は、キャッシュも確認したいポイントです。

別のブラウザやシークレットモードで表示を確認すると、原因を切り分けやすくなります。

⑦ CSSの読み込み条件が設定されている

テーマやプラグインでは、ページによってCSSを読み分けている場合があります。

例えば、

「トップページだけ専用CSSを読み込む」

「特定のテンプレートだけ別のCSSを使用する」

といった設定です。

この場合、CSSの内容が正しくても、そもそも効かないページではCSSファイル自体が読み込まれていない可能性があります。

何を書いても特定ページだけ反映されない場合は、対象のCSSがそのページで読み込まれているか確認してみましょう。

他のページとの違いを探そう

このトラブルで大切なのは、

「CSS自体がおかしい」と決めつけないことです。

トップページでは正常に効いているのであれば、そのCSS自体は動作している可能性があります。

そこで、

「効くページと効かないページで何が違うのか」

を比較してみましょう。

特に、

・HTML構造

・class

・適用されているCSS

・ページビルダー

・テンプレート

などを比較すると原因を見つけやすくなります。

特定ページだけCSSが効かないときの確認順序

STEP 1

CSSが効いているページと同じ要素か確認する

STEP 2

HTML構造やclassを比較する

STEP 3

開発者ツールでCSSが適用されているか確認する

STEP 4

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

STEP 5

ページビルダーの設定を確認する

STEP 6

使用しているテンプレートを確認する

STEP 7

CSSの読み込み条件を確認する

いきなりCSSを書き直すよりも、正常なページと問題があるページを比較することで原因を効率よく探せます。

まとめ

WordPressで特定のページだけCSSが効かない場合は、

① HTML構造

② ページ固有のCSS

③ bodyのclass

④ ページビルダー

⑤ テンプレート

⑥ キャッシュ

⑦ CSSの読み込み条件

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

特に他のページでは正常にCSSが効いている場合は、CSSそのものではなく、ページごとの構造や設定に違いがないか確認するのがポイントです。

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

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

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

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

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