
WordPressでカスタマイズをしているとCSSが効かない(反映されない)ことがあります。
テーマによっても違うんですがちょっとやり方を変えただけで使えるようになったケースは多いです。
そこでCSSが反映されない時のチェック項目をまとめます
CSSの記述が間違っている
ただ単に一文字足りないとか間違っているために反映されない場合も結構あります。
よく見てみると違ったということも多いのでチェックしてみましょう。まずはこれ。
指定するclassが間違っている
例えばh2=class=”entry-title”となっていたとして、.entry-titleではうまく行かなかったのに.post h2{CSSの記述}とやるとうまくいく時があります。
この優先順位が未だに私もわかりませんが要は自分の変えてたい範囲だけ変わってくれれば問題ありません。
class名はページの該当する箇所を右クリックして検証とやると次のように見ることができるので扁壷したい範囲と一致するclass名で試してみるのがおすすめです。
!importantを付けてみる
例えばこのサイトでもさきほどタグクラウドの文字色を変えたのですが、普通に.tagcloud a{color:#333;}としても反映されませんでした。そこで.tagcloud a{color:#333;!important}としたところ変わりました。
!importantでCSSの指定を優先させることが必要な場合もあるようです。
スタイルシートではなく追加CSSに記載する
WordPressではスタイルシートへの追記はスタイルシート(style.css)に、追加CSSへの記載はHTMLのhead内のCSSとして記載されます。
スタイルシートでは反映されなかったものが追加CSSでは反映されるということがよくあります。
もともと追加CSSのほうがビジュアルを見ながらできるのでおすすめです。
だいたいこれでうまくいいきます。他のCSSが優先されてしまう場合は先に書かれているCSSに:initial;をつけると後に書かれたCSSに反映されないようになります。(リセット)
CSS関連の記事はこちらです。