リストのマークのみ色を順番に変える方法【CSSデザインサンプル】

WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

リストのマークってシンプルですよね。
少しアクセントを施して可愛くする方法のご紹介です。

普通、リストマークの色だけを変更することはできません。変えようとすると文字色も一緒に変わります。
今回は一度リストマークを非表示にしてから、CSSで円を描くことでリストマークっぽく見せてます。

下記のコードをテーマのstyle.cssにコピペするだけでOKですが、Simplicity2用に作られています。
他のテーマでお使いの場合は#the-contentの部分をテーマに合わせて変更してください。

フォントサイズ16pxで最適化されていますので、異なるフォントサイズだと多少のズレが生じます。
そんなときは margin の 2pxの数字を変えてみてくださいね。

スポンサーリンク

リストマークの色を変更する

色のみ変えたい場合です。白抜きの丸か黒い丸かによってコードが異なります。

白抜きの丸

20160502_01

色のついた丸

20160502_02

リストのマークを変更する

リストのマークを丸ではなく他の記号にする場合です。
アイコンフォントを使用しています。
Simplicity2では以下のコードをスタイルシートにコピペするだけでOKですが、他のテーマはプラグインをインストールする必要がある可能性があります。

ハートマーク

20160502_03

これだけ並ぶと鬱陶しいのでやりすぎ禁物ですね・・・。

リストマークの色を順番に変更する

色を交互に・3つごとに変更する方法です。

2つごと

20160502_04

3つごと

20160502_05

あとがき

色は background-color または color で指定していますので、お好きな色に変更してください。

こちらの記事もおすすめです