SWELLキャプションボックスブロックの使い方｜カスタマイズ性が高くアイコンも設置できる！

「テキストやその他コンテンツを枠で囲みたい」

「キャプションボックスブロックの設定や活用方法は？」

「キャプションボックスの色やアイコンを設定できる？」

この記事では、そんな方に向けて、SWELLでキャプションボックスブロックの使い方とカスタマイズ方法を解説します。

キャプションボックスブロックとは…テキストや画像などのコンテンツをタイトル付きのボックスで見やすくするためのSWELL専用カスタムブロック

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

• 自分好みのアイコンや色にカスタマイズしたキャプションボックスを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事の分かりやすさとデザインを大幅にレベルアップさせることができました。

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

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

SWELLキャプションボックスブロックでできること

SWELLのキャプションボックスブロックでは以下のようなことができます。

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

コンテンツを枠で囲むことができる

SWELLのキャプションボックスは、テキストだけではなく、箇条書きや画像などのコンテンツを枠で囲むことができます。

目立たせたい内容を枠で囲むことで、ユーザーの目に留まりやすくなりますよ。

カスタマイズ性の高いおしゃれなデザインにできる

SWELLのキャプションボックスのデザインは「スタイル」「色」を選べ、以下のようなおしゃれなボックスを作成できます。

利用できるキャプションボックスのデザインは、なんと28通り！(＝7種類のスタイル×4色)

豊富なカスタマイズ性から、自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。

タイトルにアイコンを配置できる

SWELLではツールバーからテキスト内にアイコンを配置できますが、キャプションボックスのタイトルにも以下のようなアイコンを配置できます。

アイコンの種類は、ザッと数えただけでも1000種類以上！

どれを選べばいいか迷ってしまうくらいアイコンの種類が豊富にあります。

使いたいアイコンが見つからない…ということはなさそうですね。

SWELLキャプションボックスブロックの使い方とカスタマイズ設定

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

公式サイト：SWELLの「キャプション付きブロック」の使い方

ちなみに、キャプションボックスブロックは以下2つの方法からも呼び出せます。

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

キャプションボックスブロックで設定可能な項目は3つあります。

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

スタイルを選ぶ

SWELLではキャプションボックスブロックのスタイルを以下の7種類から選べます。

細かいところではありますが、スタイルによってタイトルの文字サイズが若干異なります。

いろんなスタイルが選べるので、気に入るものが見つかりそうですね。

記事内で統一感を出すために、使用するスタイルを2~3種類に絞るといいでしょう。

カラー設定をする

SWELLのキャプションボックスブロックは、以下の4種類からカラーを選べます。※カラーはデフォルトではなく、当ブログ用に変更しています。

4種類だけではなくもっとたくさんの種類を使いたい！という人もいるでしょう。

ただ、1つの記事内に何種類ものカラーを設定すると統一感がなくなってしまいます。

ですので、4種類しかカラー設定できない点がかえってメリットだと私は考えます。

キャプションボックスのカラーは、以下の2ヶ所で設定できます。

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

アイコン設定をする

SWELLのキャプションボックスブロックにアイコンを設定することもできます。

下の画像は、配置できるアイコンの一部を抜粋したものです。

アイコンを配置したほうが目に止まりやすくなったり、好印象を与えたりするのでおすすめです。

また、配置したアイコンの位置やアイコンサイズも選べますが、デフォルトのままでいいでしょう。

SWELLキャプションボックスブロックでおすすめな活用例

SWELLのキャプションボックスブロックの使い方とカスタマイズ方法が理解できたら、ここでキャプションボックスブロックのおすすめな活用方法を3つ紹介します。

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

ボックス内にリストブロックを配置する

まず多くの人が使うであろうキャプションボックス内に箇条書きを配置した例を紹介します。

SWELLのリストブロックと併用することで、要点をまとめて整理した情報をボックス形式で分かりやすく表示させることができます。

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

プロフィールを作成する

SWELLのキャプションボックスブロックを使えば、以下のようなプロフィールボックスを作成できます。

投稿ページの目次前やページ最後に配置するプロフィールに使ってみてください。

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

メリット・デメリットボックスを作成する

SWELLのキャプションボックスブロックを使えば、以下のようなメリット・デメリットボックスも作成できます。

商品やサービスを紹介するときによく使用するので、作り方を覚えておきましょう。

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

SWELLキャプションボックスブロックまとめ

今回は、SWELLでキャプションボックスブロックの使い方とカスタマイズ方法を紹介しました。

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

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