WordPressで記事を作成するときに、複数の項目を列挙する際にはリストブロックが便利です。
リストブロックでは、箇条書きや番号付きリストを作成することができます。
今回は、WordPressのブロックエディタで使える「リストブロック」について説明します。
■WordPress箇条書き/番号付きの作り方・リストブロックの使い方(動画解説版)
もくじ
(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。
(関連記事)ブロックエディターの使い方について
本記事では、カバーブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
リストブロックとは
リストブロックは文章を箇条書きにしたい場合に使います。
番号なし、番号付きの箇条書きを以下のように作成できます。
リストブロックでナカグロでは番号が自動的に入力されるので、自分で入れる手間がいりません。
なお、自分で点を打ったり、番号を入力しても似た形はできますが、文頭の初めの文字の位置がずれてしまいます。
■以下は、段落ブロックで「・」を入れて書いた箇条書きです。2行目からがずれています。
見た目的にも、HTMLの構造的にも、箇条書きや番号付きリストにできるものは、リストブロックを使うことをおすすめします。
リストブロックの基本的な使い方
リストブロックの追加方法
ここからはブロックエディタからリストブロックを追加する方法を説明します。
まずはプラスのアイコンをクリックして、ブロックの中からリストをクリックしてください。
リストブロックが追加されました。
リストブロックを追加したら、表示する内容を入力していきます。文字を入力して改行すると、自動的に「・(ナカグロ)」が表示されますので、テキストを入力していきます。
番号付きリストに変更する方法
リストは、1、2、3...と番号付きリストにすることもできます。
まずリストを作成しておき、番号付きリストのアイコンをクリックします。
番号付きリストに変更されました。
なお、箇条書きリストに変換アイコンをクリックすると、再び箇条書きリストに戻すことができます。
箇条書きリストに戻すことができました。
リスト項目を入れ子・階層化する方法
リストの項目は入れ子にして副項目化にすることもできます。リストで階層を見せるときに便利です。
リスト項目を入れ子・階層化するには、副項目にしたい箇所にカーソルを合わせて、「リスト項目をインデント」のアイコンをクリックします。※インデント＝字下げ
下記の例では、品川校が副項目になりました。
そのまま副項目でリストを作成することができます。
なお、階層化を戻したい場合は、「リスト項目のインデントを戻す」のアイコンをクリックします。
インデントが解除され、リストの項目がフラットになりました。
リストの装飾方法
次にリスト項目の代表的な装飾方法をいくつかご紹介します。
右メニューからできる設定
リストブロックを選択した状態で右側メニューでは、リストブロックの設定ができます。※表示されていない場合は右上の設定アイコンをクリックしてください。
フォントサイズ・色の設定
リストブロックの文字フォントサイズや文字色、背景色の設定ができます。下記はフォントサイズ特大・白文字・赤背景の例。
(番号付きリストのみ)番号の設定
番号付きリストに設定している場合のみ、先頭番号の数字の設定や、順番などを設定することができます。
高度な設定でID・CLASS設定
高度な設定では、リストブロックのID属性やCLASS属性の設定ができ、CSSなどでカスタマイズすることができます。
スタイルなど独自の設定
ご利用のテーマ・プラグインによっては、ブロックの設定項目が拡張されて、独自のスタイルや設定ができる場合があります。
※上記はLightning、VK All in one Expansion Unitプラグインを利用した例
上部ツールバーからできる設定
上部ツールバーからは、主にリストのテキストの一部に対して装飾をすることができます。
テキストを太字にする
リストのブロックを選択して、太字に変更したい部分をドラックして、「B」の太字のアイコンをクリックすると太字に設定できます。
テキストをイタリック(斜体)にする
リストブロックを選択して、イタリック(斜体)にしたい部分をドラッグして、イタリック「I」のアイコンをクリックするとイタリックに設定できます。
リンクを挿入・設定する
リストでリンクを挿入する場合は、まずは以下のリンクのアイコンをクリックします。
リンクを挿入する画面が出てきますので、URLを貼り付けます。新しいタブで開く場合は「新しいタブで開く」をオンにしましょう。
その他の設定
下矢印のアイコンをクリックすると、インラインコード、インライン画像、テキスト色、取り消し線などのそのほかの細かい設定ができます。
まとめ
まとめです。今回はリストブロックの使い方について説明しました。
リストブロックでは、箇条書きや番号付きリストを作成することができます。
WordPressで記事を作成するときに、複数の項目を列挙する際にはリストブロックが便利です。
見やすさ・HTMLの構造的にも、箇条書きの場合は、段落で「・」を使うよりも、リストブロックを使ってあげましょう。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
