カテゴリ アイコンの色を単色にするにはどうすればいいですか？

[bryce (Bryce Huhtala)]

CSS を使用して変更する方法を以下に示します。

1. アイコンを右クリックし、「検証」を選択します。
   

   

2. ブラウザの開発者ツールが開きます。（注意: ここでは Chrome を使用していますが、ほとんどのブラウザで同じことができます！）見るべきものはたくさんありますが、主に 2 つのセクションに焦点を当てます。要素は、ページのパーツをネストされた階層で表示し、スタイルは、選択した要素に影響を与えている CSS を表示します。
   

   

3. 通常、右クリック → 検証を使用すると、編集したい要素にかなり近づきますが、多くの場合、少し掘り下げる必要があります。この場合、<span> 要素が選択されましたが、アイコンを担当している要素はその中にあります。それは ::before 要素です。
   

   

4. 右クリック → 検証を使用すると、編集したい要素にかなり近づきますが、多くの場合、少し掘り下げる必要があります。この場合、<span> 要素が選択されましたが、アイコンを担当している要素はその中にあります。それは ::before 要素です。
   

5. スタイルパネルを見ると、背景を赤に設定する宣言がありますが、2 色の背景を設定する別のルールによって上書きされています。（注意: スタイルパネルの CSS を自由に編集して実験してください。変更は一時的なもので、ページが更新されると元に戻ります。個々の宣言をオン/オフして、その効果を確認することもできます。）
   

   

6. 上のルールからセレクター部分と下のルールから元の背景宣言をコピーして、再度上書きする新しいルールを作成できます。
   

   

7. この新しいルールは、カスタム/テーマ CSS に配置されます。すべて正しく機能した場合、アイコンはサブカテゴリを表す単色になります！

.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}