【ブロックエディタ】リスト(箇条書き)ブロックの使い方とテーマ毎のデザインの違い!

【ブロックエディタ】リスト(箇条書き)ブロックの使い方とテーマ毎のデザインの違い!

こんにちは!さとしん(@__satoshin)です。

記事の中で箇条書きは頻繁に使いますよね。

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

ブロックエディタでは箇条書きに使う「リストブロック」がWordPress本体の機能で用意されています。

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

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のリストブロック

【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(プラグイン)

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

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

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

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

よかったらシェアしてね!

この記事を書いた人

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

目次
閉じる