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 をクリックします。

ブロックエディタでカスタムHTMLを選択
STEP

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

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

ブロックエディタでカスタムHTMLブロックが表示される
STEP

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

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

カスタムHTMLブロックに、広告コードを入力する
STEP

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

HTML をクリックします。

広告が表示された
STEP

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

<div align="center">

</div>
広告を中央揃えする

STEP

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

広告コードを中央揃えする
STEP

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

広告が中央に表示された

これで完了です!

②ボタンリンク の貼り方

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

STEP

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

もしもアフィリエイトのメニュー画面
STEP

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

もしもアフィリエイトで広告リンク取得をクリック
STEP

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

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

もしもアフィリエイトで広告リンクを取得

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

STEP

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

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

ブロックエディタで囲みボタンをクリック

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

STEP

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

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

囲みボタンが表示された

STEP

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

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

広告タグを貼り付ける
STEP

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

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

ボタンの背景色を変更
STEP

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

ボタンが表示された

③バナーリンクの貼り方

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

STEP

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

もしもアフィリエイトのメニュー画面
STEP

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

もしもアフィリエイトで広告リンク取得

STEP

バナー を選択します。

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

ます。

もしもアフィリエイトで、広告コードを取得
STEP

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

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

ブロックエディタで、カスタムHTMLをクリック
STEP

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

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

カスタムHTMLブロックが表示された
STEP

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

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

広告コードを入力する
STEP

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

HTML をクリックします。

広告が表示された
STEP

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

<div align="center">

</div>
広告タグの前後に、センタータグを入力する
STEP

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

広告タグの前後に、センタータグが入力された

STEP

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

中央揃えされた

これで完了です。

Amazonや楽天の商品リンク

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

STEP

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

もしもアフィリエイトのメニュー画面
STEP

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

もしもアフィリエイトで、商品リンクをクリック
STEP

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

もしもアフィリエイトで、商品リンクを作るをクリック
STEP

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

広告タグをコピーする
STEP

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

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

ブロックエディタで、カスタムHTMLをクリック
STEP

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

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

広告タグを入力する
STEP

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

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

広告タグが入力された
STEP

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

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

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

広告が表示されたが、左揃え

STEP

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

<div align="center">

</div>
広告タグの前後に、センタータグを入力する解説

STEP

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

センタータグが入力された
STEP

中央揃えになりました。

中層揃えになった

これで完了です。

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

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

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

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

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

事前に画像をアップロード
STEP
リンクしたいページのURLを取得する

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

楽天内で、リンクしたいページのURLを取得しておく
STEP

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

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

もしもアフィリエイトのメニュー画面
STEP

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

もしもアフィリエイトで、どこでもリンクをクリック
STEP

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

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

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

もしもアフィリエイトで、広告リンクを取得する
STEP

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

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

ブロックエディタで、カスタムHTMLを選択
STEP

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

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

広告タグを入力する
STEP

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

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

広告タグが入力された
STEP

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

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

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

広告が表示されたが、左寄せ

STEP

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

<div align="center">

</div>
広告タグの前後に、センタータグを入力する解説

STEP

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

広告タグの前後に、センタータグが入力された
STEP

中央揃えになりました。

中央表示された

これで完了です。

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

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

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

STEP

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

もしもアフィリエイトで、かんたんリンクをクリック
STEP

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

かんたんリンク、商品検索画面
STEP

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

目的の商品の写真をクリック
STEP

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

広告タグの取得方法

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

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

STEP

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

ブロックエディタで、カスタムHTMLを選択
STEP

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

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

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

広告タグを入力した
STEP

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

プレビュー表示された
STEP

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

かんたんリンクの実際の表示
初回に行ってください!

広告表示をレスポンシブ対応にするために、下記のコードを<head>内に貼り付けます。
(※レスポンシブ対応とは、PCとスマホの幅に合わせて自動的に表示サイズが変わることをいいます)

STEP

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

かんたんリンクをレスポンシブにする方法
STEP

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

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

Cocoon設定ーアクセス解析・認証 をクリック
STEP

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

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

タグをペーストする

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

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

お疲れ様でした!

早速記事を執筆しよう!

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