SWELLリストブロックの使い方｜8種類のデザイン装飾と枠線で囲む方法まとめ

「文章を箇条書きや番号付きでまとめたい…」

「リストの色やアイコンの設定方法は？」

「リストを囲むにはどうすればいいの？」

この記事では、そんな方に向けて、SWELLでリストブロックの使い方を解説します。

リストブロックとは…箇条書きにした文章をリスト化してまとめることができるWordPress標準ブロック

この記事を読めば、あなたも簡単に

• リストブロックの使い方や設定方法が分かる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインのリストで情報を整理し、読みやすい記事を作成できるようになりました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELLリストブロックでできること4選

リストブロックはWordPress標準ブロックですが、SWELLではその機能が拡張しています。

SWELLで機能拡張したリストブロックでは以下のようなことができます。

それぞれ詳しく解説します。

おしゃれなデザイン装飾ができる

SWELLのリストブロックは「スタイル」「色」を選べ、以下のようにおしゃれなデザイン装飾を8種類も作成できます。

利用頻度の高そうなチェックマークのリストが利用できるのは嬉しいですよね。

リストの色はカラーピッカーで直感的に選んだり、使いたい色のカラーコードを入力することで好きな色を設定することもできますよ。（後ほど詳しく解説します）

番号付きリストに変換できる

SWELLのリストブロックは、先ほどの順序なしリストを番号付きリストに変換することもできます。

リストを番号化することで、そのリスト項目が何個あって、今が何番目にいるのかを把握できるので非常に便利です。

さらに、この番号を「数字」以外の英文字やローマ数字にスタイルを変えたり、始めの番号を「1」以外の数字にすることもでき、いろんな使い方ができます。

リスト項目に下線を引くことができる

SWELLのリスト項目に下線を引くことができます。

PC・スマホ表示画面に収めるようにリスト間の空白を狭めた「下線を付けない」を選んでもいいし、

文章間が窮屈にならないようにリスト間の空白を広げた「下線を付ける」を選んだり、好きに設定できるよ。

リスト項目を横並びにできる

SWELLのリスト項目を横並びにすることができます。

左から右に視線が流れる人間の動きに合わせて、リストを横並びに設定してもいいですね。

SWELLリストブロックの使い方とカスタム設定6つ

SWELLのリストブロックの使い方は公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：リストで使えるデザイン装飾一覧

ちなみに、リストブロックは以下3つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

リストブロックで設定可能な項目は6つあります。

それぞれ詳しく解説します。

8種類からスタイルを選ぶ

SWELLではリストブロックのスタイルを以下の8種類から選べます。

リストのアイコンが変わるだけではなく、アイコンの色も一緒に変わります。

しかも、使いどころが多そうなアイコンばかりなので、一層いいですね。

使い方次第では、「マル」と「バツ」のリストスタイルを利用して、以下のようなメリット・デメリットの表を作成することもできますよ。

※リッチカラムブロックとキャプションボックスブロックを組み合わせて作成

下線を付けるか決める

リスト項目に下線を付けることができます。

下線を付けたほうがリスト項目間の余白が大きくなるので、読みやすさが向上します。

もしリストに挿入したテキストにリンクを設定した場合、余白が小さいことによる誤クリックを防ぐこともできるでしょう。

※リンクはURL未設定なのでクリックしてもリンク先ページへ飛びません。

横並びにするか決める

リスト項目の並びを以下の2パターンから選べます。

基本的に縦並びでの使用をおすすめしますが、横並びで使う場合は挿入するテキストを短めにしましょう。

テキストが長ければ、自動で縦並びになってしまいますよ。

順序付きリストに変換する

SWELLのリストブロックは順序なしリストがデフォルトですが、数字やローマ字といった順序付きリストに変換することができます。

設定方法は親のリストブロックを選択し、ツールバーにある「順序付きリスト」項目をクリックします。

また、順序付きリストに変換すると、右サイドバーでリストのスタイルや初期値、順序を逆にするかどうかも設定できるようになります。

順序付きリストのスタイルは以下の5種類あります。

さらに順序なしリストのスタイルも一部変化しますよ。

順序付きリストの初期値を「1」以外にしたり、順序を大きい順に並べることもできます。

リストの色を指定する

SWELLのリストブロックでは、以下5つのスタイルの色を変更することができます。

リストの色を変更する方法は以下のとおりです。(4ステップあります)

色を選択する方法は、カラーピッカーで好きな色にピンポイントで合わすのは難しいので、カラーコードの入力がおすすめです。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーコードが分からない…カラーコードの調べ方が分からない…という人はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられますよ。

_{＼クリックで開く／}

インデントをずらす

ツールバーの項目「インデント」でリスト項目の開始位置をずらすことができます。

インデントとは…文章の開始位置を左右にずらすこと

インデントはリスト項目が2つ以上、かつ2つ目以降のリスト項目でなければ設定できません。

親リストと子リストでアイコンが異なるので、視覚的に見ても分かりやすいですね。

SWELLリストを枠線で囲む方法4つ

SWELLのリストブロック自体のカスタマイズでは枠線を囲むことはできません。

しかし、少し工夫したり、似たような機能のブロックを使うことで、リストを枠線で囲むことができます。

以下の4つの方法を用いて、リストを枠線で囲んでいきます。

それぞれ詳しく解説します。

リストをグループ化してボックス装飾を使う

SWELLのグループ化機能を使うことで、以下のようにリストを枠線で囲むことができます。

設定方法は以下のとおりです。

リスト入りグループブロックを使う

SWELLのリスト入りグループブロックを使えば、以下のように様々な形をした枠線でリストを囲むことができます。

リストブロックとグループブロックがあらかじめ組み合わされたブロックで、スタイルは全16種類もありますよ。

設定方法は以下のとおりです。

キャプションボックスブロックを使う

SWELLのオリジナル機能であるキャプションボックスブロックを使えば、枠線で囲まれたリストを作成することができます。

これまで紹介した2つの方法と違って、リストにタイトルを付けることができますよ。

設定方法は以下のとおりです。

キャプションボックスブロックの使い方を詳しく知りたい方は、下の記事を参考にしてください。

ブロックパターンから呼び出す

枠線で囲まれたリストが、SWELLのブロックパターンに3つ登録されています。

呼び出す方法は、+⇒パターン⇒[SWELL]汎用パターンの順にクリックして表示される以下のコンテンツをクリックします。

これで枠線で囲まれたリストを呼び出せます。

SWELLリストブロックまとめ

今回は、SWELLでリストブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。