50のてならい

50のてならい

50になってからネットについて色々と検証していくブログです。

カエレバの登録と商品紹介の方法

  • f:id:jr0704japan:20170518110851j:plain

  • 商品を紹介する場合、楽天とアマゾンの両方で一度に紹介出来たら便利だと思いませんか?

    楽天ポイントを貯めている人は楽天で買い物がしたいですし、Amazon会員の人はAmazonで買い物がしたいですよね。

    そこで、利用者のニーズを考えてカエレバに登録をしてみました。そのブログパーツのカスタマイズについての紹介をしたいと思います。

  • カエレバでアマゾンと楽天の連携リンクを作成する

    カエレバ の説明ですが、商品紹介用のブログパーツです。

    これについては、カエレバ のサイトにある、開発者:かん吉さんのコメントで良くわかります。

    「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

    楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

    出典 http://kaereba.com/

    商品リンクの見本

    私が目指す商品リンクは、以下のような感じで代表的なAmazon楽天市場・Yahooショッピングが網羅されているものです。わかりやすくて、スマートでカッコいいですね!

    カエレバでは、もしもアフィリエイトに登録していれば、もしもアフィリエイト経由で楽天とアマゾンの商品を紹介することが簡単に出来ます。

    カエレバ ユーザーデーター入力の方法

    カエレバを使用するには、サイトに行ってユーザーデーター入力の作業が必要です。

    カエレバでのユーザーデーター入力の登録方法ですが、結構手こずりました。

    カエレバで、楽天AmazonとYahooの商品をもしもアフィリエイト経由で紹介する場合にはそれぞれのもしもIDが必要となります。

    私の場合には、もしもアフィリエイトで提携済みだった楽天のもしもIDは、すぐにわかりましたので、そちらを先に入力しました。

    その間にもしもアフィリエイトからAmazonとの提携申請をしていました。

    その後、Yahooショップピングのリンクも作成したかったので、バリューコマーズアフィリエイトにも登録しました。

    それらを順番に紹介していきます。

    1. 楽天のもしもIDの取得
    2. AmazonのもしもIDの取得
    3. YahooショッピングのIDの取得

    楽天のもしもIDの取得

    カエレバのユーザーデーター入力の、楽天の画面を切り取ってます。

    楽天サービスのIDはご自身が楽天を利用する際のIDです。

     楽天サービスを利用していない方は、楽天会員に登録して下さい。

    並立リンク用というのがわかりにくかったので説明します。

    もしももわかりにくかったので説明します。

    並立リンク用の探し方

    まずは、楽天アフィリエイトの会員になります。

    楽天アフィリエイトはブログの審査とかないので、楽天会員ならばすぐに利用可能です。

     楽天アフィリエイトトップページの右上部にある「ページのURLを入力」の欄に以下のアドレスをコピーして貼り付けます。

    http://search.rakuten.co.jp/search/mall/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0/-/

    カエレバの解説にあった上記のURLですが、ちなみにガンダムでした!(^^)!

    ② 貼り付けたら、右側の「リンク作成」をクリックします。

    「リンク作成」をクリックすると、次の画面の下側にソースをコピーして掲載するのソースが表示されていると思います。

    その中の「http://hb.afl.rakuten.co.jp/hgc/ ~ /?pc=」の「~」部分をコピーして、ユーザーデーター入力の欄に貼り付けてください。

    字が小さくて見えずらい場合には、画面表示を大きくして見ましょう。

    拡大してみますね!  1行目の部分にあります。

    <a href=”https://hb.afl.rakuten.co.jp/hgc/****c*ae.*c*****.*aee**fa.***ecff*/?

    上は、数字の部分を*印にしてます。アンダーラインの部分の文字をコピーして、ユーザーデータ入力に貼り付けて下さい。

    もしものa_idの探し方

    もしもアフィエイトにログインして、楽天市場 商品購入」と入力して検索をクリックして下さい。

    2件表示されました。

    下の楽天市場 商品購入」広告リンク取得をクリックします

    ここからです、この広告リンク内のa_id=******の 6桁の数字を探しましょう。

    この6桁の数字をコピーして、そのままカエレバのユーザーフォームに貼り付けましょう。

    AmazonのもしもIDの取得

    カエレバのユーザーデーター入力の、Amazonの画面を切り取ってます。

    ① アマゾンアソシエイトにログインした場合右上にあります。

    アソシエイトID:******-22  となっています。(***は貴方が決めたidとなります)

    ② もしもアフィエイトにログインして、amazon.co.jpと入力して検索をクリックして下さい。

    1件表示されました。

    下のAmazon.co.jp」商品購入」広告リンク取得をクリックします

    ここからです、この広告リンク内のa_id=******の 6桁の数字を探しましょう。

    この6桁の数字をコピーして、そのままカエレバのユーザーデーターに貼り付けましょう。

    Yahoo!ショッピングのもしもIDの取得

    カエレバのユーザーデーター入力の、Yahoo!ショッピングの画面を切り取ってます。

    カエレバにも、調べ方は載っていたのですが、画面が変わっており解りにくかったので私がやった調べ方の詳細を書きます。

    バリューコマース アフィリエイトのサイトに行って会員登録して下さい。

    会員登録出来たら、バリューコマースアフィリエイトにログインしてください。

    下のような画面になります。

    右下のほうにあるYahoo! ショッピング」のバーナーをクリックしてください。

    バリューコマースアフィリエイトは、Yahoo!ショッピングと最初から提携されています。

    「広告作成」をクリックします。

    「広告作成」をクリックします。

    サイトは審査中でしたが広告作成は出来ました。

    ここからです、この広告タグのsid=*******の 7桁の数字を探しましょう。

    その後ろにpid=*********の9桁の数字を探しましょう。

    このsidとpid桁の数字をコピーして、そのままユーザーデーターに貼り付けましょう。

    カエレバのユーザーデータ入力フォームを完成させる

    楽天・アマゾン・Yahooのa_idを入力して完成させます。

    全ての項目を調べられたら、「保存」をクリックして下さい。

    カエレバのhpに保存したデータの移動方法が載ってました。

    他のブラウザ、他のパソコンにデーターを移動したい方は、登録データーバックアップ&バックアップデーター復活をご利用ください

    出典 http://kaereba.com/#userform この機能は、便利ですね。かん吉さんありがとうございます!

     

    追記です。カエレバで「AmazonアソシエイトID」や「楽天ID」が登録されている場合、「もしもアフィリエイトID」が優先されてリンクされるようです。
    「もしもアフィリエイト」を利用しなくなったら、「もしもアフィリエイトID」をカエレバのユーザーデーター入力から削除すればOKです。

    カエレバでのブログパーツ作成方法

    ① 商品キーワードに入力してクリック

    ② ブログパーツを作る」をクリック

     図のように【amazlet風-2(cssカスタマイズ用)】を選択してください。

    ようやく、商品リンクが出来ました!

    この、スタイルにするには、スタイルシートCSSを貼り付けてカスタマイズしないとこの形にならないので次の項目で紹介します。

    スタイルシートを追加して希望のブログパーツにする

    カエレバの作者のかん吉さんのページに、カエレバのカスタマイズの方法がのっています。

    Amazlet風-2(cssカスタマイズ用)というデザインに、外部CSSを当てることで、ヨメレバ・カエレバ系サービスのデザインをカスタマイズできます。

    出典ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ

    かん吉さんのHPに、ユーザーの方々が色々とカスタマイズされたカエレバのブログパーツがありますので、自分の好みの表示方法で使われたら良いと思います。

    私の場合には、主婦ライフのちゅんこさんの作成されたブログバーツを使わせて貰ってます。

    引用 主婦ライフ

    WordPressの場合には、主婦ライフの中の二つのCSSを外観→デザイン→スタイルシート (style.css)にコピーして貼り付けました。

      /*--------------------------------------
    ヨメレバ・カエレバ
    --------------------------------------*/
    .booklink-box, .kaerebalink-box{
    width:85%;
    margin: 1em 0 1em;
    padding: 5%;
    border:double #d2d7e6;
    overflow: hidden;
    font-size:small;
    border-radius:2px;
    }
    .booklink-image, .kaerebalink-image{
    margin:0 0 15px 0;
    }
    .booklink-image img, .kaerebalink-image img{
    display:block;
    margin:0 auto;
    text-align:center;
    }
    .booklink-info, .kaerebalink-info{
    text-align:center;
    line-height:120%;
    overflow: hidden;
    }
    .booklink-name, .kaerebalink-name{
    font-size:16px;
    margin-bottom:14px;
    line-height:1.2em;
    }
    .booklink-powered-date, .kaerebalink-powered-date{
    font-size:8pt;
         margin-top:10px;
    line-height:120%;
    }
    .booklink-powered-date, .kaerebalink-detail{
    margin-bottom:15px;
    }
    .booklink-link2, .kaerebalink-link1{
    margin-top:20px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom{
    width:90%;
    height:15px;
    overflow:hidden;
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    margin:0 auto 5px auto;
    padding:10px 0px;
    text-align:center;
    }
    .shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color:#f6f6f6;
    }
    .shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active{
    position:relative;
    top:1px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a{
    display:block;
    cursor:pointer;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    }
    .shoplinkamazon a{
    color:#FF9901;
    }
    .shoplinkrakuten a{
    color:#c20004;
    }
    .shoplinkkindle a{
    color:#007dcd;
    }
    .shoplinkyahoo a{
    color:#7b0099;
    }
    .booklink-footer{
    clear:left;
    }
    /*--------------------------------------
    780px ヨメレバ・カエレバ
    --------------------------------------*/
    .booklink-box, .kaerebalink-box{
    width: 90%;
    margin:20px auto;
    padding:20px;
    }
    .booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    }
    .booklink-info, .kaerebalink-info{
    margin:0;
    text-align:left;
    }
    .booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5;
    }
    .booklink-link2, .kaerebalink-link1{
    margin-top:10px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
    float:left;
    width:30%;
    margin:15px 1% 0 auto;
    padding:10px 0px;
    }
    .shoplinkyahoo a{
    font-size:10px;

    実際のCSSですが、私が作成したものではないので、主婦ライフのHPを参考にされて下さい。

    カエレバ・ヨメレバにも対応したすぐれものです。

    ちゅんこさんは、レスポンシブ対応のテーマであるSTINGER5を使用されていますので、記載場所が2箇所になっています。私の使用しているsimplicityのスタイルシートには、自由に書き込めるタイプになっているので、2個のcssを連続して貼り付けてokでした。
    スタイルシートの書き換えの場合には、かならずバックアップを作成してから実行して下さい。

     

    iPhoneでの表示の為に

    実は、私の使用しているiPhoneでは上手く表示出来ていなかったのです。

    そこで、調べてみると私の使用しているテーマのsimplcityではmobile.cssに追加しないと上手く表示出来ないことがわかりました。

    参考にさせて貰ったのはアラサー女子さんのサイトです。ありがとうございます。

    色々と面白そうな記事があってお勧めサイトです!

    pontopi.com

    /*--------------------------------------
    ヨメレバ・カエレバ
    --------------------------------------*/
    .booklink-box, .kaerebalink-box{
    width:85%;
    margin: 1em 0 1em;
    padding: 5%;
    border:double #d2d7e6;
    overflow: hidden;
    font-size:small;
    border-radius:2px;
    }
    .booklink-image, .kaerebalink-image{
    margin:0 0 15px 0;
    }
    .booklink-image img, .kaerebalink-image img{
    display:block;
    margin:0 auto;
    text-align:center;
    }
    .booklink-info, .kaerebalink-info{
    text-align:center;
    line-height:120%;
    overflow: hidden;
    }
    .booklink-name, .kaerebalink-name{
    font-size:16px;
    margin-bottom:14px;
    line-height:1.2em;
    }
    .booklink-powered-date, .kaerebalink-powered-date{
    font-size:8pt;
         margin-top:10px;
    line-height:120%;
    }
    .booklink-powered-date, .kaerebalink-detail{
    margin-bottom:15px;
    }
    .booklink-link2, .kaerebalink-link1{
    margin-top:20px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom{
    width:90%;
    height:15px;
    overflow:hidden;
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    margin:0 auto 5px auto;
    padding:10px 0px;
    text-align:center;
    }
    .shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color:#f6f6f6;
    }
    .shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active{
    position:relative;
    top:1px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a{
    display:block;
    cursor:pointer;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    }
    .shoplinkamazon a{
    color:#FF9901;
    }
    .shoplinkrakuten a{
    color:#c20004;
    }
    .shoplinkkindle a{
    color:#007dcd;
    }
    .shoplinkyahoo a{
    color:#7b0099;
    }
    .booklink-footer{
    clear:left;
    }
    /*--------------------------------------
    780px ヨメレバ・カエレバ
    --------------------------------------*/
    .booklink-box, .kaerebalink-box{
    width: 90%;
    margin:20px auto;
    padding:20px;
    }
    .booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    }
    .booklink-info, .kaerebalink-info{
    margin:0;
    text-align:left;
    }
    .booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5;
    }
    .booklink-link2, .kaerebalink-link1{
    margin-top:10px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
    float:left;
    width:30%;
    margin:15px 1% 0 auto;
    padding:10px 0px;
    }
    .shoplinkyahoo a{
    font-size:10px;
    }

      引用簡単!カエレバ・ヨメレバ・トマレバの設置方法とカスタマイズ方法 | ポントピ

     

    はてなブログの場合には、管理画面→デザイン→カスタマイズ→デザインCSSにPC用のCSSを貼り付けました。私の場合、はてなブログは無料ユーザーだからなのかスマホ表示が上手く出来ません。カスタマイズに少し制限があります。

    Innocentテーマを使っているのでレスポンシブデザインになっています。ですから普通ならばPC用のCSSの貼り付けだけで良いはずです。ですが、それだとスマホ表示がずれるので、上記のスマホ用のCSSを 管理画面→デザイン→カスタマイズ→記事→記事上に貼り付けました。

    見てくれる人の90%以上はスマホユーザーなので、ショップ名を縦表示としてます。PCでは横、スマホでは縦が出来る方法があれば知りたいです。

    まとめ

    これで、私も念願であった、一つの商品を楽天AmazonとYahooショップで紹介することが出来るようになりました。

    ただ、はてなブログでの表現方法が私には理解出来ませんでした。スマモ表示は良いのですが、PC表示の場合の設定の仕方がわかりませんでした。わかれば又、記事を更新したいと思います。

     

    カエレバの存在を教えてくれたのは、こちらの記事です。

    美雪さん、どうもありがとうございました。

    www.kansai-banzai.com

     

    今回は、もしもアフィリエイトとカエレバの紹介でした。