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

WordPress

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

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

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

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

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


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

(関連記事)ブロックエディターの使い方について

本記事では、カバーブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

リストブロックとは

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

番号なし、番号付きの箇条書きを以下のように作成できます。

リストブロックのサンプル

リストブロックでナカグロでは番号が自動的に入力されるので、自分で入れる手間がいりません。

なお、自分で点を打ったり、番号を入力しても似た形はできますが、文頭の初めの文字の位置がずれてしまいます。

■以下は、段落ブロックで「・」を入れて書いた箇条書きです。2行目からがずれています。
段落ブロックで「・」を入れて書いた箇条書きです。2行目からがずれています。
 

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

 

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

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

ここからはブロックエディタからリストブロックを追加する方法を説明します。
 

まずはプラスのアイコンをクリックして、ブロックの中からリストをクリックしてください。
ブロックの中からリストをクリック
 

リストブロックが追加されました。
リストブロックが追加されました
 

リストブロックを追加したら、表示する内容を入力していきます。文字を入力して改行すると、自動的に「・(ナカグロ)」が表示されますので、テキストを入力していきます。
リストのテキストを入力していきます
 

番号付きリストに変更する方法

リストは、1、2、3...と番号付きリストにすることもできます。
 
まずリストを作成しておき、番号付きリストのアイコンをクリックします。
番号付きリストのアイコンをクリック
 

番号付きリストに変更されました。
番号付きリストに変更されました。
 

なお、箇条書きリストに変換アイコンをクリックすると、再び箇条書きリストに戻すことができます。
箇条書きリストに変換アイコンをクリックすると、再び箇条書きリストに戻す
 

箇条書きリストに戻すことができました。
箇条書きリストに戻すことができました
 

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

リストの項目は入れ子にして副項目化にすることもできます。リストで階層を見せるときに便利です。
リストの項目は入れ子にして副項目化のサンプル
 

リスト項目を入れ子・階層化するには、副項目にしたい箇所にカーソルを合わせて、「リスト項目をインデント」のアイコンをクリックします。※インデント=字下げ
、「リスト項目をインデント」のアイコンをクリック
 

下記の例では、品川校が副項目になりました。
品川校が副項目になりました
 

そのまま副項目でリストを作成することができます。
副項目でリストを作成
 

なお、階層化を戻したい場合は、「リスト項目のインデントを戻す」のアイコンをクリックします。
階層化を戻したい場合は、「リスト項目のインデントを戻す」のアイコンをクリック
 

インデントが解除され、リストの項目がフラットになりました。
インデントが解除され、リストの項目がフラットになりました
 

リストの装飾方法

次にリスト項目の代表的な装飾方法をいくつかご紹介します。
 

右メニューからできる設定

リストブロックを選択した状態で右側メニューでは、リストブロックの設定ができます。※表示されていない場合は右上の設定アイコンをクリックしてください。
リストブロックの右設定メニュー
 

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

リストブロックの文字フォントサイズや文字色、背景色の設定ができます。下記はフォントサイズ特大・白文字・赤背景の例。
フォントサイズ特大・白文字・赤背景の例
 

(番号付きリストのみ)番号の設定

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

高度な設定でID・CLASS設定

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

スタイルなど独自の設定

ご利用のテーマ・プラグインによっては、ブロックの設定項目が拡張されて、独自のスタイルや設定ができる場合があります。
独自のスタイルや設定
※上記はLightning、VK All in one Expansion Unitプラグインを利用した例
 

上部ツールバーからできる設定

上部ツールバーからは、主にリストのテキストの一部に対して装飾をすることができます。

リストブロックの上部ツールバー
 

テキストを太字にする

リストのブロックを選択して、太字に変更したい部分をドラックして、「B」の太字のアイコンをクリックすると太字に設定できます。

「B」の太字のアイコンをクリックすると太字に設定
 

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

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

イタリック「I」のアイコンをクリックするとイタリック
 

リンクを挿入・設定する

リストでリンクを挿入する場合は、まずは以下のリンクのアイコンをクリックします。

リストでリンクを挿入する
 

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

その他の設定

下矢印のアイコンをクリックすると、インラインコード、インライン画像、テキスト色、取り消し線などのそのほかの細かい設定ができます。

下矢印のアイコンをクリックすると細かい設定が可能
 

まとめ

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

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

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

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

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

 

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

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

詳細はこちら

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

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

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


 

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

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress