「楽天市場」や「Amazon」などの商品をまとめて紹介することができる便利なツール「カエレバ」なんですけど、Amazon 側の仕様変更で機能が使えなくなってしまったようなんです。
くま五郎
リョウ
商品を探すのが面倒になってしまうかもしれないんですけど、「カエレバ」で発行されるタグを少しいじってリンクをつければ Amazon のボタンを表記させることができます。
ということで、「カエレバ」で Amazon のボタンも表記する方法を紹介します。
「カエレバ」で Amazon のボタンを表記する
>> https://kaereba.com/
「楽天市場」と「Amazon」はもちろんなんですけど、他にも「Yahoo!ショッピング」や「価格.com」などにも促すことができる「カエレバ」。
「バリューコマース」と「もしもアフィリエイト」を使っている場合も「楽天市場」と「Amazon」の商品を紹介できるので、「カエレバ」を使って報酬を受け取ることができます。
ただし、「ASP」を通すと料率が 1% 〜 2% になってしまうので、8%〜5%のジャンルを紹介する時はちょっともったいないんですよね。
なので、なるべく「楽天アフィリエイト」と「Amazonアソシエイト」をそのまま使いたいところではあります。
では、今回の目的である Amazon のボタンも表記した状態ではどのように表示されるのかってことですよね。
今回紹介する手順であれば、このように表示されます。
どうでしょう？ 特に問題なく、今まで通り Amazon のボタンの表記ができて、リンクもつけられていますよね。
「カエレバ」で発行するタグを少しいじるだけなので、HTML に抵抗がない人はこれから紹介する手順で Amazon のボタンを表示させてみてください。
「カエレバ」を初めて使う人はまず登録
「カエレバ」の利用が初めてという人は、ひとまず楽天アフィリエイトの ID だけを登録します。
「カエレバ」にアクセスしたら、少しスクロールして「ユーザーデーター入力 」を見つけてください。
そうしたら、「楽天アフィリエイト」と書かれている項目の入力欄に、ID を入力してください。
入力する ID が分からない時は、アフィリエイトIDの確認にアクセスするとすぐに分かります。（←開いているブラウザで初めてアクセスする場合にはログインが必要です。）
ID を入力し終わったら、少し下にある「保存」を押せばデータの入力は完了です。
リョウ
紹介する商品を探す
従来であれば、「カエレバ」の検索で商品名を検索すると簡単に関連商品を確認することができました。
しかし仕様変更後は「楽天市場」の商品からしか検索できず、さらに似たような商品情報がたくさん表示されて利用するのが少し困難になってしまいました。
そのため、本家の「楽天市場」と「Amazon」の方で紹介したい商品をある程度の目星をつけてから、「カエレバ」で検索をしてください。
商品を「カエレバ」で検索したら、まずは目星をつけていた商品を「タイトル」や「写真」、「商品詳細ページ」から探してみてください。
そして、該当するものが見つかったら「ブログパーツを作る」に進みます。
デザインなどを選択してタグを生成する
「ブログパーツを作る」に進んだら、次はデザインなどを設定していきましょう。
デザインは、WordPress の有料テーマによってすでに盛り込まれている場合があります。このブログで使われている Sango では、amazlet風-2（cssカスタマイズ用）を選ぶと綺麗に表示されるようになっています。
無料ブログなどでは何も設定されていないことほとんどですが、「カエレバ」をカスタマイズして紹介しているブロガーさんはたくさんいるので、自分好みのデザインを探してみると良いでしょう。
「タイトル」や「画像」の大きさを調節したら、次の表示させる「ボタン」の選択が重要です。
Amazon とありますけど機能していないので無視して、「楽天市場」と「価格コム」にチェックを入れます。すると、表示例にも「楽天市場」と「価格.com」が表示されているはずです。
そうしたら、タグを丸っとコピーして表示させたいブログに貼り付けてください。
Amazon のボタンを表記させる
サイトに貼り付けた「カエレバ」の表示を確認してみると、「楽天市場」と青い「価格.com」のボタンが表示されているはずです。
そうしたら、Amazon から目星をつけていた商品のアフィリエイトリンクをコピーしてきます。もちろん、短縮 URL で大丈夫です。
Amazon のアフィリエイトリンクの探し方が分からないという人は、今さら聞けないAmazonアソシエイト（アフィリエイト）とは？【始め方と注意点】の記事が参考になると思います。
次に、貼り付けた「カエレバ」のタグの中にある「価格.com」のリンク先を Amazon でコピーしたアフィリエイトリンクに書き換えます。
そして、「価格.com」とテキスト表示する部分を「Amazon」と変えます。日本語表記が良ければ、「アマゾン」でもOKです。
ようするに、
<a href="http://kakaku.com/search_results/000000/" target="_blank" >価格.com</a>上記の部分を、下記のように書き換えます。
<a href="https://amzn.to/00000000" target="_blank" >Amazon</a>こうすると、Amazon のボタンとして使えるようになります。Amazon はリンクが発行されるだけなので、自分の好きなようにリンクを作ることが許されているんですよね。
そのため、このような形でリンクを作ってあげるのは問題ないです。
ただ、このままではボタンが青い状態になるので、Amazon 色に変更する必要があります。これは、「カエレバ」の仕様を利用させてもらいます。
先ほどの a 要素の前にこんな部分があります。
<div class="shoplinkkakakucom">これがボタンのデザインを指定している部分になるので、文字を少しいじります。
<div class="shoplinkamazon">普段から CSS などをいじっている人なら容易に予想できると思いますが、kakakukom という部分を amazon にするとオレンジ色のボタンに切り替わります。
これで、「楽天市場」と「Amazon」のボタンを同時に表示させた商品の紹介を表示できます。
さいごに
対処法として「もしもアフィリエイト」を使ったやり方などを紹介されている記事も見かけますが、紹介料率のことなどを考えるとこちらの方がベターな感じがします。
「カエレバ」の作者は、また以前のように使えるように何かと策を考えてらっしゃると思います。それまでは、別の方法を使って商品の紹介などをするしかないですからね。
「カエレバ」で Amazon のボタンも表示させたいけど、どうしたら良いのか分からなかった方の参考になれば幸いです。