MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

ブロックエディターのリストブロックの使い方!箇条書きで見やすい記事を書こう!

WordPressのブロックエディターに標準で用意されている「リストブロック」の使い方をご紹介します。

リストブロックを使うと、簡単に箇条書きの一覧を作ることができます。

記事の見やすさの面でもSEOの面でも、箇条書きを使って項目を整理することはとても大切です。

使い方もとても簡単なのでぜひ覚えておきましょう。

ブログに箇条書きは必須!必ず覚えよう…!
この記事の内容まとめ
  • リストブロックの基本的な使い方
  • リストブロックと他ブロックを組み合わせるスタイルの作り方
  • テーマやプラグインによるリストデザインや機能の違い

また、WordPressのテーマやプラグイン側で、リストブロックの機能を拡張してさらに使いやすくしていることもあります。

この記事では、基本的なリストブロックの使い方、テーマ、プラグインによる機能やデザインの違いも画像付きで紹介しています。

さとしん

テーマ選びの1つの基準にもなるかと思うので、ぜひ見てみてください…!

ブロックエディターの基本的な使い方は以下の記事にまとめています。

目次

リストブロックの使い方!

まず、リストブロックは以下の2種類から選択することができます。

  • 箇条書きリスト(ul)
  • 順序付きリスト(ol)

ulは通常の箇条書き、olは番号付きの箇条書きに使います。

上記の2種類をふまえて、早速ブロックエディターでのリストブロックの使い方を解説していきます。

STEP
メインコンテンツエリアで「+」ボタンをクリック
リストブロックの使い方
STEP
リストを探してクリック
リストブロックの使い方-2

これでリストブロックが挿入されました。

STEP
ブロックツールバーからul,olの変更
リストブロックの使い方-3

内容に合わせて、箇条書き、順序付きを選択しましょう。

  • ulとolは後からでも変更可能
  • 初期状態ではul(番号無し)の状態になっている
STEP
好きな文字を入力する

Enterを押すと、下に行が追加されていきます。

これで、基本的なリストブロックの使い方は以上です。

リストの階層の設定とリスト内の色の設定方法

リストブロックは階層を持たせることもできます。

項目を追加した後にブロックツールバーから「リスト項目をインデント」をクリックすると、1つ階層が深くなります。

リストブロックの使い方-4

また、サイドバーの「色設定」からリスト内の文字色や背景を変更することもできます。

リストブロックの使い方-5
さとしん

必要に応じて活用しましょう…!

リストブロックを簡単に呼び出して執筆スピードを早くする方法

上述した方法では、「+」ボタンからリストブロックを探しましたが、毎回この作業をしてブロックを探すのは少し手間がかかります。

ですが、以下の2通りの方法を使うと簡単にリストブロックを呼び出すことができます。

  • 「/list」or「/リスト」と入力
  • 段落ブロックからリストブロックへ変換

「/list」or「/リスト」と入力して呼び出す

ブロックエディターでは、本文を入力するエリア(コンテンツエリア)でブロックを追加する際に「/ + ブロック名」で検索することができます。

リストブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /list
  • /リスト
さとしん

知っているととても便利ですよ…!

段落ブロックからリストブロックへ変換する

通常の段落ブロックで入力した内容を選択して、リストブロックに変換することもできます。

STEP
段落ブロックで文字を入力
リストブロックの使い方-6
STEP
リストにしたい段落を全て選択
リストブロックの使い方-7
STEP
ブロックツールバーの「変換」タブから「リスト」を選択
リストブロックの使い方-8
STEP
段落ブロックがリストブロックに変換される
リストブロックの使い方-9

こんな方法でリストブロックを呼び出すこともできます、

ぜひ参考にしてください。

リストブロックの機能を拡張するテーマやプラグインの紹介

WordPress本体側で用意されているリストブロックですが、WordPressテーマや関連プラグインを使うことによって、機能やデザインが大きく変わります。

今回は、100%GPLの3つのWordPressテーマやプラグインのリストブロック機能をご紹介します。

  • SWELL(テーマ)
  • Snow Monkey Editor(プラグイン)
  • VK Blocks(プラグイン)
さとしん

テーマ選びで悩んでいる方の参考になれば嬉しいです…!

SWELLのリストブロックは独自の装飾と機能が充実!

WordPressテーマ『SWELL』
SWELL』公式サイト

ブロックエディター完全対応のWordPressテーマ『SWELL』では、追加のプラグインなど不要で、テーマを適用するだけで、ブロックの機能が拡張されます。

SWELLの「リストブロック」では、スタイルが追加されたり、いろいろな設定項目が追加されます。

SWELLのリストブロックでは以下の様なスタイルが選択できるようになります。

SWELLのリストブロック

【ul】チェックと【ol】丸数字のアイコンカラーは設定したサイトのメインカラーと連動するようになっています。

さとしん

僕はチェックマークのスタイルが好きで多用しています…!

また、以下の様な装飾もできるようになっています。

SWELLのリストブロック-2

どの操作もサイドバーからワンクリックでスタイルを変更できます。

Snow Monkey Editorのリストブロックもシンプルデザインで使いやすい!

WordPressテーマ『Snow Monkey』
Snow Monkey』公式サイト

WordPressテーマ『Snow Monkey』の関連プラグイン『Snow Monkey Editor』もリストブロックの機能を拡張してくれます。

『Snow Monkey Editor』は無料でインストールできて、Snow Monkey以外のテーマでも使用可能です。

『Snow Monkey Editor』では、以下のように選択できるスタイルが拡張されます。

Snow Monkey Editorのリストブロック

普通のブログやコーポレートサイトなどで使う上では十分なスタイル、デザインが用意されています。

さとしん

矢印のアイコンも良いですよね…!

VK Blocksのリストブロックはリストのデザインが豊富!

WordPressテーマ『Lightning』
Lightning』公式サイト

VK Blocks』は株式会社ベクトルさんが開発された無料プラグインです。

ベクトルさんはWordPress公式ディレクトリに登録されている無料テーマ『Lightning』や、上位版である『Lightning Pro』、『Katawara』という有料のWordPressテーマを開発されています。

有料テーマのライセンスを購入すると上位版の『VK Blocks Pro』というプラグインを使用できるようになります。

『VK Blocks』ではリストブロックのスタイルが以下のように拡張されます。

VL Blocksのリストブロック
VL Blocksのリストブロック-2

とてもバリエーションが豊富です。また、リストのアイコンカラーはサイドバーから自由に設定できます。

VL Blocksのリストブロック-3

例えば、重要な箇条書きと補足の様な箇条書きでアイコンの色を分けるといった使い方もできそうです。

さとしん

種類が豊富で顔アイコンなどオリジナリティがありますね…!

リストブロックの良く見る使い方【枠と組み合わせる】

ここまでリストブロックの使い方や、テーマ、プラグインによるデザインや機能の違いをご紹介してきました。

最後に、多くのサイトで良く見かけるリストブロックと他ブロックを組み合わせた使い方をご紹介します。

以下のように装飾された箇条書きリストを作ってみましょう。

  • リストブロックを作成する
  • SWELLのボックス装飾機能で囲む!

今回は一例としてWordPressテーマ『SWELL』の機能を使ってみます。

STEP
リストブロックで箇条書きリストを作成
【応用】リストブロックの使い方
STEP
リストを選択してブロックツールバー「詳細設定」から「グループ化」を選択
【応用】リストブロックの使い方-2
STEP
グループブロックを選択してサイドバーからお好みのボックス装飾をクリック
【応用】リストブロックの使い方-3

これだけの簡単な方法で、リストブロックのデザイン性を更に高めることができます。

ブロックエディターはこのように複数のブロックを組み合わせることができるので、いろいろな組み合わせを試してみてください。

お好みのリストブロックを適切に使いこなしましょう!

記事の中で適切に箇条書きを入れてあげることは、読者のためにもSEOの観点でも大切です。

箇条書きするためにリストブロックは必須になりますので、ぜひ使い方をマスターして記事作成に活かしてください。

また、テーマやプラグインを使うことでリストブロックのデザインや機能を拡張することができます。

今回は以下の3つのテーマとプラグインをご紹介しました。

  • SWELL(テーマ)
  • Snow Monkey Editor(プラグイン)
  • VK Blocks(プラグイン)

ブロックの細かい機能ひとつひとつもテーマ選びの判断材料になると思っています。

みなさんが、お好みのデザインを見つけて、リストブロックを適切に活用されることを願っています。

ブロックエディターで楽しくコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました。


ブロックエディターの使い方はこちら↓↓

ブロックエディターで使えるショートカットキーはこちら↓↓

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

よかったらシェアしてね!
目次
閉じる