ブログを書く人『リスト(箇条書き)の行頭記号の点や数字がぱっとしません。。画像で装飾したいのですが、やり方がわかりません。HTML/CSSでのやり方、プラグインなどを教えてください。』

こんな疑問にお答えします。

この記事でわかること
  • リスト行頭記号(リストマーカー)の種類と変更の方法
  • リストマーカーを画像で装飾する方法
  • リストマーカー設定ができるWordPressプラグイン

リスト(箇条書き)の行頭につく点や数字:リストマーカーとは?

リストの行頭につく点(・)や数字(1.~ 2.~ 3.~)のことを、リストマーカーと呼びます。ここではこのリストマーカーの種類と変更方法を解説します。

ここでご紹介するリストマーカーの変更にはHTMLとCSSの知識が必要となります。わからない方は、以降でご紹介するプラグインを使った方法をお試しください。

リストを挿入すると自動で表示されるリストマーカー

WordPressでリストを挿入する際や、HTMLでulタグを使ってリストを作成するときは、自動でリストマーカーがつきます。以下がその例です。

  • 順不同リスト1
  • 順不同リスト2
  1. 順序付きリスト1
  2. 順序付きリスト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で指定をします。

li{list-style-type: 値}

上記の”値”の部分を変更することで種類が変更できます。以下、主な種類をご紹介します。

説明
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.


このとおり、そこそこ多くのリストマーカーが用意されているわけですが、文字だけというのもなんだか殺風景ですよね。

ということで、このリストマーカーに画像を挿入する方法を次でご紹介します。

me

値に”none”を指定することで、リストマーカーを消すこともできます。必要に応じて使い分けたいですね。

リスト(箇条書き)を画像で装飾するHTML:list-style-image

リストマーカーを画像で装飾する方法を解説していきます。

画像を入れるには、リストのli要素に対して、list-style-imageプロパティをCSSで指定します。具体的には次のように記述します。

li{list-style-image: url();}

list-style-imageのurl()の中には画像のパス(URL)を指定します。

これでリストマーカーに画像を挿入できるようになりました。具体的な実行結果を以下に示します。

See the Pen
aeOzBL
by takajin092 (@takajin092)
on CodePen.


me

注意することとして、リストマーカーに使う画像のサイズは小さめにリサイズしてください。画像サイズのまま表示されるためです。

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社(無料体験あり)ご紹介します。

プログラマーおすすめのプログラミングスクール4社:無料体験あり!