番号なしulリストを記号・マーク・画像で装飾！CSS初心者が応用できるカスタマイズ説明あり

カスタマイズ

2017.01.28

番号なしulリスト前の『・』をCSSでカスタマイズして変更する3つの方法と、目次のプラグインTable of Contents PlusのリストマークをCSSで消すセレクタなどを紹介します。

文字化けしないふつうの記号＃や★、＊などの記号を使う
WebFontを使う
アイコンの画像を使う
- アイコン画像のサイズをCSSで指定する

HTMLに階層を付けたら、ulのliが入れ子になるので、リストの『・』のstyleが同じものが羅列します。せっかく階層をつけたので、リスト前の装飾をCSSで指定して変えたいところ。

はじめに下記CSSコードをコピペすれば、きれいに反映しますよ＾＾

LINKCSSで番号なしulリストマークのカスタマイズ！※子要素がズレる・はみ出す原因text-indentは入れちゃダメ

『HTMLのどこを装飾するか指定する』CSSの『セレクタ』から順番に見てみましょう＾＾

リストスタイルタイプの変更については、CSSのクイックリファレンスlist-style-type…マーカー文字の種類を指定するを参考になさってください。

ulリスト前の点『・』基本的なCSSのセレクタ指定
番号なしリストの『・』リストスタイルをCSSで消す
1. 目次のプラグインTable of Contents PlusのリストマークをCSSで消す
リスト前にマークを付けたら、左にスペースが必要
1. リスト前の装飾にはtext-indentを使わない！paddingやmarginを使う
CSSでリストul li前の点『・』を記号に変える
ul番号なしリストにWebFontを使うCSS
リスト前の点『・』をアイコン画像に変更するCSS
1. 疑似要素:beforeの画像サイズをCSSで変更したい場合
さいごに

ulリスト前の点『・』基本的なCSSのセレクタ指定

ul li:beforeの装飾を変更した例

ul liを入れ子にしたとき、階層ごとにスタイルを変えたほうが項目の見栄えが良いので、見ていて分かりやすいです。

CSSでスタイルを触りだした頃、この指定方法が分からかったので、ulリストの基本的なセレクタの指定方法から書きますね。

ul li:before
- ul li ul li:before
  - ul li ul li ul li:before

上記は、孫の孫まで反映させ、下記は直下の子だけ反映させる子セレクタ>を使った感じ。

ul > li:before
- ul > li > ul > li:before
  - ul > li > ul > li > ul > li:before

これに#mainなど、テーマに合わせた親要素を前に書いて半角スペースをあけると、優先順位で反映しない…ということがありません。

例えばstinger系では.post ul > li:beforeや.entry-content ul > li:before、Simplicityでは.entry-content ul > li:beforeのように記事内の親要素、クラスpostや.entry-contentを指定します。

このようにリストを入れ子にしたhtmlの書き方は下記をどうぞ＾＾

LINK箇条書きulとol！liタグを入れ子にする方法で、スッキリ見やすいブログへ♪

番号なしリストの『・』リストスタイルをCSSで消す

リストスタイル『・』を消さないとリストマークが無駄についてしまいます。本来のマークを消して装飾するので、リストスタイルをCSSで消してください。

ul {
	list-style: none;
}

上述どおり記事内の親要素を追加したら、記事内のみ番号なしリストulの装飾が可能です。

目次のプラグインTable of Contents PlusのリストマークをCSSで消す

目次のプラグインTable of Contents Plusも番号なしリストでできているので、リストマークと次にCSSで装飾するul li:before（番号なしリスト前）の装飾は必要ありません。

プラグインTOCの目次のみ、リスト前のマークを指定して消したいトコロですよね。そのCSSの書き方・指定のしかたは下記。

.toc_list li {
	list-style-type: none;/*リスト消す*/
}

.toc_list li:before {
	display: none;/*リスト前の個人的カスタマイズ消す*/
}

目次TOCにつけられたタグを指定し目次内のリストスタイルと、自分でカスタマイズした番号なしリスト前の装飾を消す記載です。

マージンは左から上右下左の外側の余白を、文字の大きさ1文字分をあらわす1emを使って余白を付けてますが、カスタマイズに合わせて調整してくださいね（emをpxに変更も可）。

リスト前にマークを付けたら、左にスペースが必要

リストマークを消したら、リストのビフォー（左側）にマークを装飾します。マークを入れる分のスペースが必要になりますよね。

スペースを入れなかったら、マークとリストの文字が重なるからです。

text-indent: 1.4em;で左へ移動すれば対応でき、見栄えもキレいです。が！

リスト前の装飾にはtext-indentを使わない！paddingやmarginを使う

このtext-indentを使うとリストを入れ子にした場合や、リスト内の子要素に入れたリスト、その中に画像を入れた場合、インデントが指定した分すべてズレて、子要素すべて修正が必要になるんです。

下記画像はリスト前にテキストインデントを指定した子要素がズレたものです。

リスト内の子要素が全てズレて、修正が面倒

paddingやmarginを使ったほうがいいです。テキストインデントが原因で、リスト内スタイルを修正する工程を書いたページに色々書いたので、気になるかたはどうぞ。

LINKCSS初心者へ❦スタイルの不具合ってどうやって直すの？その工程、見てみよぉ！

text-indentなど使わない、もっと良いカスタマイズ方法はあります！またの機会にページを作成しますね。

セレクタの指定と不要なリストスタイルの削除方法、使うと面倒なスタイルがわかったトコで、記号・Webフォント・画像を使ってulリストのstyle変更するCSSを見てみましょう。

CSSでリストul li前の点『・』を記号に変える

番号なしリスト前に記号を入れたい場合、リストを階層化（入れ子）にした場合のスタイルを変更する装飾例は下記です。

リスト階層１
- 階層2
  - 階層3

このCSSのセレクタの前に、上述どおり.entry-contentなど、あなたのテーマにあった親要素を書いて半角スペースを開けてくださいね。

ul {
	list-style: none;
}
ul li:before {
	content: "❦";
	color: #ff8b8b;
	padding-right: 3px;
	line-height: 1.8;
}
ul li ul li:before {
	color: #ff91cc;
}
ul li ul li ul li:before {
	color: #db91ff;
}

こちらのハート❦は環境依存なので、反映しない場合もありそうですが＾＾；

こんな方法もあるってことで♪またテーマや現状のカスタマイズによって、行間などの見栄えは変わります。

ul番号なしリストにWebFontを使うCSS

ul li:beforeの装飾を変更した例

リスト階層１
- 階層2
  - 階層3

Webフォントを使った装飾は、Font Awesomeのアイコンを使用する方法です。テーマによって導入している場合、前提としてCSSを簡単に紹介しますね。

右側の過去に使ったテーマ（Gush4）のスタイル

ul > li:before {
	content: "\f00c";
	font-family: FontAwesome;
	color: #2aa5d9;
}

元の（親）テーマのスタイルを継承させる形で、簡略化してますがCSSは下記の通り。

ul {
  list-style: none;
}

ul > li:before {
	content: "\f00c";
	font-family: FontAwesome;
	color: #D893E6;
}
ul > li > ul > li:before {
	content: "\f046";
	color: #a093e6;
}
ul > li > ul > li > ul > li:before {
	color: #aee693;
}

ポイントは、下記

content: "\f046";
font-family: FontAwesome;

を入れたらOK！簡単に表示されます。

反映しない場合。テーマのコンテンツを囲っている親要素を前につけ、優先順位を高めると反映しますよ。

LINKWordPressでコンテンツ部分だけの親要素を作る！カスタマイズするとき本文以外、装飾を反映させない方法

content: “\f046”;の数字は、Font Awesomeのアイコンから好きなアイコンを例えばならそれをクリックした画面上（下記画像の英数字）のものです。

Font Awesomeの番号f14a

content: “\f14a”; “\ココに英数字“となります。テーマに導入済みなら手間が省けて楽ですね！

テーマにFont Awesomeを導入されてない場合、超簡単に導入できる方法をかいてるのでどうぞ。

LINKWordPressなどCMSでFont Awesomeアイコンフォントを超簡単に導入！タグ前にCSSで書く方法＋追加された最新アイコンが表示しない原因と解決方法

リスト前の点『・』をアイコン画像に変更するCSS

画像を入れる場合のCSSは、画像のURLを指定したらリスト前にアイコンを表示させることができます。

リスト前に入れた画像

下記ページからアイコンをダウンロード後、アップして使ってます＾＾

LINK宝石・コイン・真珠・ラインストーン素材::フリー素材*ヒバナ * *

リスト階層１
- 階層2
  - 階層3

ul {
  list-style: none;
}

ul li:before {
	content: url(画像のURL);
}

画像のURLの指定は、WordPressでどうすれば良いか不明な場合は、下記ページの見出し1.1.2添付ファイルのURLを参考にどうぞ＾＾

LINKWordPress初心者に画像追加時のメディアを説明！画像サイズ変更・画像のURLはどこ！？キャプション・代替テキストは超大事だからチェックねっ

疑似要素:beforeの画像サイズをCSSで変更したい場合

元の画像のサイズを変更したい場合は、画像を背景にしてサイズ指定し、縦横比を保ったままサイズに収まるように指定します。

コレが元のアイコンの大きさで、下記リンク先からダウンロードしアップました。

LINKアイコン素材 – 葉っぱ素材 – フリー素材「blue-green」

この画像をリスト前に持ってきて、CSSで画像サイズを変更させたものが下記リスト。

リスト階層１
- 階層2
  - 階層3

ul li:before {
	content: "";
	background: url(画像のURL) no-repeat;
	display: inline-block;
	margin: 0 3px -4px 0;
	width: 20px;
	height: 20px;
	background-size: contain;
}

CSSコードの説明は上から順にザックリ下記のとおり。

contentの値””は、noneと同じ
background背景を画像にして、それをリピートさせない指定
リンク前の疑似要素をinline-blockで指定することで
リスト前画像とリストの項目とのズレを、marginで右側余白と上下の間隔を指定。
外側余白でリスト前疑似要素の位置を微調整：右が調整後。
- 数値は左から、上右下左の右回り
widthリスト前（画像）の横幅
heightリスト前（画像）の高さ（縦幅）
background-size背景サイズの指定方法contain