これまでの記事で、amazonアソシエイトやバリューコマースアフィリエイトといったASPとの提携、そして広告の掲示方法まで記載しました。

今回はより発展させて、広告を分かりやすく、綺麗にレイアウトしていきましょう。

今回は「カッテネ」というプラグインをWordPressにインストールして、訪問者さんに分かりやすいデザインにしていきたいと思います。

カッテネのインストール

---

まずは、WordPressにカッテネのプラグインをインストールします。

WordPressのダッシュボードから①プラグイン、②新規追加の順でクリックし、③検索バーに「kattene」と入力します。

カッテネのプラグインが表示されたら、「今すぐインストール」をクリックします。

インストールされると有効化の表示が出るので、クリックします。

インストールが完了すると、プラグインの一覧が表示されますので、カッテネがインストールされ、有効化されていることを確認しましょう。

これでインストール完了です。

非常に簡単ですね！

ショートコードのコピー

---

続いて、広告表示させるためのショートコードを入力していきます。

カッテネに使用するショートコードは開発者さんのホームページで拾えるので、これをコピーするだけです。

開発者さんのホームページからショートコードを転載しておいたので、下記のショートコードをコピーしてもOKです。

ショートコードの貼り付け

---

WordPressの記事編集画面に移り、＋ボタンからショートコードを選択します。

新しいブロックが作成されましたね。

ここにコピーしたショートコードを貼り付けます。

一度、プレビュー表示にして記事を確認してみましょう。

無事、原型が出来上がりました。

あとはショートコードの【】の中を置き換えていけば良いだけなので、非常に簡単です。

商品説明欄の編集

---

貼り付けたショートコードのうち、【】の部分を順番に置き換えていきましょう。

【画像URL】【タイトル】【説明】は商品の説明欄になりますので、amazonや楽天、yahoo!など複数の広告を掲示する場合でも1度入力すれば良い共通項目となっています。

今回は、「今日からはじめて、月10万円稼ぐ アフィリエイトブログ入門講座」という本を紹介する下記のような広告を作成してみたいと思います。

まずは、提携したASPのサイトで広告用のソースコードを取得します。

amazonアソシエイトのマイページにアクセスしてみました。検索バーに商品名を打ち込み、検索をクリックします。

リンク作成をクリックします。

まずは【画像URL】を置き換えてみましょう。

上のタブから、「画像のみ」をクリックします。表示される画像サイズは“中”くらいがちょうど良いと思います。

画像の上で右クリックを押し、画像のURLをコピーします。

コピーしたURLをショートコードの【画像URL】と置き換えます。【】ごと置き換えて下さい。

続いて、【タイトル】を置き換えます。

タイトルは「テキストのみ」タブに切り替えるとコピーできます。商品名に限らず、好きな名前を打ち込んでも構いません。

今回はリンクテキストの文字をコピーして、【タイトル】と置き換えました。

【説明】に入力する内容は、例えば書籍なら出版社や著者、お菓子ならメーカーや定価、入数など商品の説明を書き込むと良いでしょう。

プレビュー画面で確認すると、画像、タイトル、説明がしっかり入っていますね！

amazonアソシエイトからのURLの入力

---

続いて、【メインのURL】と【商品のURL】を置き換えていきます。

デフォルトでは、【メインのURL】、【商品のURL】の下を見ると、Amazon、Kindle、楽天、楽天Koboなどと書かれていますね。このラベルに対応する商品ページのURLを入力していきます。

では、早速AmazonのURLから入力しましょう。

アドレスはamazonアソシエイトのページから取得します。

「テキストのみ」タブを開き、リンクのチェックボタンを押します。ここに示されたアドレスを全てコピーして下さい。

コピーを【メインのURL】と置き換えます。

これでamazonの設定が終了しました！

Kindle用URLの入力

---

書籍なので、Kindle版も載せておきましょう。

amazonアソシエイトの「テキストのみ」のページに戻ります。

赤で囲ったリンクを押します。

amazonの商品ページに飛ぶので、 Kindle版をクリックします。

左上のアソシエイトツールバーから、テキストをクリック

下のチェックボックスで通常URLをチェックし、出てきたURLをコピーします。

WordPressに戻り、【商品のURL】を消して、コピーしたテキストを置き換えればKindleの設定も完了です。

他のASPの画像URLを取得する方法

---

amazonアソシエイトと提携していない場合は、もしもアフィリエイトやバリューコマースアフィリエイトから同様に画像やURLを取得できます。

バリューコマースアフィリエイトならamazonの広告を掲載できますので、amazonアソシエイトとの提携が承認されない場合は利用してみてください。

では、画像URLを取得してみましょう。

広告タブから、提携状況＞提携済みと進みます。

提携済みのプログラムから「Yahoo!ショッピング」を探し、「広告素材を選ぶ」をクリックします。

左側のサイドバーにある広告タイプからMyLinkをチェックして、再検索をクリックします。

画面下側に「広告主のサイトを見る」と表示されるので、これをクリックします。

Yahoo!ショッピングのページに飛ぶので、検索バーに商品名を入力します。

商品をクリックし、開いたページの画像の上で右クリックを押し、画像のURLをコピーします。

これをamazonアソシエイト同様に【画像のURL】に貼り付ければ完了です。

楽天・Yahoo!ショッピングのURLの入力

---

楽天もYahoo!ショッピングもバリューコマースアフィリエイトからURLが取得できます。

amazonアソシエイトと同じように【商品のURL】を置き換えていきますが、バリューコマースアフィリエイトの場合は一手間増えます。

では、商品ページのURLを取得して、【商品のURL】を置き換えていきましょう。

Yahoo!ショッピングの商品ページからURLをコピーします。

バリューコマースアフィリエイトのページに戻り、「コピーしたURLを貼り付ける」の空欄に商品ページのURLを貼り付けます。

広告となるテキストは何でも良いです。この入力したテキスト自体は使用しないので、適当にyahooとでも打ち込んでおきましょう。

入力が終了したら、MyLinkコードを取得します。

「MyLinkコードを取得する」をクリックすると、下記のようにコードが表示されますので、このコードをコピーします。

コピーしたら一度、WordPressの記事入力欄に貼り付けます。

すると、下記のようにリンク付きのテキストが表示されるので、右クリックしてリンクのURLをコピーします。

ここで、yahooと表示されたのは先ほど「広告となるテキスト」のところに入力した文字列が「yahoo」だからです。使用するのはリンクのURLだけです。

コピーしたリンクをカッテネの【商品のURL】と置き換えれば完了です。

デフォルトではYahoo!ショッピングのボタンがない！

---

ちなみに、カッテネのデフォルトのショートコードではYahoo!ショッピングのボタンがありません。

楽天KoboやaudiobookのボタンをYahoo!ショッピングのボタンに置き換えましょう。

方法は簡単。

audiobookのLabelをYahoo!に置き換えるだけ

ただこれだけです。

不要なボタンを削除する方法

---

ボタンの数を減らしたいときは下記のように、「,」から「｝」まで消してみてください。ちょうど青色で囲んでいる部分です。

自分好みにボタンを配置して保存する

---

上記のように毎回ショートコードをコピペしてと言うのは大変なので、WordPressに保存して、いつでも読み出せるようにしておきましょう。

ショートコードの上に点が3つ並んだボタンがあります。

これをクリックすると「再利用ブロックに追加」とあるので、これをクリック。

表示された画面で「カッテネ」と名前を入力し、保存をクリックします。

呼び出しの際には、＋ボタンを押し、開いたメニューの一番下に再利用可能というものがあります。

これを開くと先ほど保存したカッテネが出てくるので、これをクリックするとショートコードが打ち込まれます。

これでいつでもカッテネを呼び出すことが出来ますね。