 |
ブログを書く人『リスト（箇条書き）の行頭記号の点や数字がぱっとしません。。画像で装飾したいのですが、やり方がわかりません。HTML/CSSでのやり方、プラグインなどを教えてください。』 |
こんな疑問にお答えします。
- リスト行頭記号（リストマーカー）の種類と変更の方法
- リストマーカーを画像で装飾する方法
- リストマーカー設定ができるWordPressプラグイン
リスト（箇条書き）の行頭につく点や数字：リストマーカーとは？
リストの行頭につく点（・）や数字（1.~ 2.~ 3.~）のことを、リストマーカーと呼びます。ここではこのリストマーカーの種類と変更方法を解説します。
ここでご紹介するリストマーカーの変更にはHTMLとCSSの知識が必要となります。わからない方は、以降でご紹介するプラグインを使った方法をお試しください。
リストを挿入すると自動で表示されるリストマーカー
WordPressでリストを挿入する際や、HTMLでulタグを使ってリストを作成するときは、自動でリストマーカーがつきます。以下がその例です。
- 順不同リスト１
- 順不同リスト２
- 順序付きリスト１
- 順序付きリスト２
記事の内容を簡潔にまとめるときに役立つリストですが、デフォルトの点や数字以外にも様々なリストマーカーが用意されています。
おさらい：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企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを４社（無料体験あり）ご紹介します。
