悩む人SWELLブロックのキャプションボックスの使い方について教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 「キャプションとは」を知ることができる。
- キャプションボックスの使用例が見れる。
- キャプションボックスの使い方（ブロックの挿入・スタイルの選択・カラー設定・アイコン設定）が分かる。
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】キャプションボックスの使い方【使用例付き】
キャプションとは
写真やイラストなどの視覚的な要素に付けられる短い説明文やタイトルのことで、画像の内容や意図を伝えることができます。 また、映画やテレビの字幕も該当します。
キャプションボックスの使用例
以下に3パターンの使用例を用意しました。
使用例 1
使用例 2
- 「キャプションとは」を知ることができる。
- キャプションボックスの使用例が見れる。
- キャプションボックスの使い方（ブロックの挿入・スタイルの選択・カラー設定・アイコン設定）が分かる。
使用例 3
写真やイラストなどの視覚的な要素に付けられる短い説明文やタイトルのことで、画像の内容や意図を伝えることができます。 また、映画やテレビの字幕も該当します。
スタイル
※ メインカラーが反映されています。
開いてメインカラーの設定場所を見る
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
左サイドバーから、「サイト全体設定」を選択します。
サイト全体設定から、「基本カラー」を選択します。
基本カラーの「メインカラー」が反映されています。
デフォルト
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
小
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠上
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠上2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠内
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
浮き出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
内テキスト
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
カラー設定
開いてカラー設定の場所を見る
管理画面メニューから、「SWELL設定」＞「エディター設定」を選択します。
エディター設定から、「カラーセット」を選択します。
カラー設定の「キャプションブロック設定」からカラー設定が行えます。
デフォルト
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
小
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠上
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠上2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
枠内
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
浮き出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
内テキスト
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
アイコン設定
アイコンの位置：左
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
アイコンの位置：右
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
アイコンサイズ：2.2em
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
キャプションボックスの挿入
管理画面メニューから、「新規投稿を追加」を選択します。
（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「キャプションボックス」を選択します。
これでキャプションボックスが使えます。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。