こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6の「バナー風ボックス」を使えば、記事内のCTAや関連記事リンクをおしゃれに目立たせられます。
AFFINGER6のバナー風ボックスってどう使うの？
おしゃれなCTAを簡単に作りたい…
クリックされやすいデザインにしたい！
＼初心者でも安心！ コスパ最強のWordPressテーマ／
＼効果測定に必要なプラグインをまとめた特別セット／
AFFINGER6のバナー風ボックスとは？
AFFINGER6の「バナー風ボックス」は、画像・テキスト・リンクを組み合わせて、目立つ導線を作れる装飾ブロックです。
通常のボタンリンクより情報量を増やしやすく、以下のような用途でよく使われます。
- 関連記事への誘導
- AFFINGER6紹介CTA
- ランキング記事への導線
- 比較記事への誘導
- カテゴリー誘導
- サービス紹介
特にブログ収益化では「どこをクリックしてほしいか」を視覚的に伝えることが重要なので、かなり相性の良い機能です。
通常リンクとの違い
普通のテキストリンクだけだと、読者は流し読みして見落としやすいです。
一方、バナー風ボックスは、
- 背景色
- 枠線
- 画像
- アイコン
- ボタン風デザイン
などを使って視線を止められます。
そのため、CTAのクリック率改善にもつながりやすいです。
AFFINGER6のバナー風ボックスの使い方
ここからは、AFFINGER6でFAQブロックを追加する方法と、基本的な設定項目についてわかりやすく解説します。
操作自体はかなり簡単なので、初心者の方でもすぐに設定できます。
バナー風ボックスブロックを追加する方法
作業は投稿エディター画面で行います。
ブロックを追加する
投稿エディター画面で『＋（ブロックインサーター）』をクリックします。
- ＋（ブロックインサーター）
ブロックタブから「バナー風ボックス」を選択する
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
AFFINGERから『AFFIMGER: バナー風ボックス』を選択して投稿エディター画面に追加します。
バナー風ボックスブロックの追加完了
投稿エディター画面に『バナー風ボックス』ブロックが表示されます。
挿入直後では、以下のように表示されます。
バナー風ボックスブロックの設定方法
設定メニューは、投稿エディター画面の右側にある「設定 ＞ ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
ブロックタブメニュー詳細設定項目
AFFIMGER: バナー風ボックス
タイトル
- アイコンを一覧から選択
- ドロップダウンメニューより選択
- アイコンクラス
- アイコン一覧にないアイコンはクラス名を入力
- フォントサイズ
- 単位（％）で入力
- アイコンをもっと詳しく関連記事はこちら
画像
- 画像 URL
- 画像のURLを貼り付け
- ぼかし→ ON / OFF
- 暗くする → ON / OFF
リンク
- リンク先 URL
- リンク先のURLを貼り付け
- nofollow → ON / OFF
- 新しいページで開く → ON / OFF
サイズ
- 幅（PX）
- スライダーまたは数値（PX）入力で調整
- 高さ（PX）
- スライダーまたは数値（PX）入力で調整
- 下マージン（PX）
- スライダーまたは数値（PX）入力で調整
配置
- コンテンツを左寄せ → ON / OFF
- ボックスを中央揃え → ON / OFF
枠線
- 枠線
- カラーパレットから選択
- 太さ（PX）
- スライダーまたは数値（PX）入力で調整
- 丸み（PX）
- スライダーまたは数値（PX）入力で調整
色
- タイトル
- 影
- 背景
- 何もカラーパレットから選択
高度な設定
- 追加 CSS クラス
- 今回は省略します。
クリック率を上げるバナー風ボックスの使い方
バナー風ボックスは、ただ設置するだけではクリックされません。
「どこに置くか」「何を表示するか」を意識することで、CTR（クリック率）はかなり変わります。
特にAFFINGER6はデザイン自由度が高いため、使い方次第で収益導線を大きく強化できます。
ここでは、クリック率を上げやすいおすすめの活用方法をご紹介します。
記事下CTAとして使う
最も効果が出やすいのが、記事下CTAです。
記事を最後まで読んだユーザーは興味関心が高く、次の行動につながりやすい状態になっています。
そのため、
- AFFINGER6購入ページ
- 比較記事
- おすすめASP
- SEOツール紹介
などへの導線として非常に相性が良いです。
特に、
- 「初心者向け」
- 「無料」
- 「比較」
- 「今すぐチェック」
など、行動をイメージしやすい文言を入れるとクリックされやすくなります。
以下は、AFFINGER6の公式ページへユーザーを誘導するバナー風ボックスのサンプルです。CTAデザインや導線作りの参考にしてみてください。
見やすくするために大きめのサイズで表示しています。
そのため、スマホでは画像の一部が切れて表示される場合があるので注意してください。
関連記事への導線に使う
関連記事リンクを、普通のテキストリンクだけで済ませている方はかなり多いです。
しかし、重要な関連記事ほどバナー風ボックスで目立たせたほうが回遊率アップにつながります。
例えば、
- SWELLとAFFINGER6比較
- SEO対策まとめ
- おすすめプラグイン
- ブログ収益化記事
など、「次に読んでほしい記事」を強調するのがおすすめです。
特にロング記事では、途中離脱を防ぐ効果も期待できます。
比較記事・ランキング記事と組み合わせる
比較記事やランキング記事は、もともとクリック率が高いジャンルです。
そのため、バナー風ボックスと組み合わせることでさらに導線を強化できます。
例えば、
- AFFINGER6 vs SWELL
- おすすめASPランキング
- SEOツール比較
- WordPressテーマ比較
などは非常に相性が良いです。
特に「比較結果を見る」「おすすめをチェック」などのCTA文言はクリックされやすい傾向があります。
以下は、画像を使わずにキャッチーな文言を入れたバナー風ボックスのサンプルです。シンプルながら視線を集めやすく、関連記事やCTA導線にも活用できます。
SWELL vs AFFINGER6
SWELLとAFFINGER6、結局どっちがおすすめ？本音で徹底比較
色を使い分けて重要リンクを強調する
背景色を変えるだけでも、読者の視線はかなり変わります。
例えば、
- 赤・オレンジ系 → 強調・おすすめ
- 青・緑系 → 信頼感
- 黄色系 → 注意・注目
- グレー系 → シンプル
など、目的ごとに使い分けるのがおすすめです。
ただし、色を増やしすぎるとサイト全体の統一感が崩れるため、基本は2〜3色程度にまとめると見やすくなります。
ボタン風デザインを組み合わせる
AFFINGER6はボタンデザインとの相性も非常に良いです。「前述のサンプルを参考に設定してみてください」
例えば、
- 詳しく見る
- 比較記事はこちら
- 無料でチェック
- おすすめテーマを見る
など、行動をイメージしやすいボタンを設置するとクリック率アップにつながります。
特にスマホでは「押せそう」に見えるデザインが重要なので、ボタン風デザインはかなり効果的です。
バナー風ボックスを使いすぎない
目立つ装飾だからこそ、多用しすぎると逆効果になります。
記事内に大量配置すると、
- どこが重要かわからない
- 広告感が強くなる
- 読みにくくなる
といったデメリットもあります。
おすすめは、
- 記事上
- 記事中
- 記事下
の3か所前後です。
「本当にクリックしてほしい場所だけ」に使うことで、CTA効果を高めやすくなります。
AFFINGER6のバナー風ボックスを使うメリット
AFFINGER6のバナー風ボックスは、記事内の導線を目立たせるだけでなく、デザイン性や使いやすさにも優れています。
特にAFFINGER6は装飾機能が豊富なので、初心者でも簡単におしゃれなCTAや関連記事リンクを作成できます。
ここでは、AFFINGER6でバナー風ボックスを使う主なメリットをご紹介します。
初心者でも簡単に設置できる
AFFINGER6のバナー風ボックスは、専用ブロックを追加するだけで簡単に設置できます。
HTMLやCSSを細かく編集しなくても、
- 背景色
- アイコン
- テキスト
- ボタン風デザイン
などを直感的に設定できるため、WordPress初心者でも扱いやすいです。
「おしゃれなCTAを作りたいけど難しいカスタマイズは苦手…」
という方にも使いやすい機能です。
デザインを統一しやすい
バナー風ボックスは、サイト全体のデザインを統一しやすいのもメリットです。
例えば、
- カラーを統一する
- ボタンデザインを揃える
- アイコンを共通化する
だけでも、サイト全体にまとまりが出やすくなります。
特にAFFINGER6はデザイン自由度が高いため、ブログの雰囲気に合わせて調整しやすいです。
HTMLやCSSなしで装飾できる
通常、バナー風デザインを作ろうとするとHTMLやCSSの知識が必要になることがあります。
しかしAFFINGER6なら、ブロック設定だけで簡単に装飾できます。
例えば、
- 背景画像
- 枠線
- グラデーション
- 角丸デザイン
- ボタン装飾
なども比較的簡単に設定可能です。
コードを書かずにデザイン性を高められるのは大きなメリットです。
記事を見やすく整理できる
バナー風ボックスは、重要な情報を目立たせたいときにも便利です。
例えば、
- 関連記事
- 比較記事
- おすすめ記事
- 重要ポイント
などを視覚的に整理できます。
特にロング記事では、適度にバナー風ボックスを入れることで、読者が内容を把握しやすくなります。
おしゃれなCTAを簡単に作れる
AFFINGER6はCTA系デザインとの相性も非常に良いです。
例えば、
- 「詳しく見る」
- 「比較記事はこちら」
- 「今すぐチェック」
などのボタンを組み合わせることで、簡単にCTA感を強められます。
また、画像や背景色を組み合わせるだけでも、プロっぽいデザインを作りやすいです。
「クリックしてほしい場所」を自然に目立たせたい場合にも活用できます。
AFFINGER6のバナー風ボックスでよくある質問
AFFINGER6のバナー風ボックスについて、初心者の方が気になりやすいポイントをまとめました。
スマホ表示にも対応していますか？
はい。AFFINGER6はレスポンシブ対応なので、スマホやタブレットでも自動で表示が最適化されます。
ただし、背景画像を大きく設定している場合は、スマホで一部が切れて表示されることがあります。
そのため、実際の表示を確認しながらサイズ調整するのがおすすめです。
画像なしでも使えますか？
使えます。
背景色やアイコンだけでも十分目立つため、シンプルな関連記事導線として活用できます。
特に、
- 関連記事リンク
- 比較記事CTA
- ランキング記事導線
などは、画像なしでも使いやすいです。
バナー風ボックスはどこに設置するのがおすすめですか？
特におすすめなのは以下の位置です。
- 記事上
- 記事中
- 記事下CTA
中でも記事下は、読了後ユーザーの行動率が高いためクリックされやすい傾向があります。
クリック率を上げるコツはありますか？
「何がわかるのか」を明確に書くことが重要です。
例えば、
- 比較結果を見る
- おすすめテーマをチェック
- 初心者向けガイドはこちら
など、行動イメージが伝わる文言がおすすめです。
また、背景色やボタンデザインを統一すると、サイト全体も見やすくなります。
バナー風ボックスを使いすぎても大丈夫ですか？
使いすぎはおすすめしません。
記事内に大量配置すると、
- どこが重要かわからない
- 広告感が強くなる
- 読みにくくなる
といったデメリットもあります。
基本は「本当に読んでほしい場所」に絞って使うのがおすすめです。
まとめ！AFFINGER6のバナー風ボックスの使い方｜クリック率を上げるおしゃれなCTA作成術
AFFINGER6のバナー風ボックスを使えば、関連記事リンクやCTAをおしゃれに目立たせられます。
特に、
- クリック率アップ
- 回遊率改善
- 収益記事への導線強化
- サイトデザインの統一
などとの相性が良く、ブログ運営でもかなり便利な機能です。
また、AFFINGER6はデザイン自由度が高いため、HTMLやCSSを細かく触らなくても、初心者でも簡単にバナー風デザインを作成できます。
テキストリンクだけでは目立ちにくい場所も、バナー風ボックスを使うことで視線を集めやすくなります。
「クリックしてほしい場所」を自然に強調したい方は、ぜひ活用してみてください。
