【SWELL】キャプションボックスの使い方【使用例付き】

当ページのリンクには広告が含まれています。
初心者ブロガー

SWELLブロックのキャプションボックスの使い方について教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 「キャプションとは」を知ることができる。
  • キャプションボックスの使用例が見れる。
  • キャプションボックスの使い方(ブロックの挿入・スタイルの選択・カラー設定・アイコン設定)が分かる。

是非、最後まで読んでみて下さい。

本記事の内容

【SWELL】キャプションボックスの使い方【使用例付き】

キャプションとは

写真やイラストなどの視覚的な要素に付けられる短い説明文やタイトルのことで、画像の内容や意図を伝えることができます。 また、映画やテレビの字幕も該当します。

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

以下に3パターンの使用例を用意しました。

使用例 1

本記事のアイキャッチ画像

使用例 2

本記事で学べること
  • 「キャプションとは」を知ることができる。
  • キャプションボックスの使用例が見れる。
  • キャプションボックスの使い方(ブロックの挿入・スタイルの選択・カラー設定・アイコン設定)が分かる。

使用例 3

captionとは

写真やイラストなどの視覚的な要素に付けられる短い説明文やタイトルのことで、画像の内容や意図を伝えることができます。 また、映画やテレビの字幕も該当します。

スタイル

※ メインカラーが反映されています。

開いてメインカラーの設定場所を見る

管理画面メニューから、「外観」>「カスタマイズ」を選択します。

左サイドバーから、「サイト全体設定」を選択します。

サイト全体設定から、「基本カラー」を選択します。

基本カラーの「メインカラー」が反映されています。

デフォルト

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠上

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠上2

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠内

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

浮き出し

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

内テキスト

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

カラー設定

開いてカラー設定の場所を見る

管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。

エディター設定から、「カラーセット」を選択します。

カラー設定の「キャプションブロック設定」からカラー設定が行えます。

デフォルト

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠上

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠上2

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

枠内

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

浮き出し

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

内テキスト

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

アイコン設定

アイコンの位置:左

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

アイコンの位置:右

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

アイコンサイズ:2.2em

The Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

キャプションボックスの挿入

管理画面メニューから、「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「キャプションボックス」を選択します。

これでキャプションボックスが使えます。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容