正しく・デザインを変えたい場所を指定してCSSコードを書いているのにうまくカスタマイズの内容が反映されない・・・。
その時は、CSS適用の優先度をチェックしてみてください。
実は、CSSには「この順番で優先して読み込む」というルールがあって、
- 有無を言わさず、「超」最優先させるコードが書いてある
- HTMLコードに直接書いている
- 重複して書いていたため片方が反応していない
といった場合、WordPressでよく使う「追加CSS」にコードを書いてもうまく反応しないことがあります。
「ほとんどのテーマであるはずです」
「え、ちゃんと書いているのに？！」って思うかもしれませんが、何事にも順序というものがあるってことですね^^;
具体的なコードも書きながら解決方法を解説していきますね〜
みみこ
正しく、対象箇所を指定できているか確認しよう
「優先度」の前に、まずはデザインを変えたい箇所をちゃんと指定できているかを確認しましょう。
ちょっと専門的な言葉を使うとCSSのクラス名が正しいかどうかを見ていきます。
CSSのクラス名についてはこちらで解説しています^^
つまり、そもそも変えたい場所をちゃんと指定できているのかどうか？を確認して、正しく指定できていることを確認してから優先度チェックをしていこうというわけです。
ここでクラス名を簡単に確認できる便利なツールをご紹介します！
テテテテン！
開発ツ〜ル〜！
・・・さて、著作権ギリギリな感じ（笑）で四次元ポケットからサクッと出てきたこの「開発ツール」。
WEB業界ではよく使われるもので、
更新前にブラウザ上でカスタマイズした場合の見え方をチェックしたり、パソコンでスマホ表示のレイアウトをチェックしたりと、
ブロガーにとっても普段使いレベルで便利な機能がたくさん備わっているツールなんです。
（だから開発ツール、またの名をデベロッパーツールとも言われたりします）
使ってるWordPressのテーマごとにクラス名って違うので、
この開発ツールを使ったCSSのクラス名を見つけ出す方法をお伝えしますね！
みみこ「開発」って言うくらいだから難しいことやるのかな？って思ったけど、実際やってみたら思ったより簡単に見つけることができました！！(*^ω^*)/ヤッホイ
で、ちょっと面白い（笑）
おかぴーCSSの優先度
では、今回の記事テーマに戻ります！
CSSには以下の順番で優先度があり、そのルールに従ってパソコン画面に表示させています。
例えば、下のような黄色い背景の色を指定する場合で考えてみましょう。
まずは骨組みであるHTMLコードは、下のような書き方で作れます。
background:yellow!important;
}
→赤文字の箇所に「!important」と書いたパターン。これは何が何でも「絶対にこれを優先させて！！」と伝えるコードです。
※扱う際の注意点があるので、後でまとめますね^^
background:yellow;
}
→CSSのコードがまとまったファイルに、コードを書いていくパターン。
この３つのパターン、どれで書いても黄色い背景のボックスができます。
さて、①＞②＞③の順位で強い訳なんですが、
③の方法でコードを追加したとしても、①or②の書き方が存在しているとカスタマイズが反映されません。
つまり、①or②が優先されてしまう訳なのです。
③の方法で反映されない時は、①or②が書いてないか確認してみてください。
!importantの注意点
これは英語の意味と同じで「重要」を意味するコード。
これを末尾に書くと必ずこのコードが優先されて適用されます。
みみこ
おかぴー
あまり多く使いすぎると、時間が経って追加でカスタマイズしたい時、どこが最優先で適用させるべきコードか作ってて分からなくなります。
WordPressのテーマで使われているCSSコードは物凄い量なので、毎回そのコードをチェックしながらやらないといけなります。
さらに、テーマには「更新」があります。
テーマを更新する理由は、主に使い勝手を良くしたり、WordPressの新しい仕組みに対応させるためだったり、SEO対策のための記述方法に対応してくれたりと、
簡潔に言うと、「テーマをより良くするため」です。
そんな時に、「!important」で何でもかんでも最優先で指定していると、更新してもそっちが優先されてしまってうまく反映されなくなります。
つまり、応用が効きにくくなるんです。
だから、テーマを作る人もあまり「!important」は多用せずに作ります。
どんどん追加していった時に今までのが変に反応しないようにするためです。
なので、カスタマイズする時は「!important」は本当に必要なところだけに絞るように使うように気をつけてください。
HTMLに直書きの注意点
これを考える前に、なんでCSSファイルがあるのか？ですが、
それはあちこちにデザインコードを書くと、「あれ？どこに書いてたっけ？？」となって管理がしにくくなります。
「ファイル管理は分かりやすく！」
そうならないように、CSSコードをまとめたファイルを用意して管理をするのが一般的です（多くの人が追加CSSに書いていくのは、そこにまとめて書いていくのが管理がしやすいから）。
なので、あちこちにバラバラ書くのではなく、追加CSSなどのファイルにまとめて書いていくようにしてください。
CSSファイルに書く時の注意点
CSSファイルに書く時の注意点は、コードは上から下に向かって読み込まれていくことです。
おかぴー
つまり、もし同じクラス名が２箇所にある場合、上の方にある内容は打ち消されます。
同じクラス名でも、下には背景がピンク（background:pink）の指定。上には背景が黄色の指定が書いてあります。
この場合、優先されるのは下にあるコードなので、背景色はピンクになってしまいます。
カスタマイズするコードを追加していく時は、一番下に追加していくようにしていけば安心です。
先ほども書きましたが、もし一番下に追加しても反映されない場合は「!important」で指定してるか、「HTMLに直書き」している可能性があるので確認してみてください。
ちなみに、追加CSSがたくさん書いてあると探すのが大変です。
そんな時は「Ctrl+F」のショートカットを使うと、検索窓が出てくるのでコードを入力して探せますよ^^
↓↓↓
各テーマの設定画面の内容について
各テーマには、簡単にカスタマイズできる設定画面があります。
「カスタマイズ」の項目内のことです。
「赤枠のどちらからでもカスタマイズ画面に飛べます」
↓↓↓
「赤枠内の設定」
追加CSSで設定した内容は、この画面の設定に上書きされます。
つまり、ここで設定した内容が反映されない時は、追加CSSの中に記述があるのかもしれません。
（各テーマ設定の後に、追加CSSを読み込む順番になっているからです）
まとめ
CSSはうまく反映されましたでしょうか。
優先度の前に、まずは正しい箇所を選択出来ているかを確認しましょう。
確認方法でおすすめなのが開発ツールです。
そして、CSSの優先度をチェック！
- !importantを書く
- HTMLに直書きする
- CSSファイルに書く
①＞②＞③の順番で優先されました。
基本的な内容なのですが、ここを押さえておくだけで時短になりますし、
この記事の「CSSの優先度」「開発ツール」の使い方に慣れれば、これからのカスタマイズがきっと楽になると思いますよ！^^
コメント