SWELL キャプションボックスの使い方を6つのステップで紹介

「SWELLを使い始めたばかりだけど、キャプションボックスってどう使うの？」

「重要な箇所を一目で伝えたいけど、何かいい機能はないかなぁ」

そう悩んでいる方はいませんか？

実はキャプションボックスは、重要な情報を視覚的に強調できるSWELL専用のブロックです。

本記事では、実際にSWELLを愛用している私がキャプションボックスの基本的な使い方を、画像付きで詳しく解説します。

さらに導入文や結論部分での効果的な活用法、自己紹介や商品紹介といったデザイン案も紹介していきます。

そもそもSWELLってどんな有料テーマなの？こちらにSWELLの特徴がわかりやすく書かれています SWELLの特徴を見てみる

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

SWELLのキャプションボックスは、読者の注目を集めたい情報を目立たせるためのブロックです。

こちらがデフォルトのキャプションボックスになります。

タイトル付きのボックスで内容を囲むことで、重要なポイントや補足情報を視覚的に強調できます。

デザインやカラーを自由に変更できるため、記事の雰囲気に合わせた表現が可能です。

では、次でキャプションボックスの特徴を詳しく見ていきましょう。

キャプションボックスは6つのデザインがある

キャプションボックスには6種類のスタイルが用意されております。

記事の雰囲気や強調したい度合いに応じて、適切なスタイルを選択しましょう。

ちなみに私はこれらのスタイルについて、伝えたい内容に分類分けして使用しています。

カラーは3色設定できる

キャプションボックスでは、3色カラーを設定できるようになっています。

こちらが私が設定している、3つのカラーによるキャプションボックスです。

このように常時使うカラーを3つ設定でき、違う色に変更したくなったらいつでも変更可能です。

カラーの設定から、そのほかキャプションボックスについての使い方や設定方法を、次の章から説明します。

キャプションボックスの使い方【6つのステップ】

キャプションボックスの設定は6つのステップで完了します。

初めての方でも数分で使いこなせるよう、各手順を画像付きで解説していきますね。

それでは、実際の使い方を順番に見ていきましょう。

ボックスからキャプションボックスを追加する

まずはWordPressで投稿ページを開き、ブロックを追加しましょう。

「+」をクリックすると、使用できるブロックが表示されます。

こちらをクリックすると、デフォルトのキャプションボックスが表示されました。

こちらを使って、次も使い方を説明していきます。

タイトルを入力する

キャプションボックスを追加したら、まずタイトル部分にテキストを入力します。

タイトルは読者が一目で内容を把握できるよう、簡潔で分かりやすい言葉を選びましょう。

コンテンツを入力する

タイトルの下にある本文エリアに、伝えたい内容を記述していきます。

また、コンテンツ内ではブロックを追加できるので、画像やリストを挿入することも可能です。

コンテンツ内は伝えたい情報はたくさん書くのではなく、リストを使用して箇条書きに簡潔にすることで、読者に伝わりやすくなります。

スタイルを設定する

キャプションボックスのスタイルは、右側のサイドバーから変更できます。

ここから先ほど紹介したスタイルを選択することが可能です。

記事全体のトーンに合わせて、統一感のあるスタイルを選択してみましょう。

カラーを設定する

スタイルの下にあるカラー設定で、ボックスの色を変更できます。

こちらから、自身が設定したカラーを選ぶことで、キャプションボックスの色を変更することが可能です。

設定カラーを変更したくなったら、この下の「SWELL設定」から変更することが可能です。

こちらは管理画面からでも設定することができます。

このエディター設定を選択し、カラーセットのタブを選択してスクロールすると、キャプションブロック設定が出てきます。

情報の重要度や種類によって色を使い分けることで、読者が視覚的に内容を整理しやすくなるでしょう。

アイコンを設定する

アイコンを追加すると、キャプションボックスのデザイン性がさらに高まります。

アイコンの位置で左か右に設定ができ、アイコンサイズで大きさを変えることができます。

そして「アイコン選択」をクリックすると、豊富にアイコンの種類が表示されます。

試しにこの中から電球マークを選んでみましょう。

アイコンはタイトルの内容と関連性のあるものを選ぶよいでしょう。

こちらにSWELLを活用して作成したデモサイトが多数存在していますよ！気になる方はぜひチェックしてみてくださいね！ SWELLのデモサイトを見てみる

キャプションボックスの活用3選

キャプションボックスは設置場所によって、読者への影響が大きく変わります。

効果的な使い方を知ることで、記事の伝わりやすさが格段に向上するでしょう。

私は以下のシーンで使用しています。

これらの活用シーンについて、次でもう少し詳しく紹介していきます。

導入文で使う

記事の冒頭でキャプションボックスを使って、読者に対してこの記事を読めばわかることを箇条書きにして伝えています。

以下の設定で、導入文にキャプションボックスを使用しています。

• スタイルは「枠上2」
• カラー設定は「オレンジ」
• アイコンは電球
• コンテンツは「リスト」を使用

以上を活用すると、このようになります。

読者は記事を読むかどうかを冒頭で判断すると考えているため、要点を明確に示しています。

箇条書きで3〜5項目にまとめると、視認性が高まり効果的でしょう。

結論を伝える時に使う

重要な結論や答えをキャプションボックスで囲むと、読者の記憶に残りやすくなります。

以下の設定で、結論を伝える際にキャプションボックスを使用しています。

• スタイルは「デフォルト」
• コンテンツは「リスト」を使用（下線有り）

以上を活用すると、このようになりました。

色とアイコンはその時々に応じて設定します。

例えば前の章でオレンジ色を使用していた場合、同じ色が連続しないように赤色もしくは青色で設定。

アイコンも同様で、例えばメリットやデメリットを伝える時は  、アナウンスをかけたい時は など、関連性のあるアイコンに設定します。

長文の記事では、途中で結論を見失いがちです。

キャプションボックスで視覚的に区別することで、読者は重要な情報をすぐに見つけられるでしょう。

補足で伝えたいときに使う

キャプションボックスは、本文の流れを妨げずに追加情報を提供したい場合にも便利です。

例えば読者が、文中で出てきた「キャプションボックス」についてわからなかったとしましょう。

そのような時にキャプションボックスを使用して説明すると、視覚的にもわかりやすく伝わります。

以下の設定で、補足を伝える際にキャプションボックスを使用しています。

• スタイルは「枠内」
• コンテンツは「リスト」を使用

以上を活用すると、このようになりました。

カラーとアイコンの設定は先ほどと同様、その時々に応じて設定しています。

キャプションボックスのカスタマイズ

基本的な使い方に慣れたら、キャプションボックスを使ってデザインを楽しんでみましょう。

今回はこの3つを紹介します。

それでは、この3つを作成して紹介していきます。

キャプションボックスで自己紹介をする

キャプションボックスを使って、おしゃれに自己紹介を作ることができます。

これはキャプションボックスの中に、SWELL専用ブロック「リッチカラム」を使用して作成しています。

リッチカラムをキャプションボックスの中に組み込むと、このようになります。

ブロックを2ヵ所挿入することができました。

あとはスタイルや色を自分好みに設定し、左に画像を追加、右にリストを追加してカスタマイズすると簡単なプロフィール作成が完了します。

キャプションボックスで商品を紹介する

自己紹介の作成方法を使用すると、キャプションボックスで商品を紹介することも可能です。

ちなみに、左の商品紹介は「Rinker」というプラグインを使用しています。

こちらの記事でおすすめのプラグインをRinkerを含めて紹介しているので、よかったら参考にしてみてくださいね！

キャプションボックスで手順を説明する

キャプションボックスの中にステップブロックを追加して手順を紹介できます。

こちらもSWELL専用ブロック「ステップ」と組み合わせて作成しました。

このようにSWELLはシンプルながらも綺麗で、かつ初心者でもわかりやすく使えることが可能です。

どの有料テーマにしようか悩んでいる方は、ぜひSWELLの購入を検討してみてくださいね！

＼ シンプルなのに、高機能／

まとめ：SWELL キャプションボックスを使いこなそう

今回はSWELL専用ブロック、キャプションボックスの使い方を紹介しました。

SWELLのキャプションボックスは、重要な情報を視覚的に強調できる独自ブロックです。

自身のブログに合わせた色合いやスタイルを設定し、ほかのブロックを組み合わせることで、デザイン性も向上することができます。

キャプションボックスはなんといっても、機能性の高さが魅力的です。

ぜひ使いこなして、見た目も綺麗なブログを仕上げていきましょう！