WordPress箇条書き/番号付きリストの作り方【リストブロック】

WordPressで記事を作成するときに、複数の項目を列挙する際にはリストブロックが便利です。

リストブロックでは、箇条書きや順序付きリストを作成することができます。

今回は、WordPressのブロックエディタで使える「リストブロック」について説明します。

■WordPress箇条書き/番号付きの作り方・リストブロックの使い方(動画解説版)

(※)本記事では、WordPress6.2、無料テーマLightningを利用した環境で説明しています。

リストブロックとは？

リストブロックは文章を箇条書きにしたい場合に使えるブロックです。

リストブロックを利用すると、以下のような箇条書きや、順序付きリストを簡単に作成できます。

自分で点を打ったり、番号を入力しても似た形のリストはできますが、この方法だと文頭の初めの文字の位置がずれてしまいます。

■（参考）段落ブロックの先頭に「・」を入れて作成した箇条書き。2行目から文頭がずれてしまっている。

そのため、見た目的にもHTMLの構造的にも、箇条書きや順序付きリストにできるものは、リストブロックを使うことをおすすめします。

リストブロックの基本的な使い方

まずはリストブロックの基本的な使い方を紹介します。

1. リストブロックの追加方法

リストブロックを追加するには、WordPressの投稿画面あるいは固定ページを開き「+（プラス）」アイコン ＞ 「リスト」をクリックします。

そうするとリストブロックが追加されます。

リストブロックが追加されたら、表示する内容を入力していき、エンターキーで改行すると2行目・3行目と、リスト項目を増やしていくことができます。

リストブロックの構成（外側リストと内側リスト項目）

リストブロックには外側の「リスト」ブロックと内側の「リスト項目」から構成されています。

外側のリストブロックでは、リスト全体の装飾・スタイルなどを行えるのに対して、内側の各リスト項目ブロックでは、各リストの色や大きさなどの設定をそれぞれ設定できます。

外側のリストと内側のリスト項目では設定できる項目も変わるためご注意ください。

2. 順序付きリストに変更する方法

リストブロックを追加したばかりの状態だと、デフォルトではナカグロ（・）がついたリストが表示されます。

これを1、2、3...と番号付きリストにしたい場合は、リスト全体が選択されている状態で「順序付きリスト」をクリックします。

これでリストの先頭に数字が付いた順序付きリストに変更できました。

なお、再び箇条書きリストに戻してあげたい場合は「順序付きリスト」の左隣にある「順序なしリスト」をクリックしてあげればOKです。

3. リスト項目を入れ子・階層化する方法

リストの項目は入れ子にして以下のように副項目化することもできます。リストで階層を見せるときに便利です。

リスト項目を入れ子・階層化するには、副項目にしたいリスト項目を選択してから、「インデント」をクリックします。（※インデント＝字下げ）

上の例では「品川校」と書かれたリスト項目を選択したので、こちらのみ副項目になりました。

同様に、副項目にしたいリスト項目を選択し「インデント」をクリックすることで、リスト項目を入れ子にすることが可能です。

なお、階層化を戻したい場合は、リスト項目を選択してから「インデント解除」をクリックします。

以上の操作でインデントが解除され、リストの項目をフラットに戻すことができました。

リスト全体に対する装飾方法

次にリスト全体に対する代表的な装飾方法をいくつか紹介します。

リスト全体の装飾は、リストを選択した状態で右側メニューから設定できます。

なお、右側にメニューが表示されていない場合は「設定」アイコンをクリックすることで、メニューを表示させることができます。

また、ご利用テーマやプラグインなどの環境によっては、下記のように二つのタブに分かれてグルーピングされている場合がよくあります。ご利用の環境で該当箇所が見つからない場合は、二つのタブの両方を確認してみてください。

 

1. フォントサイズ・色の設定

右側のメニューからリストのフォントサイズや文字色、背景色の設定ができます。

下記はテキストを「白文字」、背景を「赤色」、フォントサイズを「M」としている例です。

2. (順序付きリストのみ)番号の設定

順序付きリストに設定している場合のみ、先頭番号の初期値の設定や、順番などを設定することができます。

以下では初期値を「3」、「リストの数字を逆順にする」にチェックを入れているため、リストの番号が上から3、2、1と下がっていっているのがわかります。

3. id・class設定

高度な設定では、リストブロックのid属性やclass属性の設定ができ、CSSなどでカスタマイズすることができます。

4. スタイルなど独自の設定（ご利用のテーマ・プラグインによる）

ご利用のテーマ・プラグインによっては、ブロックの設定項目が拡張されて、独自のスタイルや設定ができる場合があります。

上の図は、人気WordPress有料テーマ「SWELL」を使用している例ですが、このテーマではリストアイコンや、リストの下に点線を付けたりといったスタイルの変更が可能です。

5. その他の設定

右側メニューの「タイポグラフィ」の右側にある縦三点リーダー（︙）をクリックすると、リスト全体の外観（例：細字、ボールドなど）を変えたり、文字間隔を広げたりすることができます。

リスト項目1つ1つに対する装飾方法

次にリスト項目1つ1つに対する装飾方法についてです。

リスト項目1つ1つの装飾は、リスト項目を選択した状態で主に上部ツールバーから設定できます。

1. テキストを太字にする

リスト項目を選択し、太字にしたい部分をドラックしてから上部ツールバーの「B」アイコンをクリックすると、テキストを太字にできます。

2. テキストをイタリック(斜体)にする

リスト項目を選択し、イタリック(斜体)にしたい部分をドラッグしてからイタリック「I」のアイコンをクリックすると、イタリックに設定できます。

3. リンクの設定

リスト項目にリンクを挿入する場合は、リンクにしたい箇所をドラッグしてから「リンク」と書かれたアイコンをクリックします。

そうするとリンクを挿入する画面が出てくるので、URLを貼り付けます。また、新しいタブで開きたい場合は「新しいタブで開く」をオンにしましょう。

4. その他の設定

リスト項目を選択し、スタイルを変更したい箇所をドラッグした状態で下矢印のアイコンをクリックすると、文字色や背景色、インライン画像の挿入などができます。

まとめ

まとめです。今回はリストブロックの使い方について説明しました。

リストブロックでは、箇条書きや順序付きリストを作成することができます。

WordPressで記事を作成するときに、複数の項目を列挙する際にはリストブロックが便利です。

見やすさ・HTMLの構造的にも、箇条書きの場合は、段落ブロックと「・」を使って表現するのではなく、リストブロックを使ってあげましょう。

今回は以上になります。最後までご覧いただきありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室