IT

カエレバヨメレバで商品ページに直接飛ばす方法

カエレバヨメレバをご存知でしょうか?

これは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&amp;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&amp;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&amp;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&amp;__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;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&amp;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&amp;__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;tag=hirayukinote-22" target="_blank" rel="noopener">Amazonで購入</a></div>

両方にhref=”http…..”となっています。

ここがボタンを押した時に移動するURLです。

商品リンクを取得してくる

この検索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>

これを一番最初の大きな塊の中に入れてあげます。

 

するとのようになります!

ボタンをクリックしてみてください。先ほどのように検索の画面ではなく、商品ページに直接移動しているはずです。
ABOUT ME
mikanlemon
mikanlemon
ズボラとガリ勉が持ちつ持たれつ暮らしてます/《おてんば娘》を育てているので、主に育児の悩み解決策やおすすめグッズを紹介してます/仕事の知識を活かした美容やIT関連記事、引っ越し族ゆえの移住関連記事など/きっとあなたの役にも立てるはず・・・!