追加CSSやテーマコーディネートで設定したCSSがインデックスで上書きされる
-
首記の件について、
具体的な目的としてはヘッダーの背景色をグラデにしたいのですがキーカラーの設定が上書きされているのか、デベロッパーツールでは「インデックス」のcssが優先されてしまいます。
これを解消してヘッダー部分の背景色をグラデにするにはインデックスされている（HTMLに自動出力される）CSS部分を削除・編集するとよいのかと考えましたがそのようにするにはどうしたらよいでしょうか？
また、それが不可能な場合、他の手段でインデックスされるCSSを上書きしてCSS指定するにはどのようにすればよいですか？
※追加CSS、テーマエディターに記載のCSS
/* ヘッダー*/
#header-box {
background-color: #007b43;
background: linear-gradient(180deg, #007b43 0%, #007b43 95%, #EDF4A2 95%, #EDF4A2 100%);
}
マニュアル確認済み
キャッシュクリア済み
プラグイン全停止済み
WordPressのバージョン : 6.2.2
ご利用のサーバー名 : ConohaWING
PHPのバージョン :
OS : Windows11
ご利用のブラウザ : Google Chrome
該当サイトのURL :
-
@duel-s さん
こんにちは！
画像とコードありがとうございます。サイトを拝見した感じですと、、、
●テーマ側のCSSファイルに書いたコードは消して良いと思います。
●追加CSSのコードが反映されてないのはコメントが影響してそうですね。。また、グラデーションを再現するCSS自体にも違和感があるので
改めてご確認いただいた方が良いかもしれません。。。ちょっと再現したい色合いがわからないため何ともですが、
グラデーションにするなら↓のようなコードになると思います！#header-box { background: linear-gradient(180deg, #007b43 0%, #EDF4A2 95%, #EDF4A2 100%); }参考になりましたら幸いです。
ご確認よろしくお願いいたします！
-
tsu_様、お返事ありがとうございます。
グラデーションに関してはきれいなグラデーションではなくてそちらを利用してぱっくり色を分けたいと思っており、上記のような表記にさせていただいております。ご教示有難うございます。ご指示通り、テーマ側のCSSファイルに記載したコードを削除したいと思います。
追加CSSのコードが反映されていない件で、コメントとおっしゃいますとコメントアウトしていることがなにか悪い影響を及ぼしているのでしょうか？
今のところ、スマホなど一部の環境では思ったように表示されているのでその点が何か関連しているのでしょうか？
立て続けに質問申し訳ございません。お手すきの際にご教示いただけますと幸いです。
-
@duel-s さん
グラデーションに関してはきれいなグラデーションではなくてそちらを利用してぱっくり色を分けたいと思っており、上記のような表記にさせていただいております。ご教示有難うございます。
こちら承知いたしました！
追加CSSのコードが反映されていない件で、コメントとおっしゃいますとコメントアウトしていることがなにか悪い影響を及ぼしているのでしょうか？
今のところ、スマホなど一部の環境では思ったように表示されているのでその点が何か関連しているのでしょうか？前回拝見した時はコメントアウトの書き方に不備があるように見えたのですが、現在は大丈夫そうです！
ご指示通り、テーマ側のCSSファイルに記載したコードを削除したいと思います。
今は圧縮系のプラグインは使っていますか？？
CSSについて確認した感じですと、子テーマのCSSにファイルにいくつか書かれていると思うのですが、
ご自身で追加したコードが複数の場所にあると管理がしにくくなるので、
全て管理画面「外観」>「カスタマイズ」の追加CSSに書いてあげるのが良いと思います！今のところ、スマホなど一部の環境では思ったように表示されているのでその点が何か関連しているのでしょうか？
現状で上手く行っていないのはどの部分でしょうか？？
（PCの○○の部分、スマホの○○の部分、といった形でお知らせいただけると助かります）よろしくお願いいたします！
