![]() |
ブログを書く人『リスト(箇条書き)の行頭記号の点や数字がぱっとしません。。画像で装飾したいのですが、やり方がわかりません。HTML/CSSでのやり方、プラグインなどを教えてください。』 |
こんな疑問にお答えします。
- リスト行頭記号(リストマーカー)の種類と変更の方法
- リストマーカーを画像で装飾する方法
- リストマーカー設定ができるWordPressプラグイン
リスト(箇条書き)の行頭につく点や数字:リストマーカーとは?
リストの行頭につく点(・)や数字(1.~ 2.~ 3.~)のことを、リストマーカーと呼びます。ここではこのリストマーカーの種類と変更方法を解説します。
ここでご紹介するリストマーカーの変更にはHTMLとCSSの知識が必要となります。わからない方は、以降でご紹介するプラグインを使った方法をお試しください。
リストを挿入すると自動で表示されるリストマーカー
WordPressでリストを挿入する際や、HTMLでulタグを使ってリストを作成するときは、自動でリストマーカーがつきます。以下がその例です。
- 順不同リスト1
- 順不同リスト2
- 順序付きリスト1
- 順序付きリスト2
記事の内容を簡潔にまとめるときに役立つリストですが、デフォルトの点や数字以外にも様々なリストマーカーが用意されています。
おさらい:HTMLでリストを作る記述
以降でリストマーカーの種類を変更するCSSへと行く前に、おさらいとしてHTMLでリスト(箇条書き)を作成する書き方をご紹介しておきます。不要な方は飛ばしてください。。
HTMLでリスト(順不同リスト、順序付きリスト)を作るには、次のようなHTMLを記述します。
See the Pen
QebWPe by takajin092 (@takajin092)
on CodePen.
順不同リストはulタグで、順序付きリストはolタグで囲みます。リスト項目はliタグの中に書きます。
これを踏まえた上で、次のリストマーカーの変更方法をご覧ください。
リストマーカーの種類と変更方法:list-style-type
上で説明した点と数字以外にもリストマーカーはたくさん存在します。
リストマーカーの種類を変更するには、CSSで「list-style-type」というプロパティの値を変更していくことで行います。
具体的には、リストを構成するli要素に対して、次のようにCSSで指定をします。
上記の”値”の部分を変更することで種類が変更できます。以下、主な種類をご紹介します。
値 | 説明 |
none | なし |
disc | 黒丸 |
circle | 白丸 |
square | 黒四角 |
decimal | 数字 |
cjk-ideographic | 漢数字 |
decimal-leading-zero | 0から始まる数字 |
lower-roman | 小文字のローマ字 |
upper-roman | 大文字のローマ字 |
lower-greek | 小文字のギリシャ文字 |
lower-alpha | 小文字のアルファベット |
upper-alpha | 大文字のアルファベット |
georgian | グルジア語 |
hebrew | ヘブライ語 |
hiragana | ひらがな |
hiragana-iroha | ひらがな(いろは順) |
katakana | カタカナ |
katakana-iroha | カタカナ(いろは順) |
上記の各リストマーカーを実行した様子を以下に示します。CSSにて上記18種類の値を設定しています。
※スマホで結果(Result)が見にくい場合は、右上のクモの巣みたいなマークをクリックしてみてください。。
See the Pen
PMqwwV by takajin092 (@takajin092)
on CodePen.
このとおり、そこそこ多くのリストマーカーが用意されているわけですが、文字だけというのもなんだか殺風景ですよね。
ということで、このリストマーカーに画像を挿入する方法を次でご紹介します。

値に”none”を指定することで、リストマーカーを消すこともできます。必要に応じて使い分けたいですね。
リスト(箇条書き)を画像で装飾するHTML:list-style-image
リストマーカーを画像で装飾する方法を解説していきます。
画像を入れるには、リストのli要素に対して、list-style-imageプロパティをCSSで指定します。具体的には次のように記述します。
list-style-imageのurl()の中には画像のパス(URL)を指定します。
これでリストマーカーに画像を挿入できるようになりました。具体的な実行結果を以下に示します。
See the Pen
aeOzBL by takajin092 (@takajin092)
on CodePen.

注意することとして、リストマーカーに使う画像のサイズは小さめにリサイズしてください。画像サイズのまま表示されるためです。
WordPress:プラグイン「Shortcodes Ultimate」で実装する方法
WordPressを利用している方は、HTMLやCSSをわざわざいじらなくても、プラグインを導入することでリストマーカーに好きな画像を設定できます。
プラグインの名称は「Shortcodes Ultimate」です。かなり有名で使い勝手の良いプラグインなので、導入しておいて損はないかと。
まず、WordPressの[プラグイン]→[新規追加]と進みます。右上の検索エリアで「Shortcodes Ultimate」と入力してください。
「Shortcodes Ultimate」が表示されるので、「今すぐインストール」をクリックします。
実際に試してみましょう。WordPressの投稿画面を開いてください。「[]ショートコードを挿入」というボタンが表示されているはずです。クリックしてください。
すると、次のような画面が表示されます。一覧から[リスト]を選択します。
次の画面ではアイコンの種類を選択します。[メディアマネージャ]と[アイコンピッカー]というボタンが表示されるかと思います。
使い分けは次のとおりです。
メディアマネージャ:メディアから任意の画像を選択する
アイコンピッカー:プラグインで用意された好きなアイコン(上図赤枠内)を選択する
アイコンを選択したら、[コンテンツ]欄にリスト項目を入力していきます。問題なければ、[ショートコードを挿入]ボタンをクリックします。
プレビュー画面で実行結果を確認してみてください。次のようにリストマーカーが画像で表示されます。
ちなみにWordPressのプラグイン「Shortcodes Ultimate」で画像をリストマーカーに設定する場合、自動でリサイズが行われます。
Shortcodes Ultimateはリスト以外にも様々な機能があるので、ぜひ活用してみてください。
まとめ
リスト(箇条書き)の行頭記号(リストマーカー)を装飾する方法を解説してきました。CSSでスタイリングする方法を知っておきましょう。WordPressの方はプラグインで簡単に実現できます。とはいえ、プラグインは嫌、、という方はCSSにチャレンジしてみてください。
リスト(箇条書き)を入れ子にしたい
WordPress:リスト(箇条書き)を「入れ子」にする【簡単】
見出しの先頭に画像を挿入したい
初心者向け:見出しの先頭を画像で装飾する方法【HTML&CSS】
おすすめのプログラミングスクール
本気でプログラミングを学び、IT企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを4社(無料体験あり)ご紹介します。