WordPressでCSSが反映されない原因と対処法を解説します。
WordPressでCSSが反映されない原因
WordPressでCSSが反映されない原因には、次のものがあります。
- セレクタの記述が間違っている
- プロパティと値の組み合わせが正しくない
- 記載したCSSの優先順位が低い
- キャッシュされたCSSファイルを読み込んでいる
- CSSファイルが読み込まれていない
それぞれの原因について、詳しく解説を行います。
セレクタの記述が間違っている
まずCSSの記述方法に間違いがないか確認を行いましょう。
セレクタの記述が間違っていることに気づかずに、長時間悩んでしまうことも多いです。
p {} /* HTMLタグ */
.class {} /* class */
#id {} /* id */
特に多い間違いとしては、classセレクタの前に「.」、idセレクタの前に「#」を付け忘れる場合があります。
プロパティと値の組み合わせが正しくない
プロパティに対応していない値の記述が取られていた場合には、CSSは反映されません。
当たり前のことですが、ある程度CSSの記述に慣れた方が犯しやすい間違いです。
プロパティに対応する値を確認するには、MozillaのCSSリファレンスがわかりやすいかと思います。
記載したCSSの優先順位が低い
CSSには優先順位があります。そのため、新たに記載されたCSSの優先順位が低いと、CSSが反映されません。
特に気をつけるべき点は次のものがあります。
- 同じCSSファイルでは、後半に記載された内容ほど優先順位が高い
- classセレクタよりidセレクタの方が優先順位が高い
- 親テーマのCSSファイルより子テーマCSSファイルの方が優先順位が高い
- プラグインにより追加されたCSSファイルは基本的に優先順位が高い
- カスタマイズ内の「追加CSS」に記載された内容は優先順位が高い
CSSの優先順位を決める上で、詳細度というルールがあります。詳しくは、以下の解説をご確認ください。
キャッシュされたCSSファイルを読み込んでいる
キャッシュとは、Webページの読み込みを早くするために、本来のファイルとは別に用意しておくことです。
キャッシュされたCSSファイルを読み込んでしまうと、修正後のCSSファイルが読み込まれないので、CSSの修正内容が反映されません。
キャッシュには、「ブラウザキャッシュ」と「サーバーキャッシュ」があります。
CSSファイルが読み込まれていない
CSSファイルが読み込まれていないと、もちろんCSSは反映されません。
WordPressでこれが起きる場合は、自身でCSSファイルを追加した時に起こるでしょう。
特に子テーマを追加した時に、CSSファイルが読み込まれないと言ったトラブルが発生します。
WordPressでCSSが反映されない時の対処法
WordPressでCSSが反映されない時には、次の手順で対処を行いましょう。
- CSSファイルが読み込まれているか確認する
- キャッシュを削除する
- 記載したCSSの優先順位が高いか確認をする
- 記載したCSSの構文に間違いがないか確認をする
各手順を行なった後に、反映されているかどうかの確認を行ってください。
CSSファイルが読み込まれているか確認する
ブラウザのインスペクタを起動し、headタグ内で該当のCSSファイルが読み込まれているか確認を行ってください。
読み込まれていれば、次のような記述があります。
<link rel="stylesheet" href="https://example.com/◯◯◯/△△△/□□□.css" type="text/css">
キャッシュを削除する
ブラウザおよびサーバーのキャッシュを削除します。
サーバーのキャッシュは、キャッシュプラグインにより生成されている場合が多いです。該当のプラグインとしたは、「W3 Total Cache」や「WP Cache」などがあります。
プラグインの機能よりキャッシュの削除を行いましょう。
ブラウザのキャッシュは以下のリンクより削除方法の確認を行ってください。
キャッシュの削除方法
記載したCSSの優先順位が高いか確認をする
まずはCSSの詳細度に問題がないか確認を行いましょう。もし、詳細度に問題がなければ、同一の記述をCSSファイル内の最後に記述してください。
WordPress特有の問題として、次の方法で解説できる場合があります。
- （子テーマを作成している場合）親テーマではなく、子テーマのCSSファイルに記載を行う
- 管理画面「外観→カスタマイズ」内にある「追加CSS」にCSSの記載を行う
記載したCSSの構文に間違いがないか確認をする
次の内容の確認を行ってください。
- セレクタの記述方法に間違いがないか
- プロパティと値の組み合わせに間違いがないか
間違いがあれば、正しいCSSの構文になるように内容の修正を行ってください。