WordPressで見出しの色を変えたり、ボタンの形を変えたりしたくて、
追加CSS
を使うことがあります。
ネットで見つけたコードを貼って、
「これで変わるはず」
と思ったのに、
何も変わらない。
そんなことがあります。
さらに、
少しだけ反映される。
PCでは変わるのにスマホでは変わらない。
前に入れたCSSと見た目が違う。
ということもあります。
今回は、
WordPressの追加CSSが反映されないときに初心者が確認したいポイント
を順番に紹介します。
まず確認したいのは「どこにCSSを書いたか」
追加CSSが反映されないとき、最初に確認したいのは、
CSSを書いた場所
です。
WordPressではテーマによって、
カスタマイザーの追加CSS
テーマ独自のCSS入力欄
子テーマのstyle.css
など、CSSを書く場所が複数あります。
自分では追加したつもりでも、
違うテーマの設定欄に入れていた。
現在使っていない子テーマへ書いていた。
ということもあります。
まずは、
今使っているテーマに対してCSSを書いているか
を確認してみてください。
CSSを書いたあと保存しているか
意外と単純ですが、
CSSを入力しただけで保存できていないこともあります。
WordPressの画面によって、
公開
保存
変更を保存
など、ボタンの名前が違います。
入力したあとに、
きちんと保存されたか。
一度画面を閉じて、CSSが残っているか。
ここも確認しておくと安心です。
セレクタが合っていない
追加CSSが反映されない原因として多いのが、
対象を指定する部分が違っている
ケースです。
CSSでは、
「どの部分へデザインを当てるか」
を指定します。
たとえば、
記事内のH2へ設定したつもりでも、テーマ側では別のclassが付いていたり、より細かい指定が使われていたりすることがあります。
すると、
CSS自体は間違っていなくても、
変更したい場所を指定できていない
ため、何も変わりません。
ネットで見つけたCSSをそのまま貼っても、使っているテーマが違えば同じように反映されるとは限らないんですね。
CSSの書き方を少し間違えている
CSSは、ほんの少し書き方を間違えるだけで反映されないことがあります。
たとえば、
括弧が閉じていない。
; が抜けている。
プロパティ名を間違えている。
余計な文字が入っている。
というようなものです。
特にコードを途中だけコピーした場合や、自分で少し書き換えた場合は確認した方がいいです。
CSSが長くなるほど、
どこで間違えたのか分かりにくくなる
こともあります。
前に書いたCSSが影響していることもある
追加CSSは、
新しいコードを追加すれば、必ず新しい方が思った通りに反映される。
という単純なものではありません。
すでに似た指定が入っている場合、
前のCSS。
今回追加したCSS。
テーマ本体のCSS。
プラグインのCSS。
が重なることがあります。
すると、
「さっき入れた色にならない」
ということが起きます。
実際にはCSSが反映されていないのではなく、
別のCSSに上書きされている
こともあります。
テーマ側のCSSが強い場合もある
WordPressテーマには、もともと大量のCSSが入っています。
そのため追加CSSを書いても、
テーマ側の指定の方が強くて、思った見た目にならないことがあります。
そこでネットでは、
!important
を付ける方法が紹介されることもあります。
確かに強制的に反映させやすくなります。
でも、
何でも !important を付ければいい。
というわけではありません。
増やしすぎると、今度はあとから別のデザインへ変更するときに、
さらに強い指定が必要になる
ということがあります。
キャッシュで古いデザインが表示されている
CSSを書き換えたのに何も変わらない場合、
古いCSSが表示されている
可能性もあります。
ブラウザのキャッシュ。
WordPressのキャッシュプラグイン。
サーバー側のキャッシュ。
CDN。
などが使われていると、変更前のデザインが残ることがあります。
その場合は、
ページを再読み込みする。
ブラウザのキャッシュを確認する。
キャッシュ系プラグインを使っているなら削除する。
などで変わることがあります。
PCでは反映されるのにスマホでは違う
これもよくあります。
PCで見るときれいに変わった。
でもスマホで見ると、
元の色のまま。
文字が大きすぎる。
横にはみ出す。
といったことがあります。
これはスマホ用に、
別のCSSが指定されている
場合があります。
WordPressテーマでは、
PC。
タブレット。
スマホ。
それぞれに合わせてデザインを調整していることがあります。
そのためPCだけ確認して、
「できた」
で終わらず、
スマホでも確認する
ことが大切です。
CSSは反映されたけど別の場所まで変わった
反映されない問題とは逆に、
反映されすぎる
こともあります。
見出し1つを変えたかったのに、
サイト全体のH2が全部変わった。
固定ページまで変わった。
サイドバーの見出しも変わった。
というケースです。
これは、CSSの指定範囲が広すぎる可能性があります。
たとえば単純にH2全体へ指定すると、
記事本文だけではなく、ほかのH2まで対象になることがあります。
見た目を変えるときは、
どこまで変更したいのか
を先に決めておくと失敗しにくいです。
テーマを変えたあとにCSSが合わなくなることもある
追加CSSは、現在使っているテーマに合わせて書いていることがあります。
そのためテーマを変更すると、
前のCSSが効かない。
違う場所へ効いてしまう。
デザインが崩れる。
ということがあります。
テーマが変わればHTML構造やclass名が変わることもあるためです。
以前は正常だったCSSが、
テーマ変更後に急におかしくなる。
という場合は、これも確認した方がいいです。
CSSを追加するたびに確認する
CSSが増えてから問題が起きると、
原因を探すのが大変になります。
そのため、
CSSを追加。
↓
表示確認。
↓
スマホ確認。
↓
次のCSSを追加。
というように、
少しずつ確認しながら進める
方が分かりやすいです。
一度に10個追加してから、
「どれかがおかしい」
となると、原因を探すだけで時間がかかります。
CSSを消しても元に戻らないとき
追加したCSSを削除したのに、デザインが元に戻らないこともあります。
この場合も、
キャッシュ。
別のCSS。
テーマ設定。
ブロック側の装飾設定。
などが残っている可能性があります。
CSSを消したあと、
保存されているか
キャッシュが残っていないか
同じ指定が別の場所にないか
を確認します。
追加CSSでハマったら、さらにコードを足す前に確認する
CSSが反映されないと、
「じゃあ別のコードを入れてみよう」
となりがちです。
でも、
CSS Aが効かない。
↓
CSS Bを追加。
↓
まだ変。
↓
CSS Cを追加。
と続けると、だんだん原因が分からなくなります。
追加する前に、
なぜ今のCSSが効いていないのか
を確認した方が、結果的に早いことがあります。
見た目を変える方法は追加CSSだけではない
WordPressのデザインを変えたいとき、
追加CSSは便利な方法のひとつです。
でも、
必ずCSSを書かなければいけないわけではありません。
テーマの設定だけで変更できることもあります。
ブロックエディター側で変更できることもあります。
そして記事本文の見た目なら、
デザインをセットとして着せ替える
という方法もあります。
AIちいちゃんパレット Proでは、
見出し。
目次。
Q&A。
POINT。
リスト。
ボタン。
背景。
書体。
などを、コーデとしてまとめて変更できるようにしています。
CSSが必要な場所と、必要ない場所を分ける
CSSは細かい調整には向いています。
たとえば、
「余白をあと少しだけ広げたい」
という場合には便利です。
でも、
「記事全体をブルー系にしたい」
「かわいい雰囲気へ変えたい」
という場合に、すべてを個別CSSで作ると管理が大変になります。
細かな調整はCSS。
全体のデザイン変更はコーデ。
サイト構造そのものを変えるならテーマ。
こうやって役割を分けると、WordPressはかなり扱いやすくなります。
追加CSSが反映されないときは順番に確認しよう
WordPressの追加CSSが反映されないときは、
いきなりコードを増やすのではなく、
順番に確認してみてください。
書く場所は合っているか。
保存されているか。
セレクタは合っているか。
書き方を間違えていないか。
別のCSSに上書きされていないか。
キャッシュが残っていないか。
スマホ用CSSがないか。
ここを確認するだけでも、原因を見つけやすくなります。
そして、
見た目を変えたいだけなのに、CSSの管理ばかり増えてきた。
そう感じたら、
CSSをさらに足す以外の方法も考えてみる。
それだけでも、WordPressのデザイン変更は少し楽になります。
「もう何から手をつければいいか分からない…」と机の前でフリーズしているあなたへ。中卒の僕が1日で道を開いた秘密のオリジナル特典
極秘ファイル配布中
あなたの体験・話し方・いつもの言葉から、
「自分専属の書き手」をChatGPTにつくる
ちょっと怪しい研究ファイルができちゃいました（笑）。
何が入っているのかは……
研究所の中でこっそり確認してください。
※無料メルマガ登録で極秘ファイルを入手できます。
怪しいですが、ちゃんと僕が作ってます（笑）。