タグアイコン

[TheBestPessimist]

箇条書きタグ + タグの色

箇条書きスタイルのタグを使用しており、

• 同じ タグアイコン と タグテキスト の色にしたい場合
• タグアイコン が設定されていない場合にのみ箇条書きを表示したい場合

books と science-fiction のタグに対して私が行った方法を以下に示します。

完成例：

1. Tag icons コンポーネント（このコンポーネント）の設定

2. Tag Icons と同期を保つ必要があるセカンダリコンポーネントの設定
   このコンポーネントでは以下の 2 つの処理を行います：
   1. 特定のタグの箇条書きを非表示にする
   2. タグテキストをアイコンと同じ色にする

これを実現するために、新しいテーマコンポーネント Tag Icons extra を作成します。
Common/CSS セクションで：

1. 以下のミックスインを追加します（1 回だけ必要）：

@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

2. 編集したいタグごとに以下のコードを貼り付け、REPLACEMETAG をタグ名に、REPLACEMECOLOR をアイコンと同じ色に置き換えます：

[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}