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

どうも、ぶちくまです。

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

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

ヨメレバとは

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

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時代のカエレバ・ヨメレバカスタマイズになります。

/******* カエレバヨメレバカスタマイズ *******/
.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:"306763A23059";
}
/* ショップ名の前にアイコン表示 */
  .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対策の本を載せてみました。

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

カエレバの変更もご確認を

比較用に、カエレバ のカスタマイズも並べてみました。

CSSは個別記事のカスタマイズにのせているだけなので、うまく表示はされないと思います。

カスタマイズのポイント

ヨメレバやカエレバをカスタマイズする際のポイントを説明していきます。

リンクボタンは２列か３列か

まず、ショップの数が増えたので、２列にするか３列にするかという問題が生じました。
目指すべきは収まりのいい２列。

もし、ショップを６社にするなら３列の方がいいでしょうね。

ただ、その場合は、スマホ版の表示は工夫がいるかも。

スマホで６社並べるのは、１列だと縦長すぎて離脱率上がりそう。

ちなみにCocoonカスタマイズも

自分で言うのもなんだけど、CSSは慣れると腕前が上がるね。

詳しくはCocoonでの商品リンクカスタマイズ記事をご覧ください。

Amazonと楽天商品リンクモバイル表示をカスタマイズ｜Cocoon

Cocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。

buchikuma.xyz

2024.03.22

AMP対応

スマホでご覧の場合は、多分１列に並んでいるかと思います。

AMPだと、Simplicityでは親テーマのカエレバ デザインが干渉してしまって、あまりうまくいきませんでした。

親テーマを少しいじりましたが、ちょっと挙動が変な感じはある。

まぁ、AMPはスマホでしかみないから多分問題はないと思う。

ショップ名にアイコンつけてみた

個人的に気に入っているのは、ショップの名前の前に、アイコンを入れてみました。

Kindleはアマゾンマークでもよかったんだけど、今回はあえての「木」。

何故「木」なのかは、ご想像にお任せします。。。

Hontoの「本」はわかりやすいし、可愛い感じになって満足です。

ショップカラー

hontoとKindleが似てて困った。

ショップカラーはKindleは濃いめに、Hontoは薄めにすることで少し差別化を図りました。

ホバーして、カーソルが乗ると白抜きになるパターンも考えたけど、今はスマホでの閲覧が80％くらいになっているので、ショップカラーがわかりやすい方がいいと思って、やめました。

ボタン化して押し込む楽しさを出してもよかったけど、４つも並ぶとくどいのでこちらも却下。

カスタマイズ方法は

カスタマイズ方法については、おそらく「カエレバ カスタマイズ」で腐る程出て来るので、ベースにそれらのCSSをコピペして貼ればいいかなと思います。

しろくまさん

Simplicityならもともと組まれているCSSもありますしね