SWELLリストブロックの使い方｜7つのカスタム設定と囲む装飾テクニック

SWELLリストブロックなら、8種類のデザイン装飾と豊富なカスタマイズ機能で、豊富な種類のリストを簡単に作成できます。

この記事では、4つの作成手順から7つの詳細カスタマイズ、グループ化やキャプションボックスとの組み合わせなど実践的な活用法まで、画像付きで徹底解説します。

限られた時間で質の高い記事を効率的に作成したいあなたにとって、必ず役立つテクニックとなりますよ。

それでは始めてまいりましょう。

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。

SWELLリストブロックとは

SWELLのリストブロックは、WordPressの標準機能を大幅に使いやすくカスタマイズされたリスト機能です。

8種類のデザインが、あなたのブログ記事を読みやすくしてくれます。

WordPressのリスト機能を拡張したブロック

SWELLのリストブロックは、WordPress標準のリスト機能に独自カスタマイズを加えた優れた機能です。

通常のWordPressでは単調な箇条書きしか作れませんが、SWELLなら見た目の美しさと機能性を両立できます。

例えば、リスト項目に下線を付けたり、横並びレイアウトにしたりすると、表現の幅が格段に広がります。

このパワーアップした機能により、読者の目を引く魅力的なリストを簡単に作成できます。

8種類のデザイン装飾が利用可能

SWELLでは8種類のリストアイコンから選択できます。

デフォルト、目次風、チェック、マル、三角、バツ、丸数字、注釈といったアイコンが用意されています。

さらには、アイコンではなく番号や英字、ローマ数字付きのリストも用意されています。

SWELLのリストブロックを活用することで、単調になりがちな文章に視覚的なアクセントが加わり読みやすい記事となります。

SWELLでリストを作成する手順

SWELLでリストを作成する方法は4つあります。

それぞれの作成手順を順番に紹介しましょう。

テキストにリスト装飾する場合の手順

作成済みの文章にリスト装飾を適用する方法です。

手順は次の通りです。

テキストが段落で分かれている場合と、1つの段落に複数のテキストがある場合でみていきましょう。

リストブロックを使う場合の手順

はじめにリストブロックを挿入し、テキストを追加して作成する場合の手順です。

ショートカットキーを使えば素早くリストを作成できます。

リスト入りグループブロックを使う場合の手順

リストとグループ化機能を組み合わせたブロックです。

後ほど「リストをグループ化してボックス装飾を適用する」で解説しますが、リストを枠線で囲むためにはリストをグループ化する必要があります。

しかしこのリスト入りグループブロックを使えば、グループ化することなく枠線で囲まれたリストを簡単に作成できます。

汎用パターンを使う場合の手順

SWELLが用意した既成のリストパターンを活用する方法です。

SWELLリストブロックの7つのカスタマイズ

SWELLリストブロックなら細かい設定まで自由自在にカスタマイズできます。

デザインや色設定を使って、読者が読みやすい記事に仕上げましょう。

8種類のデザインからスタイルを決める

リストのアイコンを8種類から選ぶことができます。

サイドバーの「スタイル」で選択できます。

例えば、チェックマークは完了項目、バツ印は注意事項、丸数字は手順説明などに使えそうですね。

番号付きリストに設定する

アイコン付きリストを番号付きリストに変更することもできます。

こちらは、ブロックツールバーの「順序付きリスト」をクリックするだけです。

デフォルト、目次風、注釈のスタイルで、アイコン付きリストから番号付きリストへ変更できます。

また、サイドバーにある「設定」の「リストのスタイル」を変更してみてください。

数字から、大文字、小文字、ローマ数字大文字、ローマ数字小文字へと変更できます。

さらには、サイドバーの「初期値」「順序を逆にする」を使えば、開始番号を「1」以外に設定したり、逆順表示にもできます。

ちなみに、以上の設定をする場合にはリストブロック全体を選択する必要があります。

リストブロック全体を選択する方法はこちらで確認してください。

下線付きスタイルに設定する

サイドバーにある「リストの追加スタイル」の「下線を付ける」を選択すると、リストを下線付きスタイルに変更できます。

下線を追加するとリストの間隔が広がるので、読みやすくなりますね。

横並びレイアウトに設定する

サイドバーにある「リストの追加スタイル」の「横並び」を選択すると、リストを横並びスタイルに変更できます。

横並びスタイルはあまり使うことはないと思いますが、使う場合はテキストを短くするようにしてください。

リストテキスト・背景の色を設定する

サイドバーからテキストや背景色を変更することができます。

手順は以下のとおりです。

インデントを設定する

インデントを設定すると、２つ目以降のリストの開始位置が下がり、子リストを作成することができます。

スタイルごとの子リストのスタイルは、以下のようになります。

リストアイコンの色を設定する

リストの先頭にあるアイコンの色を事前に登録しておくことができます。

手順は以下のとおりです。

SWELLリストブロックの活用例

単体でも美しいSWELLのリストブロックですが、他の機能と組み合わせることでさらに表現力がアップします。

実践的な活用方法を4つご紹介しましょう。

リストをグループ化してボックス装飾を適用する

リストブロック単体では枠線設定ができませんが、グループ化すると豊富な装飾オプションが利用可能になります。

手順は以下のとおりです。

ボーダー設定で選べる４つの枠線スタイルは以下のとおり。

スタイル設定で選べる１６種類のスタイルは以下のとおりです。

キャプションボックスと組み合わせる

次はSWELLのオリジナル機能であるキャプションボックスブロックと組み合わせる方法です。

キャプションボックスと組み合わせると、以下のようなタイトル付きの枠線リストが作成できます。

手順を解説します。

リッチカラム、キャプションボックスと組み合わせる

「リスト」ブロックに「リッチカラム」ブロックと「キャプションボックス」ブロックを組み合わせれば、以下のようなメリット・デメリットの表を作成することができます。

メリット・デメリットの表の作成手順は以下のとおりです。

リンクを適用して目次を作成する

リスト項目にリンクを設定して、キャプションボックスと組み合わせると見出し内の目次として活用できます。

以下のような目次を用意すれば、読者は興味のある部分へ素早く移動できるようになります。

^{※リンクは未設定なので、クリックしてもジャンプしません。}

SWELLリストブロックで読みやすい記事を作成しよう

今回は、SWELLリストブロックの使い方から7つのカスタマイズ、活用法まで完全解説しました。

本記事の内容は以下のとおりです。

SWELLリストブロックを活用すれば、単調な箇条書きが見やすいリストに変わり、読者の理解度が大幅に向上します。

副業ブロガーにとって、限られた時間で質の高い記事を効率的に作成する強力な味方になること間違いなしです。

ぜひ今回紹介した方法を参考に、読者に優しい記事作成に取り組んでみてください。

本ブログではWindowsテーマにSWELLを使用しています。

あなたも、リストの種類が豊富なSWELLにしませんか？

今回は以上です。

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