Simplicityでヨメレバカスタマイズ〜AMP対応もラクラク

どうも、ぶちくまです。

今まで見て見ぬ振りしてきたヨメレバの方をカスタマイズしてみました。

Cocoonを利用するようになってヨメレバ・カエレバ共にCSSカスタマイズはやめました。Cocoonの機能に物販リンク作成機能があるからです。

この際なので、Simplicityからテーマ変更も一緒に検討してみては。

INDEX

ヨメレバとは
1. どうしてヨメレバ導入したか
2. ヨメレバで取りこぼしなくアフィリエイトする
ヨメレバカスタマイズに導入すべき電子書籍会社
1. Amazonと楽天で本の物販部門はOK
2. 電子書籍はボタン枠の争奪戦必須
カスタマイズコード公開
1. ヨメレバCSSコード
2. カエレバの変更もご確認を
カスタマイズのポイント
カスタマイズ方法は

ヨメレバとは

ヨメレバで検索してきた方ならもうご存知かとは思いますが。

Amazonや楽天といった主要ネットショップのアフィリエイトリンクを作成する際に、多くの方がお世話になっているカエレバ。

の、本のためのリンク作成ツールを提供してくれているのが「ヨメレバ」です。

Amazonとその電子書籍のKindle、楽天とその電子書籍のKoboなどのリンク作成はもちろんのこと、アフィリエイト仲介会社のバリューコマースが提供している、hontoなんかのリンク作成もできます。

booklive!とかはないんだけど、なぜかhontoだけはあるという。

どうしてヨメレバ導入したか

運営している他サイトで本の紹介を始めようかと思ったからです。

その際、別に、Amazonと楽天のリンクさえ貼れればそれでいいんじゃないかと思ったりもしたのですが。

個人的にhontoのヘビーユーザーということもあって、バリューコマースさんの登録を取り急ぎ行いました。

現在、絶賛審査中です。リンク切れ状態で失礼。

ヨメレバで取りこぼしなくアフィリエイトする

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

と、サイト運営者のカン吉さんも言っての通り、各ユーザーの選択を支援できます。

今や電子書籍業界も戦国時代に突入しました。つい数年前まではKindle一択だったんですけどね。

ただ、Kindleはちょくちょく値引きはするんだけど、一部の商品の値引きばかりなので、自分の好きな本をいつまでも買えない、という、ちょっと焦らしが過ぎるので、ぶちくまはメインは日本の印刷系の会社の電子書籍を利用しています。

ヨメレバカスタマイズに導入すべき電子書籍会社

ヨメレバをカスタマイズする際に悩むのが、どこの書籍販売会社をボタン化するか。

もちろん、ありったけボタンにするのもいいのですが、あまりにも遠慮がないというか、見栄えが悪くなるので、お勧めとしてはボタンは４つまでに抑えた方がいいです。

しろくまさん

特に、アフィリエイトではなくブログ運営をしていくのであれば、印象の悪い売り方はしない方がいいですね。

Amazonと楽天で本の物販部門はOK

Yahooショッピング！を含めるかどうかは悩ましいところなのですが、Amazonと楽天はボタン化しておきましょう。

電子書籍はボタン枠の争奪戦必須

電子書籍は対応すべきボタンが多いのが特徴。ただ、やるメリットがどれくらいあるのかは疑問。

Kindleをボタン化するかは悩みどころ

勢力的に言えば、洋書を取り扱うならKindleは必須です。Kindleの洋書取り扱い数は群を抜いています。

とはいえ、ボタン化するべきかというと、難しいところ。ヨメレバは本個別に割り振られている番号（ISBN）で検索されます。本の商品ページに辿り着けばKindle本と紙媒体の単行本とで簡単に選び直すことができます。

大した労力ではないですし、Amazonに誘導できた時点でアフィリエイト報酬がもらえるので、「Amazon」と表示するか、「Kindle」と表示するかの違いでしかないです。

ただ、読者としては、Kindleで購入したい場合は、より直感的にリンク先を選ぶことができるので、利便性を考えれば両方表示しても損はないとも言えます。

楽天Koboも忘れないで

オールマイティに買えて、かつ強力は母体と販売勢力を求めるなら、楽天系の電子書籍のKoboがおすすめです。

Kindleと比較しても、どちらも圧倒的なシェアを誇っているので、電子書籍でいちばん恐ろしい、サービス終了の可能性が低いです。

Koboは値引きも多い上に、楽天系のサービスを利用している方は、ポイントも貯められるのでおすすめです。

KindleとKobo、これらの二つは兼用しても棲み分けができるかなと思います。

なぜhonto？半額クーポンはどこいった？

なぜ、hontoナンザンショ。

ぶちくま自身不思議でしょうがないのですが。

ただ、一つ言えることは、2015年くらいまでhontoは、本当に引くくらい、半額クーポンを配りまくってました。

さらにポイントも乗せられたので、下手に古本買うよりも安かったからね。

その名残でhontoをメインに据え置いている方も多いと思う。

ぶちくまは隙さえあればKoboあたりに乗り換えようかなとは思っているけど、漫画などの続編などは、会社を跨ぐのは何と無く気持ち悪いので、結局、hontoを継続利用している、といったところにすぎない。

今では、30％オフクーポンも滅多にこない始末。

と、いうわけで

ヨメレバには最初からhontoのリンクが作れるようになっているので、下手に手広くいろんな会社のリンクを作るよりも、４つのリンクに絞ろうと思いました。

カスタマイズコード公開

以前まで、ブログでCSSコードは公開していなかったのですが、（公開方法がわからなかったのと、同じ環境でないと表示エラーが起こるため）参考程度にしてもらうためにコードを公開しています。

現在使用しているWPテーマのCocoonカスタマイズ記事もあわせてご覧いただけると参考になると思います。

ヨメレバCSSコード

ちなみに、Simplicity時代のカエレバ・ヨメレバカスタマイズになります。

クリックでCSSを表示

/******* カエレバヨメレバカスタマイズ *******/
.kaerebalink-box,
.booklink-box {
   width:100%;
   font-size:12px;
   color:#5e6065;
   border:1px solid #ddd;
   padding:15px 15px 14px;
   margin:26px 0 28px;
   box-sizing:border-box;
   word-break:break-all;
}
.kaerebalink-box:after,
.booklink-box:after {
   content:"";
   display:block;
   clear:both;
}
.kaerebalink-image,
.booklink-image {
   float:left;
   width:100px;
   text-align:center;
}
.kaerebalink-image img,
.booklink-image img {
   margin:0 !important;
   width:100%;
   height:auto;
}
.kaerebalink-info,
.booklink-info {
   margin:0 0 0 110px;
}
.kaerebalink-name > a,
.booklink-name > a {
   font-size:14px;
   font-weight:bold;
   color:#2e3035;
}
.kaerebalink-powered-date,
.booklink-powered-date {
   line-height:1.5;
   margin:3px 0;
}
.kaerebalink-powered-date a,
.booklink-powered-date a {
   color:#5e6065;
}
.kaerebalink-detail,
.booklink-detail {
   line-height:1.5;
}
.kaerebalink-link1 a,
.booklink-link2 a {
   color:#fff;
   text-decoration:none;
   display:block;
   text-align:center;
   line-height:28px;
   border-radius:4px;
}
/* ブランドカラーより少し薄めに */
.shoplinkamazon a {
   background:#f8a512;
   margin:7px 0 5px;
}
.shoplinkkindle a {
   background:#159dd6;
   margin:5px 0;
}
.shoplinkrakuten a {
   background:#d43232;
}
/* ショップ名の後ろに「で探す」を表示 */
.shoplinkamazon a:after,
.shoplinkkindle a:after,
.shoplinkrakuten a:after {
   content:"67A259";
}
/* ショップ名の前にアイコン表示 */
  .shoplinkamazon a:before {
    content: "\f270";
    font-family: "fontawesome";
    padding: 10px 4px;
    font-size: 14px;
}
　.shoplinkrakuten a:before {
    content: "\f25d";
    font-family: "fontawesome";
    padding: 10px 4px;
    font-size: 14px;
}
.kaerebalink-link1 a:hover,
.booklink-link2 a:hover {
   opacity:.8;
   color:#fff;
}
.kaerebalink-box p,
.booklink-box p {
   margin:0;
}
@media screen and (min-width:471px) {
  .kaerebalink-detail,
  .booklink-detail {
     margin-bottom:7px;
  }
  .kaerebalink-link1,
  .booklink-link2 {
     margin-right:-6px;
  }
  .kaerebalink-link1 div,
  .booklink-link2 div {
     width:50%;
     float:left;
     margin-bottom:5px;
     padding-right:6px;
  }
  .booklink-link2 div:nth-of-type(3) {
     margin-top:1px;
  }
  .shoplinkamazon a,
  .shoplinkkindle a {
     margin:0;
  }
}
@media screen and (min-width:581px) {
  .kaerebalink-box,
  .booklink-box {
     font-size:13px;
     padding:20px 20px 19px;
     margin:28px 0 32px;
  }
  .kaerebalink-image,
  .booklink-image {
     width:112px;
  }
  .kaerebalink-info,
  .booklink-info {
     margin:0 0 0 124px;
  }
  .kaerebalink-name > a,
  .booklink-name > a {
     font-size:15px;
  }
  .kaerebalink-powered-date,
  .booklink-powered-date {
     margin:4px 0;
  }
  .kaerebalink-link1 a,
  .booklink-link2 a {
     line-height:30px;
     font-size:12px;
  }
}

@media screen and (min-width:768px) {
  .kaerebalink-link1 div,
  .booklink-link2 div {
     width:33.33333333%;
  }
  .booklink-link2 div:nth-of-type(3) {
     margin-top:0;
  }
}

~~んで、出来上がりがこちらですね。~~

~~一応、ブログ運営に大事なSEO対策の本を載せてみました。~~

当サイトでカエレバを利用することは無くなったので、リンクは外しました。画像残しておけばよかった。