ホームアフィリエイトGatsbyブログに「ヨメレバ」パーツを実装する方法。
2020年7月01日

Gatsbyブログに「ヨメレバ」パーツを実装する方法。

shadowing

こんにちは、筋肉めがねです。

Gatsbyブログがようやく形になったのでどんどんブログを書いていきたい。
可能なら自分の読んだ書籍を紹介する事でお小遣いを得れたら最高。
書籍の紹介にはヨメレバというアフィリエイトが有効らしいけど、どう実装するの?

こういう疑問にお答えする記事を書きました。

ヨメレバとは

ヨメレバとは、以下のようなブログパーツの事で、ブログで書籍を紹介する時に使われます。

楽天ブックス、Amazonなど複数のショップへのリンクを表示できます。

ブログで紹介されている本を買おうと思った時に、例えば楽天ポイントを持っている人は、楽天ブックスを使いたいですよね。

Amazonで買うことに慣れている人は、Amazonで書いたいはずです。

そういうニーズに応えるために、メジャーなプラットホームにリンクで飛べるように設計されたのが「ヨメレバ」パーツです。

「ヨメレバ」パーツを使うための前提条件

「ヨメレバ」パーツを使うためには、以下のどちらかの方法で楽天、Amazonのアフィリエイトリンクを取得する必要があります。

  • もしもアフィリエイトで楽天、Amazonと提携する。
  • 個別に楽天アフィリエイト、そしてAmazonアソシエイトに登録しておく。

もしもアフィリエイトで楽天、Amazonと提携する場合は、こちらから事前に済ませておいてくださいね。

もしもアフィリエイトを使わない場合、楽天、Amazon、それぞれでアフィリエイトのidを取得する必要があります。

楽天の場合は、ホームページでユーザー登録を行えば、自動でアフィリエイトのidを直ぐに付与してくれます。

Amazonアソシエイトは、審査に数日かかることもあるので、これは「ヨメレバ」パーツを作る前に事前に済ませておいてくださいね。

「ヨメレバ」パーツの作成

では、早速「ヨメレバ」パーツを作っていきましょう。

先ずは、「ヨメレバ」ページのユーザーデータの入力をしますが、もしもアフィリエイトを使う場合、使わない場合の両方解説しますね。

もしもアフィリエイトを使う場合

先ずは、もしもアフィリエイトと連携する方法を解説します。

ヨメレバ公式ページ」へアクセスします。

「ユーザーデータ入力」のセクションで必要な情報を入力します。

fill in yomereba form

サイト名には、任意の名前を入れてください。

続いて、もしもアフィリエイトのAmazon idを入力します。

もしもアフィリエイトのtop pageで、amazon.co.jpと検索します。

type amazon.co.jp

そして、表示された広告の右側にある「広告リンク取得」をクリックします。

広告リンク取得 Amazon

ソースコードの中のa_idがAmazon idですので、これを「ヨメレバ」のフォームに入力します。

a_id

続いて、もしもアフィリエイトの楽天idですが、こちらも同じ要領で取得します。

もしもアフィリエイトのtop pageで「楽天市場」と検索します。

rakuten

楽天市場の広告の右側にある「広告リンク取得」をクリックします。

広告リンク取得 楽天

ソースコードの中のa_idが楽天のidですので、これを「ヨメレバ」のフォームに入力します。

a_id_rakuten

これで、ヨメレバのユーザーデータ入力が完了です。

最後にフォーム下にある「保存」ボタンを押してください。

save button

もしもアフィリエイトを使わない場合

続いて、楽天アフィリエイト、Amazonアソシエイトから個別にidを取ってくる場合です。

先ずは、楽天ですが、Rakuten developerのページで、Blogボタンを押します。

楽天 developer top

次のページで、下にスクロールして、「アフィリエイトIDの確認方法」を押します。

confirm id

そして、「アフィリエイトIDの確認」リンクをクリックします。

check id

表示されたidを「ヨメレバ」のフォームに入力してください。

affiliate id of rakuten

続いて、Amazonアソシエイトのidですが、こちらはAmazonアソシエイトのtop pageで確認できます。

amazonアソシエイトのidを「ヨメレバ」のフォームに入力してください。

affiliate id of amazon

最後に、先ほどと同じように、フォーム下にある「保存」ボタンを押してください。

save button

リンク作成

続いて、ヨメレバページのヘッダー部分で、紹介したい書籍の名前を入力し検索ボタンを押します。

search book

リストアップされた商品のうち、紹介したい書籍の「ブログパーツを作る」ボタンをクリックします。

listed books

これで、ブログパーツが生成されました。

表示形式は、「amazlet風-1」など計9種類から、画像の大きさも大、中、小と選べます。

あとは、生成されたソースコードを使って、Gatsbyブログにパーツを表示します。

Gatsbyブログへ「ヨメレバ」パーツを実装

先ほど生成されたコードをコピーし、markdownファイルの好きな位置へ貼り付けます。

/src/pages/articles/2020-07--01--Yomereba/index.md
...
Amazonで買うことに慣れている人は、Amazonで書いたいはずです。

そういうニーズに応えるために、メジャーなプラットホームにリンクで飛べるように設計されたのが「ヨメレバ」パーツです。

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;">.....</div></div><div class="booklink-footer" style="clear: left"></div></div>
...

すると、scssを適用していない状態の「ヨメレバ」パーツが表示されます。

yomereba part without scss

これでも十分綺麗ですが、SCSSで体裁を整えましょう。

「ヨメレバ」パーツの体裁をSCSSで整える

以下のコードを、scssファイルに貼り付けてください。

このブログの場合はsrc直下のindex.scssへ貼り付けます。

/src/index.scss
// mobile
.kaerebalink-box, .booklink-box {
  display: block;
}

.kaerebalink-info, .booklink-info {
    width: 100%;
    font-size: 1.3em;
}

.kaerebalink-image, .booklink-image {
  margin: 0 0 20px 0!important;
  text-align: center;
  float: none!important;
}

.booklink-image {
  zoom: 1.2;
  border: 1;
  }

.kaerebalink-name, .booklink-name {
  text-align: center;
}

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkrakukobo a{
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
  font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif !important;
}

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkrakukobo a:hover {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
    -moz-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.shoplinkamazon a {
    background: #FF9901;
    border-radius: 7px;
    color: #fff;
}

.shoplinkkindle a {
    background: #007dcd;
    border-radius: 7px;
    color: #fff;
}

.shoplinkrakukobo a {
    background: #ff6347;
    border-radius: 7px;
    color: #fff;
}

.shoplinkrakuten a {
    background: #c20004;
    border-radius: 7px;
    color: #fff;
}

.shoplinkyahoo a {
    background: #7b0099;
    border-radius: 7px;
    color: #fff;
}

.kaerebalink-box, .booklink-box {
    border: 1px #9C9996 solid;
    box-shadow: 2px 2px 4px gray;
    margin: 20px 0;
    //display: flex;
    align-items: center;
    padding: 20px;
    padding-top: 30px;
    box-sizing: border-box;
    justify-content: space-around;
}

.booklink-footer {
    display: none;
}

.booklink-detail{
    font-size: .8em;
}

@import "assets/scss/variables";
@import "assets/scss/mixins";

// tablet
@include breakpoint-sm {
  .shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkrakukobo a{
    transition: all ease-in-out .3s;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 13px;
    font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif !important;
  }

  .shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkrakukobo a:hover {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
    -moz-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  .shoplinkamazon a {
    background: #FF9901;
    border-radius: 7px;
    color: #fff;
  }
    
  .shoplinkkindle a {
    background: #007dcd;
    border-radius: 7px;
    color: #fff;
  }
  
  .shoplinkrakukobo a {
    background: #ff6347;
    border-radius: 7px;
    color: #fff;
  }

  .shoplinkrakuten a {
    background: #c20004;
    border-radius: 7px;
    color: #fff;
  }
  
  .shoplinkyahoo a {
    background: #7b0099;
    border-radius: 7px;
    color: #fff;
  }
  
  .booklink-image {
    zoom: 1.2;
    border: 1;
  }
  
  .kaerebalink-box, .booklink-box {
    border: 1px #9C9996 solid;
    box-shadow: 2px 2px 4px gray;
    margin: 20px 0;
    display: flex;
    align-items: center;
    padding: 20px;
    padding-top: 30px;
    box-sizing: border-box;
    justify-content: space-around;
  }
  
  .booklink-footer {
    display: none;
  }
  
  .kaerebalink-info, .booklink-info {
    width: 43%;
    font-size: 1.3em;
  }

  .booklink-detail{
    font-size: .8em;
  }
}

// bigger screen
@include breakpoint-md {
  .shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkrakukobo a{
    transition: all ease-in-out .3s;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 13px;
    font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif !important;
  }

  .shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkrakukobo a:hover {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
    -moz-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  .shoplinkamazon a {
    background: #FF9901;
    border-radius: 7px;
    color: #fff;
  }
  
  .shoplinkkindle a {
    background: #007dcd;
    border-radius: 7px;
    color: #fff;
  }
  
  .shoplinkrakukobo a {
    background: #ff6347;
    border-radius: 7px;
    color: #fff;
  }

  .shoplinkrakuten a {
    background: #c20004;
    border-radius: 7px;
    color: #fff;
  }
  
  .shoplinkyahoo a {
    background: #7b0099;
    border-radius: 7px;
    color: #fff;
  }
  
  .booklink-image {
    zoom: 1.2;
    border: 1;
  }
  
  .kaerebalink-box, .booklink-box {
    border: 1px #9C9996 solid;
    box-shadow: 2px 2px 4px gray;
    margin: 20px 0;
    display: flex;
    align-items: center;
    padding: 20px;
    padding-top: 30px;
    box-sizing: border-box;
    justify-content: space-around;
  }
  
  .booklink-footer {
    display: none;
  }
  
  .kaerebalink-info, .booklink-info {
    width: 43%;
    font-size: 1.3em;
  }

  .booklink-detail{
    font-size: .8em;
  }
}
...

このscssで、「ヨメレバ」パーツが以下のように表示されます。

final yomereba part

これで、完成です。

まとめ

いかがでしたか。

この記事では、Gatsbyブログに「ヨメレバ」パーツを実装する方法を解説しました。

「ヨメレバ」パーツを実装できるようになると、記事のバリエーションが格段に増えますね。

どんどん書籍を紹介していきたいと思います。

シェアする