【詳細版】カエレバのリンクを各個別の商品ページに置き換える方法

記事が役立ったら下部でご評価を！
(まだ評価がありません)
読み込み中...

ある程度理解している方はこちらの簡略版へ

はじめに

ブロガー始めたての皆さん、なんかアフィリエイト調べてカエレバリンク作ったのになんか想像と違って検索後すぐのキーワード検索結果になったことありませんか？

ここでは画像だけでも流し読み出来るように記載しています。

あれ、商品ページ飛ばん！！みたいな感じです。今回はこれの解決方法について自身の備忘録を含めて書いておきたいと思います。なお前提条件として【もしもアフィリエイト】とワードプレス(WordPress) を使用している人が対象になります。

ベースのリンクはカエレバリンクから作成

https://kaereba.com/ カエレバリンクはこちらから。

ではスライド形式でガンガン説明しますね！

ワンポイントコード整形

上記で取得したベースリンクを、下記のHTMLコード自動整理ツールに通します。整形されたコードをテキストエディタ(VSCODEなど)に貼り付けましょう。テキストエディタを利用すると、色合いなどでコードが読みとり易くなります。

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

さて、以下の中で編集が重要なのがヤフー、アマゾン、楽天で、太字にしてあります。

<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="//af.moshimo.com/af/c/click?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502&s_v=b5Rz2P0601xu&url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Felexparts%2Fel-120.html" target="_blank" rel="nofollow" >
            <img src="https://item-shopping.c.yimg.jp/i/e/elexparts_el-120" style="border: none;" />
        </a>
            <img src="//i.moshimo.com/af/i/impression?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502" width="1" height="1" style="border:none;">
    </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="//af.moshimo.com/af/c/click?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502&s_v=b5Rz2P0601xu&url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Felexparts%2Fel-120.html" target="_blank" rel="nofollow" >ソケットレンチセット 46点 スパナ・ソケットレンチ 工具セット 赤 黒
            </a>
                <img src="//i.moshimo.com/af/i/impression?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502" width="1" height="1" style="border:none;">
                <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" rel="nofollow" target="_blank">カエレバ
                    </a>
                </div>
        </div>
        
        <div class="kaerebalink-detail" style="margin-bottom:5px;"> エレックスパーツ
        </div>
        
        <div class="kaerebalink-link1" style="margin-top:10px;">

            <!--ヤフー-->
            <div class="shoplinkyahoo" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">
                <a href="//af.moshimo.com/af/c/click?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D%25E3%2582%25BD%25E3%2582%25B1%25E3%2583%2583%25E3%2583%2588%25E3%2583%25AC%25E3%2583%25B3%25E3%2583%2581%25E3%2582%25BB%25E3%2583%2583%25E3%2583%2588%252046%25E7%2582%25B9" target="_blank" rel="nofollow" >Yahooショッピング
                </a>
                    <img src="//i.moshimo.com/af/i/impression?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502" width="1" height="1" style="border:none;">
            </div>
            
            <!--アマゾン-->
            <div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">
                <a href="//af.moshimo.com/af/c/click?a_id=1394322&p_id=170&pc_id=185&pl_id=4062&s_v=b5Rz2P0601xu&url=https%3A%2F%2Fwww.amazon.co.jp%2Fgp%2Fsearch%3Fkeywords%3D%25E3%2582%25BD%25E3%2582%25B1%25E3%2583%2583%25E3%2583%2588%25E3%2583%25AC%25E3%2583%25B3%25E3%2583%2581%25E3%2582%25BB%25E3%2583%2583%25E3%2583%2588%252046%25E7%2582%25B9%26__mk_ja_JP%3D%25E3%2582%25AB%25E3%2582%25BF%25E3%2582%25AB%25E3%2583%258A" target="_blank" rel="nofollow" >Amazon
                </a>
                    <img src="//i.moshimo.com/af/i/impression?a_id=1394322&p_id=170&pc_id=185&pl_id=4062" width="1" height="1" style="border:none;">
            </div>
            
            <!--楽天-->
            <div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">
                <a href="//af.moshimo.com/af/c/click?a_id=1394320&p_id=54&pc_id=54&pl_id=616&s_v=b5Rz2P0601xu&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E3%2582%25BD%25E3%2582%25B1%25E3%2583%2583%25E3%2583%2588%25E3%2583%25AC%25E3%2583%25B3%25E3%2583%2581%25E3%2582%25BB%25E3%2583%2583%25E3%2583%2588%252046%25E7%2582%25B9%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0" target="_blank" rel="nofollow" >楽天市場
                </a>
                    <img src="//i.moshimo.com/af/i/impression?a_id=1394320&p_id=54&pc_id=54&pl_id=616" width="1" height="1" style="border:none;">
            </div>
        </div>
    </div>
    
    <div class="booklink-footer" style="clear: left">
    </div>
</div>

このリンクをそのまま付けると検索ワードの検索結果ですよね。

ソケットレンチセット 46点スパナ・ソケットレンチ工具セット赤黒

posted with カエレバ

エレックスパーツ

Yahooショッピング

Amazon

楽天市場

商品ページのURL取得

上記のコードの中でヤフーを例えに出すと、太字のURLの部分を書き換える必要があります。

<!--ヤフー-->
<div class="shoplinkyahoo" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">
    <a href="//af.moshimo.com/af/c/click?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D%25E3%2582%25BD%25E3%2582%25B1%25E3%2583%2583%25E3%2583%2588%25E3%2583%25AC%25E3%2583%25B3%25E3%2583%2581%25E3%2582%25BB%25E3%2583%2583%25E3%2583%2588%252046%25E7%2582%25B9" target="_blank" rel="nofollow" >Yahooショッピング
    </a>
        <img src="//i.moshimo.com/af/i/impression?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502" width="1" height="1" style="border:none;">
</div>

ここのhttpsから始まるURLを書き換える必要があります。

ヤフーと楽天はこの、テキストリンク から取り出します。そのコードの中で太字の部分だけを抽出します。

<a href="//af.moshimo.com/af/c/click?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502&s_v=b5Rz2P0601xu&url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Felexparts%2Fel-120.html" target="_blank" rel="nofollow" ><img src="https://item-shopping.c.yimg.jp/i/e/elexparts_el-120"></a><img src="//i.moshimo.com/af/i/impression?a_id=1401611&p_id=1225&pc_id=1925&pl_id=18502" width="1" height="1" style="border:none;">

【https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Felexparts%2Fel-120.html】この部分ですね。

ヤフーと楽天はここのテキストリンクからのURLを書き換えるだけで、商品ページに飛ばしてあげることが出来ます。

自動URL取得シート！

https://docs.google.com/spreadsheets/d/11V1TCWR6oky9JRN9lSFP62RX6Ij-MIvotRcpHZFkviI/edit?usp=sharing

テキストリンクからURL部分をこの取り出し、スプレッドシートの青色の塗潰しに貼り付けると、灰色の塗潰しから該当のURLが抽出できるようにしております。有効利用してください。※編集権限は無いので、関数をコピペして持って行ってください。また、”Amzonだけ”は緑の塗りつぶしを使用してください。

コードの書き換えAmazon

Amazonだけはコードの取得方法が別個になります。

もしもアフィリエイトの【提携中プロモーション】=>【商品リンク】から

紹介したい商品を検索、商品リンクを作る、から、ソースコードを取ります。

https://docs.google.com/spreadsheets/d/11V1TCWR6oky9JRN9lSFP62RX6Ij-MIvotRcpHZFkviI/edit?usp=sharing これを使ってサクッと必要なURLだけ取得しましょう。

<a href="//af.moshimo.com/af/c/click?a_id=1394322&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08BFGD91J" rel="nofollow"><img src="https://images-fe.ssl-images-amazon.com/images/I/51HGcuWkXPL._SL75_.jpg" alt="" style="border: none;" /><br />WORKPRO ソケットレンチセット ラチェットレンチ オフセットタイプ 差込角6.35mm（1/4インチ) 46点組 自動車修理 車メンテナンス ガレージツールセット 作業セット 工具 道具 専用収納ケース付属</a><img src="//i.moshimo.com/af/i/impression?a_id=1394322&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />

後の要領は同じで、url=以降から　rel=”nofollow”　手前までを書き換えます。そうすると以下のリンクの通り、各商品ページに飛びます。