Wordpress

xeoryの子テーマを作成したのにCSSが反映されない原因

バズ部謹製のWordPressテーマxeory。SEO対策に重点が置かれた非常に良く出来たテーマなのですが、子テーマを作成したのにCSSへの変更が反映されない場合の解決法をご紹介。

CSSにただ記述するだけでは反映されない

先日、他のWordPressテーマと同じようにxeoryの子テーマを作ってデザインを改造しようとしました。

ですが、CSSに変更を加えたのに何故か変更が全く反映されないので困惑。

chromeの開発者用画面とにらめっこしながら小１時間ほど悩んだのですが、理由は単純でした。

既存のxeoryの要素にCSSで変更を加える場合には「!important」をつける必要があったのでした。

要は下記のような変更をしたい場合には

#gnav ul li.current-menu-item a {
  background: #2C8585;
  color: #fff;
}

 各々に次のように「!important」をつける必要があるわけです。

#gnav ul li.current-menu-item a {
  background: #2C8585 !important;
  color: #fff!important;
}

そんなわけなので、既存の親テーマのCSSから変更したい箇所をコピペしてきて、変更したい部分のみを残して 「!important」をつけるというやり方が良さげです。

色々いじってみているのですが、設定画面など結構クセのある仕様ですね。

-Wordpress