カエレバヨメレバをご存知でしょうか？
これはWordpressなどブログに綺麗に商品リンクを作るためのサービスです。
このページで作成したタグを利用するとカッコよく商品を紹介できます！
こんな感じです！！
しかもWordpressのテーマでJINを利用している人は勝手によりかっこよくしてくれます。（うまくいかない人はこちら ）
しかし楽市場で購入・Amazonで購入ボタンを押してみてください。商品ページではなく、商品を検索したページに飛んでしまいます。
今回はこれを直接商品ページに飛ばす方法を紹介します。（そもそもカエレバヨメレバの使い方がわからない人はこちらのページがわかりやすいです。）
商品検索URLを商品ページのURLに書き換える
結論から説明します。カエレバヨメレバで生成したものは「htmlタグ」と呼びます。
これにはボタンの色やそのボタンを押した時にどのページに移動するかが書かれています。
<div class="kaerebalink-box" style="text-align: left; padding-bottom: 20px; font-size: small; zoom: 1; overflow: hidden;">
<div class="kaerebalink-image" style="float: left; margin: 0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g00q0728.ejtedcb5.g00q0728.ejtee365/kaereba_main_202101161634026266?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16074387%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Fbook%2Fi%2F19794766%2F" target="_blank" rel="noopener"><img style="border: none;" src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1676/9784815601676.jpg?_ex=128x128" /></a></div>
<div class="kaerebalink-info" style="line-height: 120%; zoom: 1; overflow: hidden;">
<div class="kaerebalink-name" style="margin-bottom: 10px; line-height: 120%;">
<a href="https://hb.afl.rakuten.co.jp/hgc/g00q0728.ejtedcb5.g00q0728.ejtee365/kaereba_main_202101161634026266?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16074387%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Fbook%2Fi%2F19794766%2F" target="_blank" rel="noopener">今日からはじめて、月10万円稼ぐ アフィリエイトブログ入門講座 [ 鈴木 太郎 ]</a>
<div class="kaerebalink-powered-date" style="font-size: 8pt; margin-top: 5px; font-family: verdana; line-height: 120%;">posted with <a href="https://kaereba.com" target="_blank" rel="nofollow noopener">カエレバ</a></div>
</div>
<div class="kaerebalink-detail" style="margin-bottom: 5px;"></div>
<div class="kaerebalink-link1" style="margin-top: 10px;">
<div class="shoplinkrakuten" style="display: inline; margin-right: 5px;"><a href="https://hb.afl.rakuten.co.jp/hgc/1e4a0995.bd8b15ff.1e4a0996.42746688/kaereba_main_202101161634026266?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt&m=http%3A%2F%2Fm.rakuten.co.jp%2F" target="_blank" rel="noopener">楽天市場で購入</a></div>
<div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="https://www.amazon.co.jp/gp/search?keywords=%E3%83%96%E3%83%AD%E3%82%B0&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=hirayukinote-22" target="_blank" rel="noopener">Amazonで購入</a></div>
</div>
</div>
<div class="booklink-footer" style="clear: left;"></div>
</div>そしてこのリンクの中ので11行目と12行目の shoplinkrakutenとshoplinkamazonと書かれているここに注目して下さい。
<div class="shoplinkrakuten" style="display: inline; margin-right: 5px;"><a href="https://hb.afl.rakuten.co.jp/hgc/1e4a0995.bd8b15ff.1e4a0996.42746688/kaereba_main_202101161634026266?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt&m=http%3A%2F%2Fm.rakuten.co.jp%2F" target="_blank" rel="noopener">楽天市場で購入</a></div>
<div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="https://www.amazon.co.jp/gp/search?keywords=%E3%83%96%E3%83%AD%E3%82%B0&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=hirayukinote-22" target="_blank" rel="noopener">Amazonで購入</a></div>両方にhref=”http…..”となっています。
ここがボタンを押した時に移動するURLです。
商品リンクを取得してくる
この検索URLを商品リンクに置き換えます。
Amazonの商品コードをGETする
Amazonのアソシエイトコードを取得する記事はたくさんありますが、ここで失敗すると大変なことになるので、改めて一例を書いておきます。
Amazonの左上のアソシエイトツールバーから確実にアソシエイトIDの埋まっているURLを手に入れましょう。
https://kutakuta-nikoniko.xyz/2018/10/10/kaerebayomereba/
Amazonアソシエイト自体が初めての人はいろいろな注意点があるので詳しいブログ記事をぜひ一度読んでください！
楽天のアフィリエイトコードを手に入れる
楽天アフィリエイトも正しくアフィリエイトの管理ページからURLを取得しましょう。
楽天アフィリエイトはAmazonアソシエイトに比べて規約が緩いのであまり気にせずに進んでいきましょう。
hrefの中を商品リンクに入れ替える
小難しく見えるかもしれませんが、文字を入れ替えるだけです。
href=の次に続く「”」この2個点マークから次の2個点マークまでです。（ダブルクォーテーションと言います。）
<div class="shoplinkrakuten" style="display: inline; margin-right: 5px;"><a href="https://hb.afl.rakuten.co.jp/ichiba/18b95867.ee099212.18b95868.a9b47c06/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16074387%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjMwMHgzMDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9" target="_blank" rel="noopener">楽天市場で購入</a></div>
<div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="https://www.amazon.co.jp/%E4%BB%8A%E6%97%A5%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%80%81%E6%9C%8810%E4%B8%87%E5%86%86%E7%A8%BC%E3%81%90-%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88%E3%83%96%E3%83%AD%E3%82%B0%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-%E9%88%B4%E6%9C%A8-%E5%A4%AA%E9%83%8E/dp/4815601674/ref=as_li_ss_tl?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%83%96%E3%83%AD%E3%82%B0&qid=1610783306&sr=8-2&linkCode=ll1&tag=hirayukinote-22&linkId=6712f72ed5fc81eb12fdcbb22554f28f&language=ja_JP" target="_blank" rel="noopener">Amazonで購入</a></div>これを一番最初の大きな塊の中に入れてあげます。
するとのようになります！
ボタンをクリックしてみてください。先ほどのように検索の画面ではなく、商品ページに直接移動しているはずです。
