style.css にいくら追記しても反映されないときの備忘録です。
たとえばある要素のボーダーを消したいとき、どんなクラス名が付けられているのかを確認しますね。それから子テーマのstyle.cssに書き直すわけですが、border: 0;にしても、荒業でborder: 0 !important;としても反映されない。DevTool で確認すると次のとおり。
#2 だったり #3 だったりいろいろですが…結論から言うと、これはSTINGER の標準機能「テーマカスタマイザー」により出力されたCSSでした。
CSSを反映させる方法
親テーマ「STINGER PLUS」のPHPファイルからテーマカスタマイザーに関するコードを削除することもできますが、基本的には親テーマは触らないのが無難です。テーマカスタマイザー自体をオフにすればいいのです。
ダッシュボードからSTINGER管理と進み、デザイン・レイアウト関連設定の「オリジナルテーマカスタマイザーを使用する（「外観」＞「テーマ」にて基本カラーを選択できます）」のチェックを外すだけ。
- ヘッダーのロゴ画像
- サイトタイトル、キャッチフレーズ、サイトアイコン
- 背景色、背景画像
- ヘッダー画像
- メニュー
- ウィジェット
- 固定フロントページ
上記の項目は元々 WordPress 標準の外観>カスタマイズから変更できます。後々テーマを変更する可能性などを考えると、テーマ固有の機能よりは標準機能で賄ったほうがメンテナンス性が高いですね。
テーマカスタマイザーの仕組み
CSS には優先順位があります。
style属性による局所的な指定
例：<p style="color: red;"></p><style>要素による文書単位の指定
例：<style>p {color: red;}</style>- 外部 CSS ファイル
子テーマに記述した内容は 3 にあたり、テーマカスタマイザーの出力は 2 にあたります。だから CSS ハックを用いたところで反映されないということになるわけです。
STINGER シリーズは初心者にとってとても便利なテーマですが、今回の件は逆にある程度の知識のある方が陥りやすい穴になっていると思います。
STINGER シリーズに限りませんが、テーマ固有のショートコードや独自機能はとても便利です。しかし当然、テーマを変えればすべての投稿を修正するか、自分で同機能を移植する必要が出てきます。ある程度の知識があるのであれば、長い目で見たとき、そういった機能に頼らずはなから自分で実装したほうがラクになるケースは多い気がします。
