SWELL&ブロックエディタの箇条書きリスト・番号付きリスト(リストブロック)の使い方

こんにちは!おゆ会です。

今回は、WordPressテーマSWELLでブロックエディタを使った箇条書きリスト・番号付きリストの作り方を解説します。

リストは使用頻度が非常に高いので、要点を抑えていつでも使えるようになっておくと、記事を書くのが楽になります。

動画も用意しておいたので、必要でしたらご利用ください。

このような表現ができるようになります
  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3
  1. 番号付きリスト1
  2. 番号付きリスト2
    1. 番号付きリスト2-1
  3. 番号付きリスト3
おゆ会のアイコン画像おゆ会

実際に、SWELLで箇条書きリストを作ってみたところ、WordPressの標準機能では微妙に手が届かなかった装飾なども簡単にできるので、慣れるとスピーディーに記事が書けるようになりました。

目次

SWELL&ブロックエディタでリストブロックを作る

それでは、ブロックエディタでリストを作成してみましょう。

ブロックエディタでは、リストを作ることを「リストブロックを作る」と言います。

そしてそのやり方は3通り(+α)あります。

「ブロックの追加」ボタンでリストブロックを作る

画面の左上のツールバー、編集画面の空白ブロックの右端、SWELLの機能として作成済みのブロックの前後に表示される「〇に+のマーク(ブロックの追加)」をクリックして「ブロックの追加」から「リスト」を選択することで、「リストブロック」を作成します。

はじめにリストブロックを用意するこの方法は、文字を入力しながら作成する場合に使い方になります。

  • 「よく使うもの」の一覧にリストの項目がない場合は「一般ブロック」を開くと見つかります。
おゆ会のアイコン画像おゆ会

新たにブロックを追加する場合、基本的にはエンターキーを押して空白ブロックを作る必要があるのですが、SWELLの作成済みのブロックの前後に「ブロックの追加ボタン」を表示する機能は思いのほか便利です。

「スラッシュコマンド」でリストブロックを作る

編集画面の空白のブロックで「スラッシュコマンド」という機能を使って「/リスト」という文字を入力し、「リスト」を選択することで「リストブロック」を作成します。

単に「/」だけを入力するとよく使う機能が自動的にピックアップされるので、リストブロックをよく使っている場合は「/」のみで呼び出すこともできます。

おゆ会のアイコン画像おゆ会

個人的には、スラッシュコマンドは普段使わない機能を呼び出すときに使っています。

「ブロックタイプまたはスタイルを変更」で段落ブロックをリストブロックに変換する

「段落ブロック」として入力した文字を、ブロックツールバーの「¶(段落マーク)」にマウスカーソルを合わせたときに現れる「ブロックタイプまたはスタイルを変更」をクリックして「リストブロック」に変換する方法です。

こちらは、文章を編集中にふいに箇条書きにしたくなったときや、テキストエディタなどであらかじめ下書きしたものをコピーアンドペーストして入力する場合などでよく使います。

おゆ会のアイコン画像おゆ会

TeraPad(テキストエディタ)や、チャットワークのマイチャットに思いついたことなどを書き留めているので、コピペしてブロックを変換するこの方法はリストブロック以外でもよく使っています。

(おまけ)段落ブロックにリストタグ(ul liタグやol liタグ)で書かれたHTMLコードをコピペしてリストブロック化する

ブロックエディタとしての使い方というわけではありませんが、HTMLコードをコピペする方法も使えます。

別のソフトで作成されたページの文章や、HTMLコード化されている文章をそのまま採用する場合などで、限定的に使える方法です。

クラシックエディタから乗り換えを迷っている方にとっては、プラスになるかもしれません。

おゆ会のアイコン画像おゆ会

ブロックツールバーの一番右端にある「詳細設定」には「HTMLとして編集」の機能があります。めったにないことですが、どうしても細かい調整が必要なときはそこから手を入れます。

SWELL&ブロックエディタでデザインを選択して入力する

次に、作成したリストブロックに中身を入力したり、入力した文字を編集する方法をご案内していきます。

リストのデザインを選ぶ

リストブロックを追加したり入力された文字をリスト化すると、右側に表示されている「設定サイドバー」の「ブロックタブ」にリストに関する項目が表示されるようになります。

SWELLを採用している場合、ブロックタブ選択時に表示される「スタイル」をクリックすると、デザイン一覧をプレビューできるので、イメージに合うものを確認して選択します。

  • ブロックツールバーの一番左にある「¶(段落マーク)」にマウスカーソルを合わせたときに現れる「ブロックタイプまたはスタイルを変更」をクリックすることでも確認、選択可能です。(ただし、表示が小さめなのでサイドバーのほうが使いやすいと思います。)

WordPress標準のデフォルトと目次風デザインについては、箇条書きリストと番号付きリストの両方ともに対応していますが、残りのSWELLオリジナルのデザインの場合、【ul】とついているのは箇条書きリスト専用、【ol】とついているのは番号付きリスト専用になります。

おゆ会のアイコン画像おゆ会

今回は先にデザインを選んでから、箇条書きリストか番号付きリストのどちらにするかを選ぶ流れで解説していきますが、先に箇条書きリストか番号付きリストのどちらにするかを選ぶ手順でもできます。もちろん途中で変更することもできますから、最終的には自分がやりやすい方法でOKですよ。

よく使うデザインをデフォルト設定にする方法

ブロックタブ選択時に表示される「スタイル」の中にあるデザイン一覧の一番下に、「デフォルトスタイル」という項目があります。

ここに、よく使うデザインを一つ選んでデフォルトのスタイルとして設定することができます。

おゆ会のアイコン画像おゆ会

SWELLの「【ul】チェック」というデザインが個人的に使いやすいのでデフォルトに設定しています。

リストを横並びにする方法

デフォルト以外のリストデザインを選択した場合は、ブロックタブの中にある「リストの追加設定」の項目が選択できるようになるので、「横並び」を選択してください。

リストを横並びにした例
  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3
おゆ会のアイコン画像おゆ会

横並びにすると、ブロックツールバーで入れ子構造(階層化)にする操作が感覚的に分かりづらくなるので、横並び設定は最後にしています。

リスト項目ごとに下線を付ける方法

デフォルト以外のリストデザインを選択した場合は、ブロックタブの中にある「リストの追加設定」の項目が選択できるようになるので、「下線を付ける」を選択してください。

リストに下線を付けた例
  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3
おゆ会のアイコン画像おゆ会

必要なものをまとめたチェックリストなどを作るときに採用すると見やすくなりますね。

箇条書きリストか番号付きリストのどちらにするかを選ぶ

箇条書き(番号無し)リストにするか、番号付きリストにするかを変更する場合は、ブロックツールバーの左から2番目にある「箇条書きリストに変換」か、左から3番目にある「番号付きリストに変換」を選択します。

初期の状態(デフォルト)では、箇条書きリストが選択されているので必要に応じて変更します。

項目を入力する

リストブロック化された後は、箇条書きや番号付きリストにする項目を入力していきます。

エンターキーを押すと、箇条書きを追加(番号付きリストの場合は次の番号を追加)できるようになります。

項目内で改行を入れたい場合は、シフトキーを押しながらエンターキーを押すと項目内で改行できます。

コピペした単語や文をリスト化した場合について

基本的に、改行されている単語や文をリストブロックに変更・変換した場合は、改行ごとに箇条書きや番号付きリストの項目として扱われます。

修正したり調整したい場合は、エンターキーとシフトエンターを使い分けて対応します。

おゆ会のアイコン画像おゆ会

エンターとシフトエンターの使い分けは、ブロックエディタの基本操作になるので、他のブロック操作でもよく登場しますよ。

リストを入れ子構造にする(階層化)

リストの入れ子構造というのは、箇条書きリストや番号付きリストの中に別のリストを入れ込んだ状態のことを言います。

難しそうですが、ブロックエディタでは複数並んだ項目の中で入れ子にしたい項目に対して、「リスト項目をインデント」を選択するだけでOKです。

HTMLコードで実装する場合は記述が少し面倒なので、これはブロックエディタならではのメリットです。

操作を間違ってしまったり後で変更する場合など、入れ子にした項目を戻す場合は「リスト項目のインデントを戻す」を選択すると戻せます。

ブロックエディタの場合、表示を確認できるのでその点も楽ですね。

リスト内の文字を装飾する

文字の部分を選択した状態にしてから、ブロックツールバーから装飾を選択します。

WordPressの標準機能として、ブロックツールバーの上には

  • 太字
  • イタリック
  • リンク(例:おゆ会

のボタンが表示されていますので、必要に応じて選択します。

さらに「よりリッチなテキスト制御」というボタンを押すと、

  • 取り消し線
  • 文字色(色選択可能)

が設定できます。

SWELLの独自機能として「SWELL装飾」というボタンを押すと、

  • ソースコードディレクトリ表記
  • ソースコードファイル表記
  • 背景色(色選択可能)
  • マーカー線(4色から選択可能)
  • フォントサイズ(標準設定に対してXS S L XLの4段階で変更可能)
  • 注釈(文章内の一部に注釈を加えたい場合に使えるデザイン)

についても設定が可能になります。

おゆ会のアイコン画像おゆ会

背景色、マーカー線の設定も便利な機能ですが、フォントサイズの変更についてもブロックエディタの簡単な操作で対応できるのは便利ですね。SWELL以外の非対応テーマだとこういう細かいところで、クラシックエディタでいいやってなっていましたからね。

SWELLで表現できる箇条書きリストと番号付きリストのデザイン一覧

最後に、SWELLで、どのようなデザインのものが作れるのかまとめておきます。

SWELLの箇条書きリスト

「デフォルト」「目次風」「チェック」「Good」「Bad」「注釈」の6種類のデザインに対応しています。

デフォルトの箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

WordPressの標準的な箇条書きリストです。

目次風の箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

入れ子(箇条書きリストの中に箇条書きリストがある状態)にしたときに、関連性が分かりやすいデザインです。

チェックの箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

要点をまとめるときや、必要なものをリストアップするときに便利なデザインです。

Goodの箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

正解や肯定的なことを表現するときに使える〇印が付いたリストです。

Badの箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

間違いや、NG、否定的なことを表現するときに使える×印が付いたリストです。

注釈の箇条書きリスト

  • 箇条書きリスト1
  • 箇条書きリスト2
    • 箇条書きリスト2-1
  • 箇条書きリスト3

注釈、補足などを記述するときに使いやすいリストです。

SWELLでできる番号付きリストのデザインを確認

番号付きリストは、「デフォルト」「目次風」「丸数字」の3種類のデザインに対応しています。

デフォルトの番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
    1. 番号付きリスト2-1
  3. 番号付きリスト3

WordPressの標準的な箇条書きリストです。入れ子にすると、改めて番号が振られていきます。

目次風の番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
    1. 番号付きリスト2-1
      1. 番号付きリスト2-1-1(3段階目まで対応)
        1. 番号付きリスト2-1-1-1(4段階目以降は対応なし)
  3. 番号付きリスト3

入れ子にしたときに、2-1などと番号が振られるため関連性が分かりやすいです。2-1-1のように3段階まで対応しています。

丸数字の番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
    1. 番号付きリスト2-1(2段階目は専用デザインあり)
      1. 番号付きリスト2-1-1(3段階目以降も2段階目と同じ)
  3. 番号付きリスト3

入れ子にしたときに、デザインが変わるため関連性が分かりやすいデザインです。2段階の入れ子表記まで対応しています。(3段階目以降は2段階目と同じ)

リストのデザインに使われている色を変更する

リストに使われているデザインカラーは、投稿画面ではなくWordPress自体のサイドバーにある「SWELL設定」の中の「エディター設定」から「カラー設定」タブの中にある「リスト設定」を設定することで変更可能です。

チェックマークや番号付きリストに使われている色は、デフォルトではメインカラー※が採用されていますが、これを変更することができます。
※「メインカラー」はWordPressのサイドバーにある「外観」>「カスタマイズ」から「サイト全体設定」>「基本カラー」から設定可能です。

マル、バツの箇条書きリストのデザインに使われている文字の色も変更可能です。

まとめ

SWELLを導入したブロックエディタで、箇条書きリスト・番号付きリスト(リストブロック)の使い方をご案内してきました。

SWELLがブロックエディタの使いやすさとWordPress標準では手が届かなかったところもケアしてくれているので、本当に使いやすいんですよね。

手順を細かく追うとめんどくさそうですが、実際の操作は非常にシンプルです。

ブロックエディタに慣れてしまえば、学習にかかる時間や誰かに代わりにやってもらうためのお金といったコストが大きく節約できますから、ぜひご検討ください。

この記事が少しでもそのお役に立てていたら嬉しいです。

おゆ会のアイコン画像おゆ会

最後までご覧頂きありがとうございました。

この記事を書いた人

ホームページ制作を中心にWEB関連のお仕事をしています。

ホームページ制作では、企画やライティングといった土台の部分から相談して、そのためのページ構成やコンテンツを作成していきます。

また、外部のオンラインサロン立ち上げ運用も経験しています。

いずれもご予算に合わせた対応が可能ですので、ぜひ一度ご相談ください。

無料のご相談をTwitter上で受け付けていますので、よろしくお願いします。

【今のおすすめ】
集客と情報発信のブログをはじめるならWordPress+SWELL(テーマ)がおすすめです。詳しくはこちら → SWELL

目次
閉じる