【入門編】アフィリエイト推薦ボックスを30分で設置する方法

アフィリエイト

ブログにアフィリエイトリンクを貼り始めたとき、私も最初は「バナーをそのまま貼ればいいんじゃないの?」と思っていました。

でも、実際にやってみると「バナーだけだとクリックされない」「読者に怪しまれてしまう」という壁にぶつかりました。

そこでたどり着いたのが「推薦ボックス」という形式です。これに変えてから、アフィリエイトリンクへの自然な誘導ができるようになりました。

この記事では、推薦ボックスとは何か・なぜ使うのか、そして実際に設置するまでの手順を初心者向けに解説します。

推薦ボックスとは?普通のバナーと何が違うの?🤔

ID1569 図解1

推薦ボックスとは、「ブロガーが実際に使っているサービスや商品を、丁寧に紹介するためのカード型ブロック」です。

普通のアフィリエイトバナーは「広告画像+リンク」だけですが、推薦ボックスには次の要素が含まれています。

  • ラベル(「なべちゃんが実際に使っています」など)
  • サービス名
  • バナー画像(アフィリエイトリンク付き)
  • 特徴のチェックリスト
  • CTAボタン(「公式サイトを見る」など)

完成するとこんな見た目になります👇

推薦ボックスの完成形(ConoHa WING)
推薦ボックスの完成形(ConoHa WING)
推薦ボックスの完成形(もしもアフィリエイト)
推薦ボックスの完成形(もしもアフィリエイト)

普通のバナーと比べて「本当に使っている人が紹介している」という信頼感が伝わりやすく、読者がクリックしやすくなります。

設置する前に必要なもの📋

ID1569 図解2

推薦ボックスを設置するには、次の2つが必要です。

  • アフィリエイトサービス(ASP)のアカウント:A8.netまたはもしもアフィリエイトに登録して、紹介したいサービスの提携が承認されていること
  • WordPressのカスタムHTMLブロックが使えること:Gutenbergエディタで「カスタムHTML」ブロックを追加できれば設置できます

A8.netへの申請・承認がまだの方は、まずA8.netで最初の報酬を得るまでの全手順をご覧ください。

STEP1:アフィリエイトに申請して承認してもらう📋

ID1569 図解3

A8.netにログインしたら、紹介したいサービスのプログラムに申請します。

申請してから承認されるまでの時間はサービスによって異なります。

  • 即時提携:申請と同時に承認される(A8.net自体、ConoHa WINGなど)
  • 審査あり:数日〜1週間程度かかる場合もある

承認メールが届いたら次のSTEPへ進みます。

STEP2:バナーHTMLをコピーする⚙️

ID1569 図解4

A8.netの管理画面で「参加中プログラム」→「広告リンク」をクリックします。

バナーの一覧が表示されたら、300×250サイズの「素材をコピーする」ボタンをクリックします。クリップボードにHTMLがコピーされます。

コピーされるHTMLはこんな形式です👇

<a href=”https://px.a8.net/svt/ejp?a8mat=XXXX” rel=”nofollow”> <img border=”0″ width=”300″ height=”250″ alt=”” src=”https://www23.a8.net/svt/bgt?…”></a> <img border=”0″ width=”1″ height=”1″ src=”https://www11.a8.net/0.gif?a8mat=XXXX” alt=””>

このHTMLをメモしておき、次のSTEPで使います。

STEP3:WordPressに推薦ボックスを設置する🖥️

ID1569 図解5

WordPressの記事編集画面を開き、アフィリエイトリンクを設置したい箇所に「カスタムHTML」ブロックを追加します。

以下のHTMLテンプレートをコピーして、カスタムHTMLブロックに貼り付けます。バナー画像URLアフィリエイトリンクの部分をSTEP2でコピーした内容に書き換えてください。

<div class=”recommend-box”> <span class=”recommend-box-label”>なべちゃんが実際に使っています</span> <div class=”recommend-box-title”>サービス名</div> <div class=”recommend-box-banner”> <a href=”アフィリエイトリンク” rel=”nofollow” target=”_blank”> <img src=”バナー画像URL” alt=”サービス名” style=”border:none; max-width:100%; height:auto;” /> </a> </div> <ul class=”recommend-box-list”> <li>✓ 特徴1</li> <li>✓ 特徴2</li> <li>✓ 特徴3</li> </ul> <a href=”アフィリエイトリンク” class=”recommend-box-btn” target=”_blank” rel=”nofollow noopener”>公式サイトを見る →</a> <span class=”recommend-box-pr”>(PR)</span> </div>

書き換えるポイントは3つです。

  • サービス名:紹介するサービスの名前に変更
  • アフィリエイトリンク:STEPで取得したhref部分のURL
  • バナー画像URL:STEPで取得したimg src部分のURL

特徴のチェックリスト(部分)は、そのサービスを実際に使って感じたメリットを3つ書くと説得力が増します。

まとめ✨

推薦ボックスは、アフィリエイトリンクをただ貼るだけでなく「なぜこのサービスを勧めるのか」を読者に伝えられるのが最大のメリットです。

最初は「HTMLの編集なんて難しそう」と思うかもしれませんが、テンプレートをコピーして3か所書き換えるだけなので、30分もあれば設置できます。

ぜひ1つのサービスから試してみてください。


私がこのブログで65記事分の推薦ボックスをAIと一括整備した実録はこちら👇

【実践編・推薦ボックス】65記事のアフィリエイト推薦ボックスをAIと一括整備した話【実録】

ボックスを設置できたら、次は「どうやって月1万円稼ぐか」の全体像も確認しておくと、ボックスをどこに配置すべきか判断しやすくなります。
副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】

推薦ボックスを設置できたら、A8.netの新規承認サービスを記事に一括挿入する方法も参考にどうぞ。
アフィリエイト3サービス、AIに頼んで7記事に一括挿入してもらった話

コメント

タイトルとURLをコピーしました