MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

アフィリエイトリンク(広告)の貼り方|ブロックエディタ Cocoon編

以下の「6種類のアフィリエイトリンク」の貼り方を説明しているよ。

  1. テキストリンク
  2. ボタンリンク
  3. バナーリンク
  4. Amazonや楽天の商品リンク
  5. 独自の画像からの商品リンク
  6. かんたんリンク(三社一括)

もしもアフィリエイト」の管理画面を使って解説します。

目次

アフィリエイト広告を貼るための事前準備

  • もしもアフィリエイトに登録済みであること
    もしもアフィリエイトの管理画面使って、アフィリエイト広告を貼る方法について説明します。まだ登録していない方は、こちらから登録を済ませてください。
  • Amazonの審査に合格していること
    ここでは「もしもアフィリエイト経由」ですでに「Amazon」と提携済みであることを前提に解説します(かんたんリンク系(三社一括)の場合)

アフィリエイト広告の種類

アフィリエイト広告には、下記のような種類があります(代表的なものを記しています)

  1. テキストリンク
  2. ボタンリンク
  3. バナーリンク
  4. Amazonや楽天の商品リンク
  5. 独自の画像からの商品リンク
  6. かんたんリンク系(三社一括)

①テキストリンク

こちらはテキスト形式の広告になります。

②ボタンリンク

テキストリンクと同じソースを使用して、ボタンリンクを作ることができます。「囲みボタン」ブロックを使用します。

③バナーリンク

こちらはバナーリンク。「広告主の提供した画像」で、「決まった場所」にリンクが貼られています。

Amazonや楽天の商品リンク

Amazonや楽天などの大型店舗の場合、「目的の商品へ」直接アフィリエイトリンクを貼ることができます。「店側が提供する商品写真」を使用できます。

独自の画像(テキスト)からの商品リンク

独自に作成した画像(テキスト)」を使って、「目的の商品」に直接リンクを貼ることができます。使用する画像は著作権侵害のないものを使用してください。

⑥かんたんリンク系(三社一括)

Amazon、楽天、Yahooのよく売れる御三家のリンクを一括に作れる機能です。

ここでは、「もしもアフィリエイト」の「かんたんリンク」という機能を使用して説明します。同様の機能を提供しているASPは、他にバリューコマースがあります(ただし、もしものほうが報酬率が高いのでオススメ)。

ASPの機能を使わずに、WordPressのプラグインで同様のリンクを作成することもできます(Rinkerカエレバなどが有名)。


上記で説明したすべてのリンクについて、貼り方を説明していきます。

①テキストリンクの貼り方

テキストリンクの貼り方を解説します。

STEP

もしもアフィリエイトの管理画面で、プロモーション検索 > 提携中のプロモーション をクリックします。

STEP

提携中の案件を選択し(ここでは楽天)、広告リンク取得 をクリックします。

STEP

テキスト をクリックします。

表示したい広告を選択して、ソース部分をすべてコピーします。

次はこれをブロックエディタ上に貼り付けましょう。

STEP

WordPressの投稿ページに移動します。

+ ボタンをクリックし、下に移動して カスタムHTML をクリックします。

STEP

カスタムHTMLブロックが表示されます。

枠内に、先ほどコピーした広告タグを貼り付けます。

STEP

広告タグが入力されました。

プレビュー をクリックして表示を確認します。

STEP

テキストが表示されましたが、現在「左揃え」になっています。「中央揃え」にしたいので、HTML表示に戻しましょう。

HTML をクリックします。

STEP

中央揃えにするには、「最初」と「最後」にコードを追加する必要があります。以下のコードをコピペしてください。

<div align="center">

</div>

STEP

「最初」と「最後」にコードを追加したら、プレビューをクリックします。

STEP

テキストが中央に表示されました。

これで完了です!

②ボタンリンク の貼り方

テキストリンクとボタンリンクの貼り方は、以下のとおりです。

STEP

もしもアフィリエイトの管理画面で、プロモーション検索 > 提携中のプロモーション をクリックします。

STEP

提携中の案件を選択し(ここでは楽天)、広告リンク取得 をクリックします。

STEP

テキスト をクリックします。

表示したい広告を選択して、ソース部分をすべてコピーします。

次はこれをブロックエディタ上に貼り付けましょう。

STEP

続けてボタンリンクをを作成しましょう。

左側のブロックメニューから 囲みボタン を選択します。

(通常の「ボタン」と「囲みボタン」の違いは、他の記事で紹介しています

STEP

囲みボタンのブロックが表示されました。

歯車マークをクリックして、右メニューを表示します。

STEP

先ほどと同じ広告コードを、「リンクタグ・ショートコード」に貼り付けます。

サイズ」オプションで、大・中・小の中からサイズを選べます。
円形にする」をオンにすると、ボタンが丸くなります。
中央配置ボタンを押すと、オブジェクトを中央に配置できます。

STEP

ボタンが中央配置されました。

背景色」「文字色」「ボーダー色」を選べます。

STEP

実際に表示すると以下のようになります。オレンジ色の枠は表示されません。

③バナーリンクの貼り方

バナー広告の貼り方の手順は以下の通りです。

STEP

もしもアフィリエイトの管理画面で、プロモーション検索 > 提携中のプロモーション をクリックします。

STEP

広告リンク取得 をクリックします。

STEP

バナー を選択します。

表示したい広告を選択して、ソース部分をすべてコピーします。

ます。

STEP

WordPressの投稿ページに移動します。

+ ボタンをクリックし、下に移動して カスタムHTML をクリックします。

STEP

カスタムHTMLブロックが表示されます。

枠内に、先ほどコピーした広告タグを貼り付けます。

STEP

広告コードが入力されました。

プレビューをクリックして、実際の表示を確認しましょう。

STEP

広告が表示されましたが、左揃えになっています。中央揃するように設定しましょう。

HTML をクリックします。

STEP

中央揃えにするには、「最初」と「最後」にコードを追加する必要があります。以下のコードをコピペしてください。

<div align="center">

</div>
STEP

最初と最後にコードが追加されました。プレビュー で実際の表示を確認してみましょう。

STEP

バナー広告が中央揃えで表示されました。

これで完了です。

Amazonや楽天の商品リンク

ここでは、楽天やAmazonの商品リンクを配置する方法を紹介します。

STEP

もしもアフィリエイトの管理画面で、プロモーション検索 > 提携中のプロモーション をクリックします。

STEP

商品リンク をクリックします。

STEP

目的の商品を検索し、商品リンクを作る をクリックします。

STEP

種別」、「画像」、「画像サイズ」を選択し、ソースをすべてコピーします。

STEP

WordPressの投稿ページに移動します。

+ ボタンをクリックし、下に移動して カスタムHTML をクリックします。

STEP

カスタムHTMLブロックが表示されます。

枠内に、先ほどコピーした広告タグを貼り付けます。

STEP

広告コードが入力されました。

プレビュー をクリックして実際の表示を確認します。

STEP

プレビューが表示されました。

現在「左揃え」になっているので、「中央揃え」に変更しましょう。

HTML をクリックして、コード表示に戻します。

STEP

中央揃えにするには、「最初」と「最後」にコードを追加する必要があります。以下のコードをコピペしてください。

<div align="center">

</div>

STEP

最初と最後にコードが追加されました。プレビュー で実際の表示を確認してみましょう。

STEP

中央揃えになりました。

これで完了です。

独自の画像からの商品リンク

次は、独自に用意した画像に、アフィリエイトリンクを貼る方法を説明します。

広告を作る前に、下記の事前準備をしておいてください。

事前準備
STEP
独自画像のURLを取得する

使いたい画像を事前にアップロードし、URLを取得しておきます。あとで広告を作成する際に必要になりますので、メモ帳に貼り付けておいてください。

STEP
リンクしたいページのURLを取得する

事前にASP内の商品検索機能を利用するか、直接ショップ内で検索して、紹介したい商品のページのURLを取得しておきます。

STEP

事前準備が終わったら、広告を作ります。

もしもアフィリエイトの管理画面で、プロモーション検索 > 提携中のプロモーション をクリックします。

STEP

提携中の案件を選択し(ここでは楽天)、どこでもリンク をクリックします。

STEP

リンク先URL」に、目的の商品のURLを貼り付けます。

リンク種別」では、今回は 画像リンク を選択します。

画像URL」には、先ほどアップロードした画像のURLを貼り付けます。

STEP

WordPressの投稿ページに移動します。

+ ボタンをクリックし、下に移動して カスタムHTML をクリックします。

STEP

カスタムHTMLブロックが表示されます。

枠内に、先ほどコピーした広告タグを貼り付けます。

STEP

広告コードが入力されました。

プレビュー をクリックして実際の表示を確認します。

STEP

プレビューが表示されました。

現在「左揃え」になっているので、「中央揃え」に変更しましょう。

HTML をクリックして、コード表示に戻します。

STEP

中央揃えにするには、「最初」と「最後」にコードを追加する必要があります。以下のコードをコピペしてください。

<div align="center">

</div>

STEP

最初と最後にコードが追加されました。プレビューで実際の表示を確認してみましょう。

STEP

中央揃えになりました。

これで完了です。

⑥かんたんリンク(もしもアフィリエイト)

次に、「Amazon」、「楽天」、「Yahooショッピング」の売れやすい御三家のリンクを一度に作れる、優れものの「かんたんリンク」を紹介します。これは、「もしもアフィリエイト」独自の機能で、もしもアフィリエイト経由でしか使えません。

早速作成していきましょう。

STEP

もしもアフィリエイトの管理画面にアクセスし、かんたんリンクをクリックします。

STEP

目的の商品を検索します。

STEP

目的の商品が見つかったら、写真上をクリックします。

STEP

三社一括のリンクができました。

ソースコードをコピーする前に、「HTMLソースを1行にする」にチェックを入れます。

全文コピー をクリックします。

STEP

ブロックエディタで カスタムHTML をクリックします。

STEP

カスタムHTMLブロックが表示されます。

「HTMLを入力…」と表示されている部分に、ソースコードを貼り付けます。

プレビュー をクリックします。

STEP

三社一括リンクがプレビュー表示されました。

STEP

実際の表示は以下の通りです。

初回に行ってください!

広告表示をレスポンシブ対応にするために、下記のコードを<head>内に貼り付けます。
(※レスポンシブ対応とは、PCとスマホの幅に合わせてに表示を切り替えることです)

STEP

レスポンシブを有効にするために~、<head>内に…」の下にあるコード行をコピーします。

STEP

WordPressの管理画面で Cocoon設定 をクリックします。

アクセス解析・認証 タブをクリックします。下に移動します。

STEP

ヘッド用コード」の部分に、タグをペーストします。

変更を保存 をクリックします。

レスポンシブ対応タグが貼り付けられました。

これで一通りブロックエディタの学習が終了しました。

お疲れ様でした!

早速記事を執筆しよう!

よかったらシェアしてね!
目次
閉じる