SWELLのキャプションボックスは、箇条書きに短いタイトルを付け、ひとまとまりに見せたいときに使える装飾です。使う場所に迷ったら、記事の導入にある「この記事で分かること」が候補になります。
僕は、SWELLのボックスに箇条書きを入れる使い方をよくしています。それっぽくまとまって装飾が付くので、おすすめの組み合わせです。
この記事では、実際のブログで使った例から、普通の箇条書きとの使い分けと、ボックスへの基本的な入れ方を紹介します。
キャプションボックスの実例｜導入で読む内容を伝える
SWELLでは、この枠を作る機能が「キャプション付きブロック」という名前で用意されています。
枠のタイトルと、その中に入れる文章やリストを編集できます。
ろうワークスの副業ブログの初期費用をまとめた記事では、目次の前に次のボックスを置いています。
枠のタイトルは「この記事でまとめた3点」。画像内には、次の項目を入れています。
- 約1年半で何にいくら使ったのか
- 最初から必要だったものと、後から追加したもの
- 今から始めるなら、何に払い、何を後回しにするか
ここで囲っているのは、これから読む内容の案内です。タイトルで何をまとめた枠かを示し、箇条書きで読む内容を伝えています。細かな金額や理由は、そのあとの本文で説明しています。
キャプションボックスと普通の箇条書きの使い分け
目安にするのは、短いタイトルを付けて、前後の説明から区切って見せたいかどうかです。
今回の実例のように、記事で扱う内容をまとめた部分は、キャプションボックスの候補になります。
ほかには「始める前に確認したいこと」のように、本文を読む前の条件をまとめる使い方も考えられます。
一方、本文中で「主な費用は次のとおりです」と書き、サーバー代やドメイン代を並べるだけなら、普通の箇条書きでも伝わります。
直前の文章で何の項目か分かるので、枠のタイトルを重ねなくてもよいからです。
使う場所を選ぶときは、先に箇条書きの中身を書いてみてください。
そのあとで、タイトルを付けて囲む意味があるかを考えると選びやすいと思います。
理由や補足が長くなる内容は、短い要点だけを枠に入れ、詳しい説明は本文へ分ける方法もあります。
箇条書きにした部分を全部囲む必要はありません。
キャプションボックスに箇条書きを入れる基本
ブロックエディターでは、「キャプション付きブロック」の中にリストを入れます。
SWELL公式の案内をもとに、基本の流れをまとめると次のとおりです。
- 「SWELLブロック」から「キャプション付きブロック」を追加する
- キャプションのタイトルを入力する
- 枠の内容欄に「リスト」ブロックを追加し、項目を入力する
- 必要に応じて、スタイルや色を選ぶ
スタイルや色の選び方を詳しく見たい場合は、上の公式ページの画像や動画も参考にできます。
作ったあとは、スマホ幅のプレビューでも見てみてください。
1項目が何行にも折り返すなら、文章を短くするか、補足を枠の外へ移すとよいと思います。
僕は基本1記事1回を目安にしている
僕は、この組み合わせを何度も連続して使うとワンパターンに感じます。
そのため、基本は1記事1回を目安にしています。
ただし、厳密な上限ではありません。
今回紹介した費用の記事にも、離れた章に別のボックスがあります。
回数だけで決めるより、前後に同じ装飾が続いていないか、そこを囲む意味があるかを見て選ぶとよいと思います。
まずは自分の記事の1か所で試してみる
SWELLのキャプションボックスと箇条書きは、要点をタイトル付きでまとめたいときに使いやすい組み合わせです。
まずは自分の記事から、導入や要点の箇条書きを1か所選んでみてください。
短いタイトルを付けて囲んだ状態と、普通のリストを比べ、前後の文章と一緒に見て合う方を選べばよいと思います。
ボックス以外も含めた使い心地を知りたい方は、SWELLを使って感じた良い点と迷う点も参考にしてみてください。
コメント