WordPressテーマSANGOの質問

円番号や指チェック、シェブロンをメインの色と、別の色とで使い分けたい

アバター
桧原 友佳

いつもお世話になっております。

円番号や指チェック、シェブロンをメインカラーと別の色で使い分けたいのですが、
以下のCSSで色を変更すると、メインカラーも変わってしまいます。
何か方法はありますでしょうか?

.entry-content .li-chevron ul {
border-color: 色コード;
}
.entry-content .li-chevron li:before {
color: 色コード;
}

SANGOの箇条書き種類一覧
記事に様々なスタイルの箇条書きを挿入する
コメントへの回答
サルワカくん
サルワカくん
2020/06/13

方法は色々とありますが、基本的には「色ごとに別のクラスを指定する」ことになると思います。
たとえば、シェブロンのリストの場合、メインカラーの箇条書きはこのまま使用します。

[list class="li-chevron"]
〜箇条書き〜
[/list]

色を変えたい場合にのみ、以下のように「style-blue」というようなクラス名を追加するようにします(もちろん別のクラス名でもOKです)。

[list class="li-chevron style-blue"]
〜箇条書き〜
[/list]

上記のような書き方をしたときに、別の配色になるようにCSSに以下のように指定します。

.entry-content .li-chevron.style-blue ul {
border-color: 色コード;
}
.entry-content .li-chevron.style-blue li:before {
color: 色コード;
}

.li-chevron.style-blueの間に半角スペースを入れると動かないのでご注意ください(詳しくはCSSのセレクタをどうぞ)。

よろしくお願いします。