AFFINGER7には、画像とテキストを組み合わせてリンクを作成できる「バナー風ボックス」という便利なブロックがあります。
関連記事へのリンクを目立たせたり、カテゴリーやおすすめページへ読者を誘導したりするときに便利な機能です。
通常のテキストリンクよりも目立つため、
- おすすめの記事を読んでもらいたい
- まとめ記事へ誘導したい
- 商品やサービスの紹介ページを目立たせたい
といった場面で活躍します。
ただし、バナー風ボックスには画像・リンク・サイズ・枠線・色などさまざまな設定項目があるため、AFFINGER7を使い始めたばかりの方には少し分かりにくいかもしれません。
この記事では、AFFINGER7のバナー風ボックスの基本的な使い方から、背景画像・リンク・サイズ・色の変更方法まで初心者向けにわかりやすく解説します。
AFFINGER7にはバナー風ボックス以外にも、記事作成に役立つさまざまな機能があります。
AFFINGER7の使い方を最初から確認したい方は、AFFINGER7の使い方まとめも参考にしてください。
この記事でわかること
- AFFINGER7でバナー風ボックスを設置する方法
- 背景画像を設定する方法
- リンクを設定する方法
- サイズや配置を変更する方法
- 枠線・カラーを変更する方法
- バナー風ボックスのおすすめ活用方法
- バナー風ボックスを使うときの注意点
それでは、順番に見ていきましょう。
AFFINGER7のバナー風ボックスとは？
AFFINGER7の「バナー風ボックス」は、画像やテキストを組み合わせてバナーのようなリンクを作成できるブロックです。
通常の記事リンクであれば、「AFFINGER7の使い方はこちら」といったテキストリンクを設置することが多いと思います。
バナー風ボックスを使えば、背景画像や背景色、枠線などを設定して、通常のテキストリンクよりも目立つリンクを作ることができます。
バナー風ボックスはこんな感じです。
バナー風ボックス
オシャレなバナー風ボックスが作れる！
バナー風ボックスはページへの誘導に便利
バナー風ボックスは、単に記事をおしゃれに装飾するためだけの機能ではありません。
特におすすめなのが、
- 関連記事
- まとめ記事
- カテゴリーページ
- おすすめ記事
- 商品・サービス紹介ページ
など、読者に次に見てもらいたいページへの誘導です。
記事を読んでいる途中で、「もっと詳しく知りたい」と思った読者に関連ページを紹介することで、サイト内を回遊してもらいやすくなります。
AFFINGER7にはバナー風ボックス以外にも記事を読みやすくするさまざまなブロックがあります。
記事装飾についてまとめて確認したい方は、AFFINGER7で記事が読みやすくなる装飾・ブロック活用術も参考にしてください。
AFFINGER7でバナー風ボックスを設置する方法
それでは、実際にAFFINGER7でバナー風ボックスを設置してみましょう。
操作自体はそれほど難しくありません。
①ブロックエディターで「＋」をクリック
まずWordPressの投稿編集画面を開きます。
バナーを設置したい場所で「＋」をクリックしてください。
ブロックを追加する画面が表示されます。
②「バナー風ボックス」を選択する
ブロックツールの「AFFINGER：バナー風ボックス」を選択します。
③記事内にバナー風ボックスが表示される
バナー風ボックスを選択すると、記事編集画面にバナーが追加されます。
あとはブロックの設定から、
- タイトル
- アイコン
- 背景画像
- リンク
- サイズ
- 枠線
- カラー
などを変更していきます。
最初は設定項目が多く感じるかもしれませんが、すべてを変更する必要はありません。
まずは、タイトル → 背景画像 → リンクの3つから設定してみるのがお勧めです。
AFFINGER7のバナー風ボックスで設定できる項目
バナー風ボックスには、さまざまな設定項目があります。
主な設定項目は次のとおりです。
- タイトル
- アイコン
- 見出しサイズ
- 背景画像
- 画像のぼかし
- リンク先URL
- nofollow
- 新しいページで開く
- 幅
- 高さ
- 下マージン
- 枠線
- 背景色
- タイトル色
- ボーダー色
全部設定しようとすると大変そうに感じるかもしれません。
しかし、基本的なバナーであればタイトル・画像・リンクを設定するだけでも十分です。
慣れてきたらサイズやカラーなどを調整して、自分のサイトに合ったデザインに仕上げていきましょう。
バナー風ボックスのタイトルを設定する
まずは、バナーに表示するタイトルを設定します。
バナー風ボックス内のタイトル部分をクリックし、表示したい文字を入力してください。
タイトルはリンク先がわかる文章にする
バナーのタイトルで大切なのは、クリックするとどのようなページへ移動するのかがわかることです。
たとえば、「こちら」「詳しくはこちら」だけでは、読者にはリンク先の内容がわかりません。
- AFFINGER7の初期設定
- AFFINGER7の使い方
- おすすめWordPressテーマ比較
のように具体的にしましょう。
タイトルを見ただけでリンク先がわかれば、読者も安心してクリックできます。
バナー風ボックスにアイコンを表示する
バナー風ボックスでは、タイトルと一緒にアイコンを表示することもできます。
ブロック設定からアイコンを選択すると、タイトル付近にアイコンを表示できます。
アイコンを使うことで、テキストだけのバナーよりも視覚的にわかりやすくできます。
バナー風ボックスに背景画像を設定する
バナー風ボックスの大きな特徴のひとつが、背景画像を設定できることです。
画像を設定すれば、通常のリンクボックスより目立つバナーを作ることができます。
WordPressに画像をアップロードする
まず、バナーに使いたい画像をWordPressへアップロードします。
WordPress管理画面から、
「メディア」→「新しいメディアファイルを追加」
と進みます。
使用したい画像をアップロードしてください。
すでにメディアライブラリに登録されている画像を使用する場合は、新しくアップロードする必要はありません。
画像URLをコピーする
次に、メディアライブラリから使用したい画像を開きます。
画像の詳細画面に表示されているURLをコピーしてください。
このURLをバナー風ボックスで使用します。
バナー風ボックスに画像URLを設定する
記事編集画面へ戻り、バナー風ボックスを選択します。
画像URLを入力する項目へ、先ほどコピーしたURLを貼り付けます。
正しく設定できれば、バナーの背景に画像が表示されます。
背景画像をぼかすこともできる
写真を背景にした場合、画像によっては文字が読みにくくなることがあります。
そのような場合は「ぼかし」を利用してみましょう。
背景画像を少しぼかすことで、画像よりもタイトルを目立たせやすくなります。
バナーで重要なのは、画像がおしゃれであること以上に、「何が書いてあるのかすぐに読めること」です。
背景画像を設定したら、文字とのコントラストも確認してください。
バナー風ボックスにリンクを設定する
バナーのデザインができたら、次にリンク先を設定します。
バナー風ボックスを選択し、「リンク先URL」の項目へ移動したいページのURLを入力します。
内部リンクとして使う
自分のサイト内の記事へリンクする場合は、その記事のURLを設定します。
バナー風ボックスは通常のテキストリンクよりも目立つので、特に読んでもらいたい関連記事への内部リンクとして使いやすいです。
ただし、すべての関連記事をバナー風ボックスにする必要はありません。
通常の内部リンクはテキストリンクで設置し、「この記事はぜひ読んでもらいたい」というページだけバナー風ボックスで目立たせるとよいでしょう。
AFFINGER7で複数の重要記事をまとめて表示したい場合は、「おすすめ記事一覧」という機能もあります。
バナー風ボックスとの使い分けについては、AFFINGER7でおすすめ記事一覧を設置する方法で詳しく解説しています。
バナー風ボックスのサイズを変更する
バナー風ボックスでは、横幅や高さを変更できます。
背景画像を使用した場合は、バナーのサイズによって印象も大きく変わります。
バナーの横幅を変更する
「幅」の設定から、バナーの横幅を調整できます。
記事本文いっぱいにバナーを表示したい場合は、無理に横幅を指定しなくてもきれいに表示される場合があります。
コンパクトなバナーを作りたい場合などに調整してみましょう。
バナーの高さを変更する
「高さ」を変更すると、バナーの縦方向のサイズを調整できます。
高さを大きくすると背景画像を見せやすくなりますが、大きすぎるバナーは記事を読む邪魔になることがあります。
反対に高さが小さすぎると、タイトルが見づらくなることもあります。
実際の表示を確認しながら調整してください。
バナーの下に余白を設定する
バナー風ボックスでは、下マージンも設定できます。
バナーのすぐ下に文章や別のブロックが配置されていると、余白が少なく窮屈に見える場合があります。
そのような場合は下マージンを調整して、適度な余白を作りましょう。
バナー風ボックスの配置を調整する
バナーの横幅を変更した場合は、配置も確認してみましょう。
記事本文の幅いっぱいに表示する場合は問題ありませんが、小さなバナーを使う場合は、配置によって見え方が変わります。
複数のバナーを使う場合も、
- バナーの幅
- 高さ
- 配置
- 余白
をある程度統一すると、記事全体がきれいに見えます。
バナーごとにサイズや配置を変えすぎないのがポイントです。
バナー風ボックスの枠線を変更する
バナー風ボックスでは、枠線もカスタマイズできます。
特に背景画像を使わず、シンプルなリンクボックスとして使用したい場合に便利です。
枠線の太さを調整する
枠線を少し太くすると、バナーを目立たせることができます。
ただし、太くしすぎるとデザインが重く見えることがあります。
サイト全体とのバランスを見ながら設定しましょう。
バナーの角を丸くする
角の丸みを変更すると、バナーの印象も変わります。
角を丸くするとやわらかいデザインになり、丸みを小さくするとシャープな印象になります。
サイト全体のデザインに合わせるのがおすすめです。
バナー風ボックスの色を変更する
バナー風ボックスでは、タイトル・背景・ボーダーなどのカラーを変更できます。
背景画像を使わなくても、色をうまく設定すれば十分に目立つバナーを作ることができます。
タイトルの文字色を変更する
背景色や背景画像に合わせてタイトルの文字色を設定します。
たとえば、
暗い背景 → 白などの明るい文字
明るい背景 → 黒などの濃い文字
にすると読みやすくなります。
デザイン性よりも、まず文字の読みやすさを優先しましょう。
背景色を変更する
背景色は、自分のサイトのメインカラーやアクセントカラーに合わせると統一感が出ます。
記事ごとに違う色を使うよりも、「おすすめリンクはこの色」「関連記事はこの色」というように、ある程度ルールを決めておくとサイト全体がまとまります。
ボーダー色を変更する
背景色とは別にボーダーの色も設定できます。
たとえば、
白背景＋サイトのメインカラーの枠線
だけでもシンプルで見やすいバナーになります。
必ずしも派手な画像を使う必要はありません。
なお、「リンクではなく、文章や画像などをボックスで囲って目立たせたい」という場合は、バナー風ボックスよりもフリーボックスが適しています。
詳しい使い方は、AFFINGER7のタイトル付きフリーボックスの使い方も参考にしてください。
AFFINGER7のバナー風ボックスおすすめ活用例
ここまでバナー風ボックスの設定方法について解説してきました。
では、実際にはどのような場所で使えばよいのでしょうか？
おすすめの活用方法を紹介します。
関連記事への内部リンク
もっとも使いやすいのが、関連記事へのリンクです。
記事の内容と関連するページを紹介することで、読者も自然に次の記事へ移動できます。
ただし、記事内のすべてのリンクをバナーにすると目立ちすぎてしまいます。
特に重要な関連記事だけバナーにするのがおすすめです。
まとめ記事への誘導
例えば個別の使い方記事から、まとめ記事へ戻す導線にも使えます。
記事下にバナーを設置することで、読者の興味を引き回遊率のアップも見込めます。
カテゴリーページへの誘導
記事数が増えてきたら、カテゴリーページへのリンクとして使用する方法もあります。
関連する記事をまとめて探したい読者に便利です。
おすすめ商品やサービスへの誘導
商品紹介記事やサービス紹介ページへの誘導にも使用できます。
ただし、記事の途中にバナーや広告を設置しすぎると、読者が記事を読みづらくなってしまいます。
まずは読者が知りたい情報をしっかり伝えたうえで、必要なページへ自然に誘導しましょう。
複数の記事を紹介するなら記事一覧ブロックも便利
1つのページを大きく目立たせたい場合はバナー風ボックスが便利です。
一方で、「関連記事を3記事紹介したい」「特定カテゴリーの記事をまとめて見せたい」という場合は、記事一覧ブロックの方が向いていることがあります。
詳しい設定方法は、AFFINGERの記事一覧ブロックの使い方で解説しています。
目的に応じて使い分けてみましょう。
バナー風ボックスを使うときの注意点
バナー風ボックスは便利ですが、設置すればするほど良いというわけではありません。
使い方によっては、逆に記事が読みにくくなることもあります。
バナーを設置しすぎない
記事のあちこちに大きなバナーがあると、読者はどこをクリックすればよいのかわからなくなります。
また、本文よりバナーばかりが目立つ記事になってしまいます。
通常の関連記事はテキストリンクで設置し、特に重要なリンクだけバナー風ボックスにするのがおすすめです。
タイトルを長くしすぎない
バナーに長い文章を入れると、特にスマートフォンで読みづらくなります。
タイトルはできるだけ短く、「どのページへ移動するのか」が伝わる文章にしましょう。
背景画像と文字のコントラストを確認する
背景画像を設定した場合は、タイトルが読みにくくなっていないか確認してください。
写真と文字が同じような色だと、文字が背景に埋もれてしまいます。
必要に応じて、
- 背景画像をぼかす
- 文字色を変更する
- 背景色を調整する
などの対策をしましょう。
スマートフォン表示を確認する
パソコンできれいに表示されていても、スマートフォンではタイトルが改行されたり画像が見切れたりすることがあります。
記事を公開する前に、必ずスマートフォン表示も確認しておきましょう。
現在ではスマートフォンからブログを見る読者も多いため、モバイル表示の確認は大切です。
AFFINGER7のバナー風ボックスと他の機能を使い分けよう
AFFINGER7には、バナー風ボックス以外にも読者を別の記事へ誘導したり、情報をわかりやすく整理したりする機能があります。
目的に応じて使い分けることが大切です。
1ページを目立たせたい
→ バナー風ボックス
特に読んでもらいたい記事やページへ誘導するときに向いています。
複数のおすすめ記事を表示したい
→ おすすめ記事一覧
重要な記事を複数表示したい場合に便利です。
詳しくは、AFFINGER7でおすすめ記事一覧を設置する方法をご覧ください。
複数の記事を一覧表示したい
→ 記事一覧ブロック
関連記事やカテゴリー内の記事をまとめて見せたい場合に便利です。
詳しくは、AFFINGERの記事一覧ブロックの使い方をご覧ください。
文章や画像を囲って目立たせたい
→ タイトル付きフリーボックス
リンクへの誘導ではなく、補足情報やポイントを目立たせたいときに使いやすいです。
詳しくは、AFFINGER7のタイトル付きフリーボックスの使い方をご覧ください。
よくある質問を掲載したい
→ FAQブロック
読者が疑問に感じやすい内容をQ&A形式で整理したい場合に便利です。
詳しい使い方は、AFFINGER7のFAQブロックの使い方で解説しています。
このように、それぞれの機能には向いている使い方があります。
すべてバナー風ボックスで済ませるのではなく、記事の目的に合わせて使い分けることで、より読みやすいページを作ることができます。
AFFINGER7のバナー風ボックスまとめ
今回は、AFFINGER7のバナー風ボックスの使い方について解説しました。
バナー風ボックスは、
- 背景画像を設定できる
- タイトルを表示できる
- リンクを設定できる
- サイズを調整できる
- 枠線や色を変更できる
など、自由度の高いブロックです。
特におすすめなのが、関連記事やまとめ記事への内部リンクとして利用する方法です。
通常のテキストリンクよりも目立つため、「この記事を次に読んでもらいたい」というページへの誘導に向いています。
ただし、バナーを設置しすぎると記事が読みにくくなるので注意しましょう。
通常のテキストリンクとバナー風ボックスを使い分けながら、重要なページへの導線を作ることがポイントです。
また、AFFINGER7にはバナー風ボックス以外にも、FAQ・記事一覧・フリーボックス・タブ・ボタンなど、記事を読みやすくするさまざまな機能があります。
まずはバナー風ボックスを使えるようになったら、ほかのブロックも少しずつ覚えていきましょう。
AFFINGER7の記事作成機能をまとめて確認したい方は、AFFINGER7で記事が読みやすくなる装飾・ブロック活用術も参考にしてください。
AFFINGER7の設定や使い方全体を確認したい方はこちらです。