当ブログ愛用のWordPressテーマ
広告
＼乗り換え先おすすめテーマ！／
／ブロガーとして本格的に取り組む＼
SWELLの評判レビュー記事
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評...
SWELLキャプションボックスブロックの使い方｜カスタマイズ性が高くアイコンも設置できる！
「テキストやその他コンテンツを枠で囲みたい」
「キャプションボックスブロックの設定や活用方法は？」
「キャプションボックスの色やアイコンを設定できる？」
この記事では、そんな方に向けて、SWELLでキャプションボックスブロックの使い方とカスタマイズ方法を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
この記事を読めば、あなたも簡単に
- 自分好みのアイコンや色にカスタマイズしたキャプションボックスを作成できる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事の分かりやすさとデザインを大幅にレベルアップさせることができました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介
「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評…
目次
SWELLキャプションボックスブロックでできること
SWELLのキャプションボックスブロックでは以下のようなことができます。
- コンテンツを枠で囲むことができる
- カスタマイズ性の高いおしゃれなデザインにできる
- タイトルにアイコンを配置できる
それぞれ詳しく解説します。
コンテンツを枠で囲むことができる
SWELLのキャプションボックスは、テキストだけではなく、箇条書きや画像などのコンテンツを枠で囲むことができます。
例1
テキスト
例2
- 箇条書き
例3
目立たせたい内容を枠で囲むことで、ユーザーの目に留まりやすくなりますよ。
カスタマイズ性の高いおしゃれなデザインにできる
SWELLのキャプションボックスのデザインは「スタイル」「色」を選べ、以下のようなおしゃれなボックスを作成できます。
例1
枠上2・青色
例2
枠内・黄色
例3
浮き出し・赤色
- スタイル…「デフォルト」「小」「枠上」「枠上2」「枠内」「浮き出し」「内テキスト」の7種類から選べる
- 色…3パターン+メインカラーの4色を選べる
利用できるキャプションボックスのデザインは、なんと28通り！(＝7種類のスタイル×4色)
豊富なカスタマイズ性から、自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。
かめコンパスデザインによって与える印象がガラリと変わるよ
タイトルにアイコンを配置できる
SWELLではツールバーからテキスト内にアイコンを配置できますが、キャプションボックスのタイトルにも以下のようなアイコンを配置できます。
例1
記号・形
例2
コミュニケーション
例3
ロゴ
アイコンの種類は、ザッと数えただけでも1000種類以上！
どれを選べばいいか迷ってしまうくらいアイコンの種類が豊富にあります。
かめコンパスデザインもシンプルでおしゃれ
使いたいアイコンが見つからない…ということはなさそうですね。
SWELLキャプションボックスブロックの使い方とカスタマイズ設定
SWELLのキャプションボックスブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。
公式サイト：SWELLの「キャプション付きブロック」の使い方
STEP
記事編集画面の左上にある+を押して、キャプションボックスをクリックする
STEP
これでキャプションボックスブロックを呼び出せます。
タイトルにはテキストのみ入力でき、ボックス内にはテキスト以外のコンテンツブロックも配置できますよ。
ちなみに、キャプションボックスブロックは以下2つの方法からも呼び出せます。
＼タブの切り替え／
キャプションボックスブロックを呼び出したい段落ブロックの最初に/cap、もしくは/キャプションボックスを入力する ※「/」は半角で入力してください。
自分の好きな方法で呼び出しましょう。
かめコンパス個人的に「/cap」で呼び出すのがおすすめ！マウスを操作せずキーボード入力だけで早くかんたんに呼び出せるよ
キャプションボックスブロックで設定可能な項目は3つあります。
それぞれ詳しく解説します。
カスタマイズ項目がある場所
- キャプションボックスブロックを選択する
- 設定をクリックする
- ブロックをクリックする
スタイルを選ぶ
SWELLではキャプションボックスブロックのスタイルを以下の7種類から選べます。
スタイル①
デフォルト
スタイル②
小
スタイル③
枠上
スタイル④
枠上2
スタイル⑤
枠内
スタイル⑥
浮き出し
スタイル⑦
内テキスト
細かいところではありますが、スタイルによってタイトルの文字サイズが若干異なります。
いろんなスタイルが選べるので、気に入るものが見つかりそうですね。
記事内で統一感を出すために、使用するスタイルを2~3種類に絞るといいでしょう。
かめコンパス私はよく「枠上2」を使っているよ
カラー設定をする
SWELLのキャプションボックスブロックは、以下の4種類からカラーを選べます。※カラーはデフォルトではなく、当ブログ用に変更しています。
カラー①
メインカラー
カラー②
カスタムカラー01
カラー③
カスタムカラー02
カラー④
カスタムカラー03
4種類だけではなくもっとたくさんの種類を使いたい！という人もいるでしょう。
ただ、1つの記事内に何種類ものカラーを設定すると統一感がなくなってしまいます。
ですので、4種類しかカラー設定できない点がかえってメリットだと私は考えます。
かめコンパス私も基本的に1種類のみ、多くても2種類しか使っていないよ
キャプションボックスのカラーは、以下の2ヶ所で設定できます。
＼クリックで開く／
キャプションボックスのカラーを設定する方法はこちら
※色を変更したい項目のタブをクリックしてください。
STEP
WordPress管理画面で、SWELL設定⇒エディター設定の順にクリックする
STEP
カラーセットタブをクリックする
STEP
- 「キャプションブロック設定」のカラーセット: 01~03の色を選択をクリックする
- カラーピッカー(下図の〇にあたる)を動かして色を選ぶ、もしくはカラーコードを入力して色を指定する
STEP
変更を保存をクリックする
これでキャプションボックスのカラーを設定できます。
かめコンパスカラーピッカーで好きな色にピンポイントで合わすのは難しいので、カラーコードの入力がおすすめ！
カラーコードが分からない…カラーコードの調べ方が分からない…という人はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられますよ。
＼クリックで開く／
ColorPick Eyedropperの導入方法とカラーコードの調べ方はこちら
導入方法
- ChromeウェブストアからColorPick Eyedropperを導入するページを開き、chromeに追加をクリックする
使い方
- 使いたい色があるページで、拡張機能⇒ColorPick Eyedropperの順にクリックする
- 使いたい色をクリックすると、#から始まるカラーコードが調べられます
- カラーコードを先ほどの入力欄にコピペすると、使いたい色を利用できます。
アイコン設定をする
SWELLのキャプションボックスブロックにアイコンを設定することもできます。
例1
例2
例3
例4
下の画像は、配置できるアイコンの一部を抜粋したものです。
かめコンパス選びきれないくらい多くのアイコンがあるよ
アイコンを配置したほうが目に止まりやすくなったり、好印象を与えたりするのでおすすめです。
また、配置したアイコンの位置やアイコンサイズも選べますが、デフォルトのままでいいでしょう。
SWELLキャプションボックスブロックでおすすめな活用例
SWELLのキャプションボックスブロックの使い方とカスタマイズ方法が理解できたら、ここでキャプションボックスブロックのおすすめな活用方法を3つ紹介します。
活用方法
- ボックス内にリストブロックを配置する
- プロフィールを作成する
- メリット・デメリットボックスを作成する
それぞれ詳しく解説します。
ボックス内にリストブロックを配置する
まず多くの人が使うであろうキャプションボックス内に箇条書きを配置した例を紹介します。
例1
例2
例3
例4
SWELLのリストブロックと併用することで、要点をまとめて整理した情報をボックス形式で分かりやすく表示させることができます。
かめコンパス私も必ずと言っていいほど全ての記事に利用しているよ
＼クリックで開く／
箇条書きを配置したキャプションボックスの作り方はこちら
STEP
配置したキャプションボックスブロックのボックス内の段落ブロックを選択し、リストブロックを挿入する
これで箇条書きを配置したキャプションボックスの完成です。
リストブロックのスタイルも自由に変更してみましょう。
プロフィールを作成する
SWELLのキャプションボックスブロックを使えば、以下のようなプロフィールボックスを作成できます。
プロフィール
投稿ページの目次前やページ最後に配置するプロフィールに使ってみてください。
＼クリックで開く／
プロフィールを作成する方法はこちら
STEP
+⇒キャプションボックスの順にクリックする
STEP
ページに挿入したキャプションボックスブロック内にリッチカラムブロックを挿入する
STEP
リッチカラムの列数をPC・タブレット2列、スマホ1列にする
リッチカラムブロックの使い方について、詳しくは下の記事を参考にしてください。
関連記事
SWELLリッチカラムブロックの使い方｜横スクロールや2列表示がスマホでもできちゃう！
「リッチカラムの設定や活用方法は？」 「リッチカラムに背景色を付けられる？」 「スマホ表示で画像を横スクロールさせたい」 この記事では、そんな方に向けて、SWELLでリ…
STEP
アイコン画像を配置するカラムの横幅を30%、テキストを配置するカラムの横幅を70%にする
STEP
タイトルをプロフィールと入力、アイコン画像とテキストを配置すれば完成です。
メリット・デメリットボックスを作成する
SWELLのキャプションボックスブロックを使えば、以下のようなメリット・デメリットボックスも作成できます。
メリット
- メリット１
- メリット２
- メリット３
デメリット
- デメリット１
- デメリット２
- デメリット３
商品やサービスを紹介するときによく使用するので、作り方を覚えておきましょう。
＼クリックで開く／
メリット・デメリットボックスの作り方はこちら
STEP
各カラム内の段落ブロックを選択し、+⇒キャプションボックスの順にクリックする
STEP
リッチカラムブロックを選択し、カラム間の左右の余白を0.25remにする ※余白はお好みで調整してください。
リッチカラムブロックの使い方について、詳しくは下の記事を参考にしてください。
関連記事
SWELLリッチカラムブロックの使い方｜横スクロールや2列表示がスマホでもできちゃう！
「リッチカラムの設定や活用方法は？」 「リッチカラムに背景色を付けられる？」 「スマホ表示で画像を横スクロールさせたい」 この記事では、そんな方に向けて、SWELLでリ…
STEP
キャプションボックスブロックにアイコン画像やテキストを配置し、色を変更すれば完成です。
SWELLキャプションボックスブロックまとめ
今回は、SWELLでキャプションボックスブロックの使い方とカスタマイズ方法を紹介しました。
本記事のおさらい
＼読み直したい箇所をクリック／
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです！
この記事が気に入ったら
フォローしてね！
コメント