リストブロックの使い方|箇条書きリストと番号付きリストの追加と設定

リストブロック使い方を紹介します。リストを追加すると、箇条書きリストと番号付きリストから選択できます。リストの階層化(入れ子)や、デザイン設定、リンクの挿入などが簡単にできます。

目次

WordPressでリストを追加するための基礎知識

Webページにおける「リスト」は、何かの項目を箇条書きにしたり順序を表現したりするときに使います。ただ文字を羅列するのではなく、リストを使うことによって情報を見やすく整理することができます。

箇条書きリストと番号付きリスト

リストには2種類あり、以下のように使い分けます。

箇条書きリスト

各項目の順序を問わない場合に使う

番号付きリスト

各項目の順序を表現したい場合に使う

WordPressでは、リストの種類をワンクリックで切り替えることができます。

箇条書きリストの表示例
箇条書きリストの表示例
番号付きリストの表示例
番号付きリストの表示例

リストのデザイン

通常、箇条書きリストの各項目には「黒丸」「白丸」などのマークが、番号付きリストの各項目には「数字」が自動的に付けられます。

マークの種類や数字の書体など、リストのデザインは使用しているテーマによって異なります。
下記の「SWELL」は、このサイトで使っているテーマです。デザイン性が高くて使いやすいので、とても気に入っています。

このサイトで使っています

リストの階層化(入れ子)

リストには、階層構造を持たせる(入れ子にする)ことができます。

各項目どうしの関係性を視覚化するため、一般的に階層が深くなるほどリスト左側の余白が大きくなります。WordPressなら、リストの階層化も簡単です。

リストの階層化

リストを追加する方法

WordPressを始めたばかりの初心者さんであれば、記事(投稿や固定ページ)の編集にはブロックエディタを使っているはずです。

ブロックエディタでリストを使用するためには、「リスト」ブロックを追加します。詳しい使い方を見ていきましょう。

リストブロックの使い方

リストブロックの使い方を、以下の順に紹介します。

  1. リストブロックを追加する
  2. リスト項目を追加/削除する
  3. リストの種類(箇条書き/番号付き)を選択する
  4. リスト項目に階層(入れ子)を設定する
  5. デザイン・書式を設定する
  6. リンクを設定する
  7. 番号付きリストの番号を変更する
  8. リストブロックを削除する

1.リストブロックを追加する

ブロックを追加する5つの方法では、リストブロックに限らず、さまざまな新しいブロックの追加方法を紹介しています。その5つの方法のうち、リストブロックの追加に適しているのは以下の3つです。

  1. ブロックエディタ画面左上の[+]をクリック
  2. 空白ブロック右側の[+]をクリック
  3. ブロック間の[+]をクリック

方法1. ブロックエディタ画面左上の[+]をクリック

ブロックエディタ画面左上の[+]をクリック

方法2. 空白ブロック右側の[+]をクリック

空白ブロック右側の[+]をクリック

方法3. ブロック間の[+]をクリック

2つのブロックの間に表示される[+]をクリック

ブロックの追加方法がよくわからない場合は、下記ページをお読みください。

2.リスト項目を追加/削除する

リスト項目の追加

リスト項目の末尾で「Enter」キーを押すことで、新しいリスト項目を入力できるようになります。この操作を、必要な回数だけ繰り返します。

リスト項目を入力するたびに「Enter」キーを押す

リスト項目の削除

リスト項目の文字列をすべて削除した後に「BackSpace」キーを押すと、リスト項目を削除することができます。

リスト項目の文字列をすべて削除した後に「BackSpace」キーを押す

3.リストの種類(箇条書き/番号付き)を選択する

リストブロック追加後の初期状態では「箇条書きリスト」に設定されています。リストの種類を変更するには、ブロックツールバーの「番号付きリストに変換」ボタンをクリックします。

「番号付きリストに変換」ボタンをクリック

4.リスト項目に階層(入れ子)を設定する

リストに階層構造を持たせる(入れ子にする)には、対象のリスト項目を選択し、ブロックツールバーの「リスト項目をインデント」ボタンをクリックします。

リスト項目に階層(入れ子)を設定するには「リスト項目をインデント」ボタンをクリック

元の階層に戻すには、対象のリスト項目を選択し、ブロックツールバーの「リスト項目のインデントを戻す」ボタンをクリックします。

元の階層に戻すには「リスト項目のインデントを戻す」ボタンをクリック

5.デザイン・書式を設定する

リストブロックの文字サイズや背景色などの設定をするには、「ブロックツールバー」や「パネル」を使います。

リストブロックのブロックツールバーとパネル

リストブロックのデザイン変更は、「段落ブロックのデザイン設定」と同様の手順で設定できます。詳しくは、段落ブロックの使い方をお読みください。

6.リンクを設定する

リンクを設定したいテキストを選択して、「リンク」ボタンをクリックします。

リストブロックのテキストを選択してリンクを挿入

リンク先は、次の3通りを指定することができます。

  • 外部サイトに移動するリンク(外部リンク)
  • サイト内の別ページに移動するリンク(内部リンク)
  • ページ内の任意の場所に移動するリンク(ページ内リンク)
リストブロックのリンクの設定

リンクの設定については、リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込みもあわせてお読みください。

7.番号付きリストの番号を変更する

番号付きリストの番号を変更するには、パネルの「番号付きリスト設定」を使います。

開始番号を変更する

通常、番号付きリストの順序は「1」から始まりますが、「初期値」を指定することで、任意の番号から始めることができます。

開始番号を変更するには、「番号付きリスト設定」の「初期値」に任意の番号を入力

番号を逆順で表示する

通常、番号付きリストの順序は「1,2,3…」と小さい順(昇順)に並びますが、「逆順」をオンにすることで、大きい順(降順)に並べることができます。

番号を逆順で表示するには、「番号付きリスト設定」の「逆順」をオンにする

8.リストブロックを削除する

ブロックを削除するには、ブロックツールバーの「オプション」>「ブロックを削除」の順にクリックします。

リストブロックを削除する

まとめ

リストには2種類あり、目的に応じて使い分けます。各項目の順序を問わない場合は「箇条書きリスト」を、順序を表現したい場合は「番号付きリスト」を使用します。リストの種類は、リストブロックのブロックツールバーで切り替えることができます。

リストに階層構造を持たせる(入れ子にする)ことで、各項目どうしの関係性を視覚化できます。

番号付きリストの「開始番号の変更」や「逆順での表示」は、リストブロックのパネルで設定します。

リストブロックの使い方

この記事が気に入ったら
フォローしてね!

この記事を書いた人

WordPress超初心者講座の運営者。
ワードプレスでブログ・サイトを作り始めて12年。アラフィフ。
今も年間330日くらい、WordPressを触っています。

Twitterはじめました。

目次