2019年10月5日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の箇所の指定)の優先順位が違う場合です。セレクタを指定する場合、一般的には「絞り込めていればいるほど優先される」と考えておいてください。p#aaa.bbb」のように指定する方が優先順位が高くなります。解決方法この場合は、セレクタの指定方法を上書きしたいもののセレクタの指定方法に合わせましょう。最後は元のCSSに「!important」がついてしまっている場合です。親テーマで「!important」がついてしまっているのは、親テーマの開発者の責任だと思います。してもそうしておかないとバグが起きるというのでもなければ、記述方法を見直していただきたいです。中には実際に「!important」が入ってしまっているWordPressテーマもあるので、使う側としては仕方ないですね。大きく二通りありますが、WordPressの性質上前者がおすすめです。「!important」でさらに上書きする「親テーマのimportantを消す」まず、「!important」で上書きしていくのが最も無難です。いうよりも、importantに上書きをする方法はそれしかありません。これは「!important」の無限連鎖の始まりです。ここに加えてカスタマイズしたい時、前のコードをうまく修正出来ずに上書きする時は「!important」を利用することになります。何が大切(important)なのか分からない記述になってしまいます。ここだけ気をつけてください。親テーマのimportantを消すのもスムーズでいいのですが、テーマの更新のタイミングで戻されます。テーマを更新したらデザインが崩れた!とならないように、できるだけ前者を利用してください。MERuanaRuana(合同会社ルアナ)です。Ruana占いというWebメディアの運営とWordPress専門の技術サポートをしています。WordPressサポート歴が5年という経験を活かし、多くの方のWordPressの修正・改造のお役に立てれば幸いです。合同会社ルアナ(Ruana)。