閉じる

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関連の記事はこちらです。

CSS


この記事がいいと思ったらはてなブックマークに保存しておこう!Twitterのフォローも良ければお願いします。

  このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)