アフェリエイトで商品紹介をする時の便利ツールについてのご紹介です。ブログサイトでAmazon、楽天市場、Yahooなどの商材を紹介する時は各ASPから発行される自分の固有識別子の「id」をURLリンク内にセットする必要があります。そのように設定しておかないと自分のサイトからの紹介で商品が売れたことにならないですからね。大切な設定です。
それぞれ異なる商品を紹介する時に毎回URLに「id」を埋め込み作業を手動で行うのは現実的ではないので、自動でURLに「id」を付与してくれる便利ツールを使うことが多いでしょう。
以下の2つの方法がメジャーなので検索すると上位に検索結果として出てくると思います。
・カエレバ
・Rinker(リンカー)
この2つのブログパーツも簡単でもちろん使いやすいのですが、個人的にはもしもアフェリエイトの「かんたんリンク」がおススメです。その理由についてこれからご紹介していきます。
目次
かんたんリンクの特徴
メリット
- 商品によってツールの使い分けが必要ない
- Amazonの商品画像がメインで利用できる(楽天市場も可能)
- 画像のスクロール機能が標準でついている
- デザインがキレイ
- レスポンシブ対応(別途設定が必要)
- Amazon・楽天・Yahoo!ショッピングのリンクを同時表示が可能
- もしもアフェリエイトでAmazon・楽天・Yahoo!ショッピングが提携済みであれば、固有idの設定が不要
デメリット
- Amazon・楽天・Yahoo!ショッピング以外のリンクの設定ができない
カエレバやRinker(リンカー)のように、「Amazon」「楽天」「Yahoo!ショッピング」以外の外部リンクは貼れないですが、現在はこの3つのASPから商品を購入する割合が圧倒的に多いと思いますので、問題ないでしょう。
また、リンク先のASPを少数精鋭にすることによりクリック率も上昇します。どうしても他のASPのリンクを貼りたいという方は、カエレバかRinker(リンカー)の利用を検討ください。
はじめに
かんたんリンクはもしもアフェリエイトの申し込みが必要です。もしもアフェリエイトにまだ申し込みされていない方は、こちらから先にもしもアフェリエイトに申し込みをしてください。
もしもアフェリエイトの詳細についてはこちらから もしもアフィリエイトは、アフェリエイトを始める場合に、とりあえず登録しておいた方がいい「アフェリエイトASP」と言っても過言ではありません。今回はそのもしもアフィリエイトの登録方法や申請方法、申請後の ... 続きを見る
【始めにやること】もしもアフィリエイトのはじめ方:登録方法と初期設定
かんたんリンクの使い方
事前準備
もしもアフェリエイトでAmazon、楽天、Yahoo!ショッピングに提携しておく必要があります。
1.かんたんリンクのページにアクセスします。
2.楽天からAmazonで検索した商品のページURL、もしくは検索キーワード(商品の名前)を検索フォームに入力します。
今回は例として「APPLE AirPods Pro」を検索してみます。
3.検索キーワードの検索結果が表示されますので、該当の商品をクリックします。
4.これで完成です。操作はこれだけです。
スマホ表示の時にクリックしやすいようにボタンが縦並びになります。
かんたんリンクの初期設定
2.【任意】ボタンデザイン変更(CSS変更)
レスポンシブ対応の設定
下記のレスポンシブを有効にするためのコードをコピーします。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
利用しているWordPressのテーマによって貼り付ける場所が異なりますので、各テーマにあわせてレスポンシブタグの設定を行ってください。レスポンシブ対応済みのテーマの場合は設定不要な場合もあります。
ボタンデザイン変更(CSS変更)
任意の設定ですがCSSでボタンのデザインを変更することができます。
デフォルトのボタンの色はオレンジ色で統一されていますが、CSSを変更すると以下のようにボタンをカスタマイズすることができます。
またマウスオーバー時にボタンの色を変化させることもできます。
WordPressのCSS設定方法
WordPressテーマのAFFINGER5を使っていますので、AFFINGER5の場合の設定方法をご紹介します。どのWordPressのテーマでも入り口はだいたい同じです。
2.追加CSSにカスタマイズするためのソースコードを貼り付ける必要がありますので、追加CSSを選択します。
3.ソースコードを貼り付けて「公開」ボタンをクリックします。(ソースコードは以下のソースコードをそのまま貼り付ければOKです)
かんたんリンク カスタマイズCSS ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* ------------------------------------- */ /* かんたんリンク カスタマイズ */ /* ------------------------------------- */ /* --------- 外枠 --------- */ div.easyLink-box { border:double #CCC !important; /* 2重線 */ box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25); } /* --- 商品リンク タイトル --- */ p.easyLink-info-name a { color: #3296d2 !important; /* 文字色 */ } /* --- ボタンサイズ --- */ div.easyLink-box div.easyLink-info p.easyLink-info-btn a{ padding:1px !important; } /* --------- ボタン色 --------- */ a.easyLink-info-btn-amazon { background: #f6a306 !important; /* 背景色 */ border: 2px solid #f6a306 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } a.easyLink-info-btn-rakuten { background: #cf4944 !important; /* 背景色 */ border: 2px solid #cf4944 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } a.easyLink-info-btn-yahoo { background: #51a7e8 !important; /* 背景色 */ border: 2px solid #51a7e8 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } /* --- マウスオーバー時のボタン色 --- */ a:hover.easyLink-info-btn-amazon { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #f6a306 !important; /* 文字色 */ } a:hover.easyLink-info-btn-rakuten { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #cf4944 !important; /* 文字色 */ } a:hover.easyLink-info-btn-yahoo { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #51a7e8 !important; /* 文字色 */ } /* --- 最後のボタン下の空白を削除 --- */ div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child { margin-bottom: 0 !important; } /* --- PC以外の時の設定 --- */ @media screen and (max-width: 703px) { div.easyLink-box div.easyLink-img { height: 180px !important; /* 商品画像の大きさを調整 */ } } |
かんたんリンクの設置方法
かんたんリンクで発行したHTMLソースをWordPressに記述する方法です。初期設定は1度設定すれば保存されていますので、あとは設置したい商品を検索して「かんたんリンク」から商品を検索してソースコードを発行したらサイトにソースコードを貼り付けるだけです。
1.「HTMLソースを1行にする(WordPress対応)」にチェックを入れて、ソースコードをコピーします。
2.編集タイプを「テキスト」にして、さきほどコピーしたソースコードを貼り付けます。
これだけです。実際に貼り付けると以下のような表示になります。初期設定さえしてしまえば、あとは簡単に商品紹介のソースコードを簡単に作成することができます。
まとめ
もしもアフェリエイトを登録されている方は「かんたんリンク」を無料で使うことができます。他の無料ブログパーツを使っても、もちろん問題ありませんが、個人的には直感的に使えて便利なのではないかと思っています。
自分が気に入るブログパーツを使うことがいいと思いますが、候補の1つに入れてみてはいかがでしょうか。CSS編集でボタンの色や大きさもカスタマイズできます。
この機会に、自分好みのカスタマイズをしてみましょう。なお、CSSを編集する時は、きちんとバックアップを取ったうえで自己責任で変更をしていただくようにお願いします。