SWELLのキャプションボックス｜使い方から活用法まで徹底解説！

標準的なテキストだけでは単調になりがちな文章も、SWELLキャプションボックスを効果的に使えば、読者の注目を集めやすいコンテンツに変えられます。

この記事では、SWELLキャプションボックスブロックの基本的な使い方から各種設定、実践的な活用例まで、初心者でも分かりやすく解説します。

記事を読みながら実践すれば、あなたもキャプションボックスを使いこなして、読者にとって分かりやすいサイトデザインが作れるようになりますよ。

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

SWELLキャプションボックスとは

SWELLキャプションボックスは、導入文や情報をまとめる場合に便利に使えるブロックです。

基本機能からデザインの豊富さまで、その魅力を解説していきます。

キャプションボックスの基本機能

キャプションボックスは、コンテンツにタイトルを付けて囲み枠で装飾する機能です。

通常のテキストよりも読者の注意を引きつけることができます。

例えば、料理のレシピや手順説明などで「作り方のポイント」として使うと効果的です。

ブロックエディター内で簡単に呼び出せるため、初心者でもすぐに使いこなせます。

7種類のデザインパターン

SWELLでは7つのスタイルから好みに合わせて選択可能です。

具体的には「デフォルト」「小」「枠上」「枠上2」「枠内」「浮き出し」「内テキスト」の各パターンが用意されています。

4色のカラーバリエーション

カラーは、SWELL設定で登録した3色のカラーセットに加えて、サイトのメインカラーを合わせた４色から選択できます。

カラーは事前にエディター設定でお好みの色を登録しておきましょう。

SWELLキャプションボックスの使い方

キャプションボックスの使い方を紹介します。

流れは次のとおりです。

順番に見ていきましょう。

カラーセットを登録する

まずはWordPress管理画面から「SWELL設定」⇒「エディター設定」の順にクリックしてください。

「カラーセット」タブを選択し、下にスクロールして「キャプションブロック設定」を表示させます。

ここでカラーセット01〜03の3色をお好みの色に変更しましょう。

設定完了後は「変更を保存」ボタンを忘れずにクリックしてください。

キャプションボックスを挿入する

カラーセットの登録が完了したら、記事編集画面にキャプションボックスを挿入しましょう。

記事編集画面で「+」ボタンをクリックし、ブロック選択画面を開きます。

SWELLブロック一覧から「キャプションボックス」を選択してください。

タイトルとコンテンツを入力する

キャプションボックス上部にタイトルを入力します。

下部のコンテンツエリアには、通常のブロックエディターと同様にテキストや画像、リストなどを自由に配置できます。

たとえば、コンテンツエリアに画像を挿入してみましょう。

キャプションボックスのコンテンツ内でクリックすると、キャプションボックスの右側に「+」ボタンが表示されます。

「+」ボタンをクリックして、画像ブロックを挿入していきましょう。

すると、以下のようなキャプションボックスが完成します。

そのほか、リストを挿入したり、

リッチカラムを挿入して画像を3枚並べることも可能です。

スタイルを選択する

キャプションボックスの中にタイトル・コンテンツを入れたら、次はスタイルを決めましょう。

サイドバーが表示されていない場合は、キャプションボックスを選択した状態で、右上の設定ボタンをクリックしてください。

サイドバーが表示されたら「スタイル」パネルからお好みのスタイルを選択します。

スタイルはデフォルト、小、枠上、枠上2、枠内、浮き出し、内テキストの7種類から選択できます。

それぞれのスタイルがどんなデザインかは「7種類のデザインパターン」で確認してください。

カラーを選択する

キャプションボックスのスタイルを決めたら、サイドバーの「カラー設定」でカラーを決めましょう。

カラーは「カラーセットを登録する」で登録した3色とサイトのメインカラーを含む計4色から選択できます。

キャプションボックスを挿入するとメインカラーになっているので、カラーを変更したい場合は「カラー設定」から選んでください。

カラーを選んだ時の様子は「4色のカラーバリエーション」で確認してください。

アイコンを設定する

「アイコン設定」でタイトル部分にアイコンを追加できます。

まず「アイコンの位置」で左右どちらに配置するかを決定してください。

「アイコン選択」をクリックしてください。

すると以下のようなアイコン選択画面が出てくるので、アイコンを選びましょう。

アイコンは、サイズも変更できます。デフォルトの1.1から数値を変更してお好みの大きさに変更してください。

SWELLキャプションボックスの活用例

キャプションボックスはいろんな場面で使える優秀なブロックです。

情報を整理して伝える実践的な3つの活用方法をご紹介します。

リード文の中で使う

記事冒頭のリード文の中でキャプションボックスを使う例です。

タイトル部分に「この記事で分かること」や「この記事の内容」を入力してください。

コンテンツ部分には記事の要点を箇条書きで入力しましょう。

例えば本記事ならば、「この記事で分かること」をタイトルにし、「キャプションブロックでできること」「キャプションブロックの使い方」「キャプションブロックの活用例」をリスト化します。

リストブロックについては、SWELLリストブロックの使い方｜7つのカスタム設定と囲む装飾テクニックで詳しく解説しています。

見出しの中の目次として使う

リスト化したテキストにリンクを設定してキャプションボックスの中に挿入すると、見出し内の目次として活用できます。

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

メリット・デメリット表として使う

商品レビューや比較記事で、メリット・デメリットを2つのキャプションボックスで横並びに配置すると視覚的に分かりやすくなります。

以下の手順で作成してください。

SWELLキャプションボックスでよくある質問

SWELLキャプションボックスに関する、よくある質問と回答をまとめました。

まとめ｜SWELLキャプションボックスでサイトデザインを向上させよう

今回は、SWELLキャプションボックスの使い方から活用例まで解説しました。

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

SWELLキャプションボックスを活用すれば、単調なテキストが視覚的に魅力的なコンテンツに変わり、読者の理解度と滞在時間が大幅に向上します。

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

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

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

あなたも、直感的に操作できるSWELLにしませんか？

今回は以上です。

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