ブログ開設

アフィリエイト広告を見やすく~カッテネの導入~

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

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

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

カッテネのインストール


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

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

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

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

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

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

非常に簡単ですね!

ショートコードのコピー


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

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

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

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


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

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

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

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

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

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

商品説明欄の編集


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

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

"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"

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

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

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

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

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

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

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

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

"image": "https://images-fe.ssl-images-amazon.com/images/I/51%2BrX53tk1L.SL160.jpg",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"

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

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

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

"image": "https://images-fe.ssl-images-amazon.com/images/I/51%2BrX53tk1L.SL160.jpg",
"title": " 今日からはじめて、月10万円稼ぐ アフィリエイトブログ入門講座 ",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"

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

"image": "https://images-fe.ssl-images-amazon.com/images/I/51%2BrX53tk1L.SL160.jpg",
"title": "今日からはじめて、月10万円稼ぐ アフィリエイトブログ入門講座",
"description": " 鈴木 太郎、染谷 昌利 ",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"

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

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


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

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

"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "【商品のURL】",
"label": "Kindle"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天"
},
{
"color": "green",
"url": "【商品のURL】",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "【商品のURL】",
"label": "audiobook"

では、早速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!に置き換えるだけ

"color": "pink",
"url": "【商品のURL】",
"label": "Yahoo!"

ただこれだけです。

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


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

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


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

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

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

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

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

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

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

関連記事

  1. ブログ開設

    PowerPointで「図として保存」すると解像度が落ちる現象を解消

    PowerPointはフローチャートを作ったり、画像を加工したりするの…

  2. ブログ開設

    TCDのWordPressテーマ「MAG」を購入して、サイトをカスタマイズしてみた

    ブログを書いていく中で重要なのはなんと言っても「アクセス数を稼ぐこと」…

  3. ブログ開設

    googleアナリティクスを使って、訪問者の解析をする

    ブログの記事が増えてくると、自分のブログに何人くらいが訪問しているのか…

  4. ブログ開設

    ブログアクセスが激減中。その原因を考えてみました。

    現在のブログへのアクセス状況最近、何故かブログへのアクセス数…

  5. ブログ開設

    アフィリエイトを始めてみる

    ブログを立ち上げて1年が経ちました。現在、月に800人程度の方に見て…

  6. ブログ開設

    アフィリエイトをはじめてみる~パート2 ASPへの登録~

    前回の記事で、アフィリエイトサービスプロバイダー(ASP)の役割を説…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. 登録されている記事はございません。
2021年1月
 123
45678910
11121314151617
18192021222324
25262728293031
  1. コーヒー

    美味珈琲グルメ
  2. 飲食店

    桂花ラーメン【熊本・水道町】
  3. お酒

    シメイブルーを飲んだ感想
  4. 健康

    痩せることを決意しました
  5. お酒

    伊予 賀儀屋 黒ラベル
PAGE TOP