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

2016-05-02Web制作

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

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

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

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

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

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

スポンサーリンク

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

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

白抜きの丸

20160502_01

#the-content ul {
	padding-left: 20px;
}
#the-content ul li {
	list-style-type: none;
}
#the-content ul li:before {
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid #da6272;
	content: '';
	display: inline-block;
	margin: auto 5px 2px 0px;
	width: 8px;
	height: 8px;
}

色のついた丸

20160502_02

#the-content ul {
	padding-left: 20px;
}
#the-content ul li {
	list-style-type: none;
}
#the-content ul li:before {
	background-color: #da6272;
	border-radius: 50%;
	content: '';
	display: inline-block;
	margin: auto 5px 2px 0px;
	width: 8px;
	height: 8px;
}

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

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

ハートマーク

20160502_03

#the-content ul {
	padding-left: 20px;
}
#the-content ul li {
	list-style-type: none;
}
#the-content ul li:before {
	color: #da6272;
	content: '\f004';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}

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

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

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

2つごと

20160502_04

#the-content ul {
	padding-left: 20px;
}
#the-content ul li {
	list-style-type: none;
}
#the-content ul li:nth-child(2n+1):before {
	color: #dd6673;
	content: '\f046';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}
#the-content ul li:nth-child(2n):before {
	color: #4784bf;
	content: '\f046';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}

3つごと

20160502_05

#the-content ul {
	padding-left: 20px;
}
#the-content ul li {
	list-style-type: none;
}
#the-content ul li:nth-child(3n+1):before {
	color: #dd6673;
	content: '\f046';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}
#the-content ul li:nth-child(3n+2):before {
	color: #4784bf;
	content: '\f046';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}
#the-content ul li:nth-child(3n+3):before {
	color: #39a869;
	content: '\f046';
	font-family: 'FontAwesome';
	margin: auto 5px 2px 0px;
}

あとがき

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

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