【Swell】キャプションボックスの使い方やデザイン

当ブログではWordPressのテーマに「Swell」を使用しています。

Swellはデザイン性も良くて、色々なブログパーツが多いので購入を決めたのですが、今回はSwellのキャプションボックスについて解説します。

そもそもキャプションボックスは、私が記事の冒頭で良く使っている下のボックスです。

箇条書きに使ったり、ちょっとした解説に使ったりと便利なボックスになっています。

キャプションボックスを追加する方法

WordPressで記事を作成する場合には、使いたいアイテムなどを追加していきます。

キャプションボックスもブロックを追加で使えるようになります。

ブロックを追加する

たった2ステップで段落に追加されます。

毎回＋マークをクリックするのが面倒だと思う場合

段落に「/キャプション」や「/ca」だけでも選択することができます。

追加したキャプションボックスは下のように、サイトの基本カラーとなります。

キャプションボックスのデザインは7種類

キャプションボックスのデザインは7種類です。

デフォルト

小

枠上

枠上2

枠内

浮き出し

内テキスト

キャプションボックスのカラーは3種類+1

キャプションボックスのカラーデザインはSwell設定で設定できる3種類のカラーとメインカラーの計4種類となっています。

カラーデザイン3種

3種類の中から使いたいカラーを選ぶことが可能です。

私は以下の3パターンを登録しています。

メインカラーを使用した場合は枠内のカラーを変更することは出来ません。

Swell設定

Swell設定は、WordPressのダッシュボードかキャプションボックスのリンクをクリックすると辿り着けます。

ダッシュボードから行く場合は、Swellのエディター設定を選択しましょう。

エディター設定の「カラーセット」真ん中辺りにキャプションボックスのカラー設定があるので、お好みのカラーに変更したら完成です。

エディター設定ではキャプションブロックとなっていますが、キャプションボックスのことなので、ここを変更します。

記事作成中にリンクから飛んだ場合、エディター設定で変更しても反映されません。
一旦ダッシュボードに戻ってから記事に入ると反映されています。

キャプションボックスにアイコンも設定できる

キャプションボックスのタイトル部分にアイコンを設定できます。

注意を引きたいことや、可愛く装飾したい場合には使えますね。

アイコンの数は相当用意されているので、困ることはないと思います。

この記事のまとめ

Swellで使えるキャプションボックスは簡単に使えるのにブログには必須とも言えるブログパーツです。

種類も7種類用意されているしカラーも自由に変更できます。

アイコンも設定できるので利用の幅は大きいと思いますよ。

Swellを使っているなら絶対に利用したいですね。