画像なしでも使えますか？

はい、画像を設定せずに使用できます。

リンクを設定できますか？

はい、リンク先のURLを設定できます。関連記事やおすすめページ、商品ページなどへの導線として活用できます。

CTAとして使えますか？

はい、CTAとして使用できます。タイトルや画像、リンクなどを設定して、読者に見てほしいページへの導線を作成できます。

スマホでも表示できますか？

はい、スマホでも表示できます。ただし、画像や文字サイズなどの設定によって見え方が変わるため、公開前にスマホで表示を確認しておきましょう。

バナー風ボックスのデザインは変更できますか？

はい、タイトルやアイコン、画像、サイズ、枠線、色などを設定できます。サイトのデザインや用途に合わせて調整できます。

AFFINGER7のバナー風ボックスの使い方｜設定方法とCTA活用術

Q: 画像なしでも使えますか？

はい、画像を設定せずに使用できます。

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

AFFINGER7のバナー風ボックスの使い方を知りたい
バナー風ボックスの設定方法を知りたい
画像やリンクを設定してCTAとして活用したい
バナー風ボックスをおしゃれに表示したい

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7のバナー風ボックスとは？

AFFINGER7の「バナー風ボックス」は、画像や文字を組み合わせて、リンク付きのバナーのようなボックスを作成できるブロックです。

記事内に設置することで、関連記事やおすすめページ、商品ページなどへの導線として活用できます。

画像やリンク、タイトル、色、サイズなどを設定できるため、CTA（行動喚起）や記事への誘導にも便利です。

WordPressのブロックエディターから簡単に追加できるので、HTMLやCSSを使わずにバナー風のデザインを作成できます。

AFFINGER7のバナー風ボックスの使い方

AFFINGER7のバナー風ボックスは、画像やタイトル、リンクなどを設定して、記事内にバナー風のリンクを作成できます。

ここでは、バナー風ボックスの挿入手順と設定項目を解説します。

AFFINGER7のバナー風ボックスの使い方

バナー風ボックスの挿入手順
バナー風ボックスの設定方法

❶ バナー風ボックスの挿入手順

投稿（エディター）画面での作業になります。

基本的な「AFFINGER：バナー風ボックス」ブロックの挿入手順をご紹介します。

投稿（エディター）画面を準備

Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。

投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）

「AFFINGER：バナー風ボックス」ブロックを挿入する箇所をクリックします。

ブロック挿入ツール（ブロックインサーター）を切り替え

『＋（ブロックインサーター）』をクリックします。

ブロックタブメニューから「バナー風ボックス」を選択

ブロックインサーターアイコンが『ｘ』に変わり、ブロックタブのメニューが表示されます。

AFFINGERから『AFFIMGER：バナー風ボックス』を選択して投稿（エディター）画面に挿入します。

『AFFIMGER：バナー風ボックス』をクリックします。

AFFINGER7のブロックメニューから「AFFINGER：バナー風ボックス」を選択して挿入する投稿エディター画面

「バナー風ボックス」挿入完了

投稿（エディター）画面に「バナー風ボックス」ブロックが表示されます。

挿入直後では、以下のように表示されます。

❷ バナー風ボックスの設定方法

設定メニューは、投稿エディター画面の右側にある「設定＞ブロック」タブから確認できます。

表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

「AFFINGER：バナー風ボックス」の設定方法「ブロック」

「ブロック」タブでは、「アイコン」「アイコンサイズ」「アイコンラベル」「枠線」「色」など、メモブロックの表示やデザインを設定できます。

「ブロック」の詳細設定項目

AFFIMGER：バナー風ボックス

タイトル

タイトルラベルのアイコン変更
- ドロップダウンメニューより選択

アイコンクラス

クラス名を入力してアイコン変更
SVGタグで入力→ ON / OFF（ラジオボタン切り替え）

フォントサイズ

単位（％）で入力

アイコンをもっと詳しく関連記事はこちら

画像

画像 URL → 画像のURLを貼り付け
ぼかし→ ON / OFF（ラジオボタン切り替え）
暗くする → ON / OFF（ラジオボタン切り替え）

リンク

リンク先 URL → リンク先のURLを貼り付け
nofollow → ON / OFF（ラジオボタン切り替え）
新しいページで開く → ON / OFF（ラジオボタン切り替え）

AFFINGER7の「バナー風ボックス」詳細設定（幅（PX）・高さ（PX）・下マージン（PX））を表示した画面

サイズ

幅（PX） → スライダーまたは数値（PX）入力で調整
高さ（PX）→ スライダーまたは数値（PX）入力で調整
下マージン（PX）→ スライダーまたは数値（PX）入力で調整

配置

コンテンツを左寄せ → ON / OFF（ラジオボタン切り替え）
ボックスを中央揃え → ON / OFF（ラジオボタン切り替え）

枠線

枠線 → （カラーパレットから選択）
太さ（PX）→ スライダーまたは数値（PX）入力で調整
丸み（PX）→ スライダーまたは数値（PX）入力で調整

AFFINGER7の「バナー風ボックス」詳細設定（色・影・背景のカラー）を表示した画面

色

タイトル → （カラーパレットから選択）
影 → （カラーパレットから選択）
背景 → （カラーパレットから選択）

高度な設定

追加 CSS クラス
- 今回は省略します。
追加 CSS
- 今回は省略します。

バナー風ボックスの活用方法

バナー風ボックスは、記事内のリンクを目立たせたいときに便利です。

次のような用途で活用できます。

関連記事への誘導：詳しい解説記事や関連する記事へ誘導する
CTAとして活用：商品ページや公式サイトへのリンクを設置する
おすすめ記事の紹介：読者に読んでもらいたい記事を目立たせて紹介する
カテゴリーページへの誘導：特定のテーマに関連する記事一覧へ誘導する
プロフィール・サイト案内：プロフィールページやサイトのおすすめコンテンツを紹介する

このように、バナー風ボックスを使うことで、読者に見てほしいページへの導線を記事内に目立たせて設置できます。

❶ 関連記事への誘導

❷ CTAとして活用

バナー風ボックスは、商品ページや申し込みページなどへ読者を誘導するCTAにも活用できます。

たとえば、アフィリエイト記事なら、次のような案内をバナー風ボックスで目立たせます。

AFFINGER7を使ってブログを始めるならこちら

→ AFFINGER7の詳細を確認する

タイトルとリンク先をわかりやすく設定することで、記事の内容に合わせたCTAを作成できます。

関連記事詳しい設定方法は、以下の記事で解説しています。

: AFFINGERタグブロックの使い方｜広告・CTAを管理してクリック数を計測する方法

AFFINGERタグブロックの使い方を初心者向けに解説。広告・CTAの作成方法から、カテゴリー・タグ設定、ショートコードの使い方、クリック数・表示回数・CTRの計測方法まで画像付きでわかりやすく紹介します。SEOや収益化に役立つ活用方法も解説。

❸ おすすめ記事の紹介

バナー風ボックスを使って、読者に読んでほしいページを目立たせて紹介することもできます。

たとえば、AFFINGER7の記事なら、次のような案内を設置できます。

AFFINGER7の設定をまとめて確認したい方はこちら

❹ カテゴリーページへの誘導

バナー風ボックスは、特定のテーマに関連する記事をまとめたカテゴリーページへの誘導にも使えます。

たとえば、AFFINGER7の記事内に次のような案内を設置できます。

AFFINGER7の設定方法をまとめてチェック

AFFINGER7の「初期設定記」事一覧を見る

複数の記事をまとめて紹介したい場合は、カテゴリーページへの導線として活用すると便利です。

❺ プロフィール・サイト案内

バナー風ボックスは、プロフィールやお問い合わせなど、サイト内で確認してほしいページへの案内にも使えます。

たとえば、次のようなリンクを設置できます。

当サイトについて詳しく知りたい方はこちら

運営者プロフィールを見る（※ リンクはありません）

このように、通常のテキストリンクよりも目立たせたいページへの導線として活用できます。

バナー風ボックスを使うときのポイント

バナー風ボックスは目立たせやすい反面、使い方によっては記事全体が見づらくなることもあります。

ここでは、バナー風ボックスを設置するときに意識したいポイントを紹介します。

リンク先がわかる文言にする

「詳しくはこちら」だけでなく、リンク先で何が確認できるのかを具体的に書くと、内容が伝わりやすくなります。

画像と文字を見やすくする

背景画像を使用する場合は、文字が埋もれないように「ぼかし」などを活用して、読みやすさを調整します。

スマホ表示を確認する

PCで見やすく設定しても、スマホでは文字や画像のバランスが変わることがあります。公開前にスマホ表示も確認しましょう。

設置しすぎない

バナー風ボックスを多用すると、重要なリンクが目立ちにくくなります。本当に誘導したい場所に絞って設置するのがおすすめです。

関連記事詳しい設定方法は、以下の記事で解説しています。

: AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定

AFFINGER7でサイトデザインを整える方法を解説。サイト全体のカラーやトップページ、ヘッダー・メニュー、フォント、余白、サイドバーなど、見やすいサイトに仕上げるための設定をまとめています。

AFFINGER7のバナー風ボックスに関するFAQ

AFFINGER7のバナー風ボックスについて、設定や使い方に関するよくある疑問をまとめました。

画像なしでも使えますか？: はい、画像を設定せずに使用できます。
リンクを設定できますか？: はい、リンク先のURLを設定できます。関連記事やおすすめページ、商品ページなどへの導線として活用できます。
CTAとして使えますか？: はい、CTAとして使用できます。タイトルや画像、リンクなどを設定して、読者に見てほしいページへの導線を作成できます。
スマホでも表示できますか？: はい、スマホでも表示できます。
ただし、画像や文字サイズなどの設定によって見え方が変わるため、公開前にスマホで表示を確認しておきましょう。
バナー風ボックスのデザインは変更できますか？: はい、タイトルやアイコン、画像、サイズ、枠線、色などを設定できます。
サイトのデザインや用途に合わせて調整できます。