WordPressでCSSが適用されません！ちゃんと書いてるはずなのに！なんでですか？
そういった質問を結構いただくので、今回解決方法をまとめてみました。
目次
WordPressでCSSが適用されない！
自分でWordPressのサイトを作ってたりカスタマイズしていると、しっかりCSSを書いているはずなのに反映されない！といったことって起きますよね。
弊社のWordPress質問サービスにも、よくこの相談が来ます。それどころか、社内でさえ「CSSが適用されない！なんで！」という声が飛び交う時があります。
僕がCSSをいじる時には、大体同じ解決方法で解決できることが多いので、その方法について今回は解説していきます。
CSSが反映されないと、「なんか意味不明なバグ？」と思ってしまうかもしれませんが、単純すぎて5秒で解決できてしまうものもあるんですよ！
WordPressでCSSが適用されない時の原因と対策
まず、今回の内容の大前提として
- CSSの記載場所が間違っていることは想定しない
- CSSの記述方法が間違っていることは想定しない
とします。CSSは記述ルールに則って正しく、正しい場所（style.cssとかのスタイルシートか、追加CSS）に記述されてるものとします。
1.キャッシュが残っている
まずひとつ目の可能性で疑ってほしいのは「キャッシュ」です。
これは、ページの表示速度を高めるために、サイトを見ている人のブラウザにサイト内部のデータを一時保存していく機能です。
これによって、読み込み時間が短くなり表示速度が早くなるのですが、この時にCSSのデータも保存されることが多いです。そのため、CSSを変更してもキャッシュのデータが変わってないのでCSSが変わっていないように見えてしまうのです。
ちなみに、キャッシュが残っていて昔のデザインが見えているのは「最近＋カスタマイズ前にサイトに訪れた人」だけなので、これから訪れる人には新しいデザインが表示されてます！
カスタマイズ中は自分が触っていると思うので、どうしても自分のブラウザにはキャッシュが残ったままになりやすいんですよね。
キャッシュの解決方法
これは、キャッシュを消すことで解決します。以下のどちらかを行ってください。
- 強制リロード
- ブラウザの閲覧履歴の削除
強制リロードは、キャッシュなどの履歴データも含めて削除しページをリロードする行為です。それぞれのブラウザ、WindowsかMacかによって対策が変わるので、下の記事を参考にしてください。
ブラウザの閲覧履歴は、ブラウザの設定画面などから消せるはずです。消した後再度アクセスするだけで完了します。
2.CSSの読み込みの優先順位が違う
次は、CSSの読み込みの優先順序が異なる場合です。
例えば、head内のmetaタグで[aaa.css][bbb.css][ccc.css]の3つのCSSが読み込まれている場合、上から順番にCSSが読み込まれます。
CSSで同じセレクタを指定すると、CSSを追加していき、同じプロパティ（font-sizeやcolorなどの設定項目のこと）は後から書いたCSSに上書きされてしまいます。
[ccc.css]でcolor:black;のように指定されていると、[aaa.css]でどれだけcolorを指定してもblackに上書きされてしまうのです。
これは、子テーマを作ってカスタマイズしている時によく起こってしまいます。子テーマで[aaa.css]を作成しスタイルを追加した場合、親テーマの[aaa.css]と親テーマの[bbb.css]の間で読み込まれます。
そのため、子テーマでどれだけ編集しても親テーマの[ccc.css]で上書きされてしまい、わけが分からなくなってしまうことが多々あります。
解決方法
上のような時は、「!important」を利用するか子テーマでも[ccc.css]を作成し、そちらに追記します。
もしくは、親テーマのCSSの読み込み順番自体を変更します。[aaa.css]よりも先に[ccc.css]を読み込むように並び替えを変えるのです。
3.CSSのセレクタの優先順位が違う
次は、CSSのセレクタ（HTMLの箇所の指定）の優先順位が違う場合です。
セレクタを指定する場合、一般的には「絞り込めていればいるほど優先される」と考えておいてください。
例えば「ID:aaa Class:bbb タグ:p」の要素がある場合、「body p」と指定するよりも「body p#aaa.bbb」のように指定する方が優先順位が高くなります。
解決方法
この場合は、セレクタの指定方法を上書きしたいもののセレクタの指定方法に合わせましょう。
4.元のCSSに「!importantがついている」
最後は元のCSSに「!important」がついてしまっている場合です。
正直、親テーマで「!important」がついてしまっているのは、親テーマの開発者の責任だと思います。どうしてもそうしておかないとバグが起きるというのでもなければ、記述方法を見直していただきたいです。
ですが、中には実際に「!important」が入ってしまっているWordPressテーマもあるので、使う側としては仕方ないですね。やるしかありません。
解決方法
大きく二通りありますが、WordPressの性質上前者がおすすめです。ただ、問題点があります。
- 「!important」でさらに上書きする
- 「親テーマのimportantを消す」
まず、「!important」で上書きしていくのが最も無難です。というよりも、importantに上書きをする方法はそれしかありません。
ですが、これは「!important」の無限連鎖の始まりです。ここに加えてカスタマイズしたい時、前のコードをうまく修正出来ずに上書きする時は「!important」を利用することになります。
もはや、何が大切（important）なのか分からない記述になってしまいます。ここだけ気をつけてください。
親テーマのimportantを消すのもスムーズでいいのですが、テーマの更新のタイミングで戻されます。テーマを更新したらデザインが崩れた！とならないように、できるだけ前者を利用してください。
