WordPressで文字サイズが変わらない！CSSが効かないときの確認ポイント

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

WordPressで文字サイズを変更しようとしてCSSを書いたのに、

「文字が大きくならない」

「font-sizeを変更したのに反映されない」

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

といったことはありませんか？

CSSを書いても文字サイズが変わらない場合、CSS自体が間違っているとは限りません。

テーマや別のCSSによって上書きされていたり、キャッシュが残っていたりする場合もあります。

今回は、WordPressで文字サイズが変わらないときに確認したいポイントをご紹介します。

① 指定している場所が正しいか確認する

まず確認したいのが、

「変更したい文字にCSSが正しく指定されているか」

です。

例えば、

・class名を間違えている

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

・親要素にCSSを書いている

・同じようなclass名と間違えている

といったケースがあります。

CSSを書いてもまったく変化がない場合は、まず変更したい文字を正しく指定できているか確認してみましょう。

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

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

WordPressでは、ひとつの文字に複数のCSSが指定されていることがあります。

例えば、

・テーマのCSS

・追加CSS

・子テーマのCSS

・プラグインのCSS

・ページビルダーのCSS

などです。

自分で文字サイズを変更していても、別のCSSの優先順位が高ければ、そちらの文字サイズが表示されます。

「CSSは間違っていないはずなのに変わらない」

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

③ キャッシュが残っていないか確認する

CSSを修正したのに文字サイズが以前のままの場合は、キャッシュが影響している可能性があります。

例えば、

・ブラウザのキャッシュ

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

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

・CDNのキャッシュ

などです。

実際にはCSSが変更されていても、以前のCSSが読み込まれていることで、

「変更できていないように見える」

場合があります。

この場合は、

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

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

・別のブラウザで確認する

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

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

④ テーマやページビルダーの設定を確認する

WordPressテーマによっては、CSSとは別に文字サイズを設定できる場合があります。

例えば、

・テーマカスタマイザー

・ブロックエディター

・ページビルダー

・テーマ独自のデザイン設定

などです。

こうした設定によって文字サイズが指定されていると、自分で追加したCSSとの優先順位によって思ったように変更できない場合があります。

特定のページやパーツだけ文字サイズが変わらない場合は、テーマ側の設定も確認してみましょう。

⑤ PCとスマホで別のCSSが設定されている

PCでは文字サイズが変わったのに、

「スマホだけ文字サイズが変わらない」

というケースもあります。

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

WordPressサイトでは、画面サイズに合わせてデザインを変更するために、PCとスマホで異なるCSSが使用されることがあります。

例えば、

・スマホ用CSS

・メディアクエリ

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

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

などです。

PCだけで確認するのではなく、実際のスマートフォンでも表示を確認してみましょう。

⑥ CSSの単位を確認する

文字サイズを指定するときは、数字だけではなく単位も使用します。

例えば、

・px

・rem

・em

・パーセント

などです。

使用する単位によっては、親要素の文字サイズなどの影響を受ける場合があります。

そのため、

「指定した数字と実際の見た目が違う」

ということもあります。

特にremやemを使用している場合は、基準になっている文字サイズも確認してみましょう。

⑦ CSSの記述ミスを確認する

最後に確認したいのが、CSS自体の記述です。

例えば、

・プロパティ名のスペルミス

・カッコの閉じ忘れ

・全角の記号が入っている

・直前のCSSに記述ミスがある

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

といった場合があります。

文字サイズを指定している部分だけが正しくても、その前に書かれているCSSに問題があることで正常に読み込まれないケースもあります。

「CSSを追加した直後からおかしくなった」という場合は、追加した部分の前後も確認してみましょう。

importantを付ければ文字サイズは変わる？

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

importantを付けたら文字サイズが変わった場合は、

「別のCSSに上書きされていた」

可能性があります。

ただし、反映されないCSSすべてにimportantを付けていく方法はおすすめできません。

あとからCSSを変更しにくくなり、どのスタイルが優先されているのか分かりにくくなることがあります。

まずは、

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

を確認することが大切です。

文字サイズが変わらないときの確認順序

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

STEP 1

変更したい文字を正しく指定できているか確認する

STEP 2

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

STEP 3

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

STEP 4

キャッシュを確認する

STEP 5

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

STEP 6

スマホ用CSSを確認する

STEP 7

CSSの記述や単位を確認する

特に重要なのは、

「CSSを書き直し続けるのではなく、現在どのCSSが適用されているのか確認すること」

です。

開発者ツールを使って現在の状態を確認すると、原因を見つけやすくなります。

まとめ

WordPressで文字サイズが変わらない場合は、

① 指定している場所

② 別のCSSによる上書き

③ キャッシュ

④ テーマやページビルダーの設定

⑤ スマホ用CSS

⑥ CSSの単位

⑦ CSSの記述ミス

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

「font-sizeを変更しても反映されない」

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

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

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

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

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