PR

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

どうも、ぶちくまです。

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

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

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

スポンサーリンク

ヨメレバとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

しろくまさん
しろくまさん

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

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のリンクが作れるようになっているので、下手に手広くいろんな会社のリンクを作るよりも、4つのリンクに絞ろうと思いました。

スポンサーリンク

カスタマイズコード公開

以前まで、ブログで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は個別記事のカスタマイズにのせているだけなので、うまく表示はされないと思います。

スポンサーリンク

カスタマイズのポイント

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

リンクボタンは2列か3列か

ヨメレバカスタマイズ画像
ヨメレバカスタマイズ画像

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

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

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

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

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

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

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

AMP対応

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

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

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

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

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

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

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

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

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

ショップカラー

hontoとKindleが似てて困った。

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

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

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

スポンサーリンク

カスタマイズ方法は

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

しろくまさん
しろくまさん

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

コメント

  1. 「マンガ 完結 kindle」に関する最新情報です。

    Amazonで開催中の「【最大85%OFF】Kindle本 マンガ&ラノベフェア第2弾」では、99円以下で購入できるマンガが多数紹介されています。フェアは2月19日までで、1990年代から2010年にかけての完結済み作品が中心です。特に、高田慎一郎の作品群や、医療系ヒューマンドラマ「なみだ坂診療所 完全版」などが注目されています。また、KADOKAWAの人気マンガも特別価格で販売中です。興味のある方は、ぜひチェックしてみてください。

    https://komameblog.jp/sale/kindle-20260215-matome/

  2. 「ディスプレイ クーポン type」に関する最新情報です。

    レノボの27インチWQHDディスプレイ『L27h-4A』が特別クーポンを利用することで、通常価格2万9700円から2万3480円に割引されています。クーポンの有効期限は2月19日までです。このディスプレイはUSB Type-Cに対応し、75WのUSB PD機能や4ポートのUSB Type-Aハブを搭載しています。リフレッシュレートは100Hzですが、応答速度は標準的なゲーミングディスプレイより劣るため、カジュアルなゲームには適していますが、ハードコアなゲーマーには向いていません。オフィスワーク向けの機能が充実しており、色域は99% sRGBで、自然な色合いが求められるビジネスシーンに適しています。

    https://komameblog.jp/sale/l27h-4a-202602114/

  3. 「クーポン core core ultra」に関する最新情報です。

    GEEKOM(ギーコム)の公式サイトでは、Core Ultra 9 185H搭載のミニPC「GT1 Mega」が特別クーポンを利用することで15%オフで購入可能です。通常価格は10万7910円ですが、クーポンを使うと10万1915円になります。クーポンの有効期限は2月15日までです。このミニPCは、Windows 11 Pro、DDR5メモリー16GB、1TBのSSD、Intel Arcグラフィックスを搭載しており、一般的な事務作業や動画編集にも対応可能です。また、3年間のメーカー保証が付いているため、長期間安心して使用できる点が魅力です。

    https://komameblog.jp/sale/geekom-20260211-sale/

  4. 「kadokawa kindle マンガ」に関する最新情報です。

    KADOKAWAが「80th 大感謝祭」キャンペーンを開催中で、対象のKindleマンガが1冊88円で販売されています。このセールは2月5日(月)までの期間限定で、人気作品として『鉄鍋のジャン』や『デスマーチからはじまる異世界狂想曲』などがラインナップされています。その他にも多くのマンガが割引価格で提供されており、まとめ買いに適した作品が揃っています。

    https://komameblog.jp/sale/kindle-20260131-kadokawa/

  5. 「通販 amazon amazon 楽天」に関する最新情報です。

    この記事では、「通販」という略語の正式名称について問いかけています。現代のオンラインショッピングの便利さを強調し、Amazon、楽天、ZOZOなどの人気サイトを例に挙げています。読者に「通販」の意味を考えさせる内容となっています。

    https://gendai.media/articles/-/162439

  6. 「one one piece piece」に関する最新情報です。

    2023年1月12日、バンダイナムコエンターテインメントは『ONE PIECE』の連載25周年を記念して、RPGゲーム『ONE PIECE ODYSSEY(ワンピース オデッセイ)』をPlayStation4、PlayStation5、Xbox Series X|S向けに発売しました。PC版は翌日の1月13日にリリースされました。ゲームのローンチPVでは、アニメの初代主題歌「ウィーアー」のオーケストラアレンジが使用され、プレイヤーは『ONE PIECE』の世界観を楽しむことができる内容となっています。このプロジェクトには原作者の尾田栄一郎も協力しています。

    https://gamebiz.jp/news/418882

  7. 「終了 33 kindle」に関する最新情報です。

    KADOKAWAの「角川コミックス・エース レジェンド作品一気読みフェア!」が、1月8日で終了することを受けて、人気のKindleマンガが1冊33円で販売中です。特におすすめの作品には、ヤマザキマリの「テルマエ・ロマエ」、神江ちずの「万能鑑定士Qの事件簿」、谷川流の「涼宮ハルヒの憂鬱」などがあります。これらの作品は、ポイント還元もあり、実質的な価格がさらにお得です。また、Kindle Unlimitedの読み放題サービスが3ヵ月間99円で試せるキャンペーンも実施中です。セールは他にも多くの激安コミックが対象となっており、詳細は記事内で確認できます。

    https://komameblog.jp/sale/kindle-20260107/

  8. 「書籍 電子 電子 書籍」に関する最新情報です。

    「honto電子書籍ストア」が発表した2025年の年間ランキングによると、人気の電子書籍の1位は「本島純政✕上村謙信未成年~未熟な俺たちは不器用に進行中~公式デジタル写真集」となりました。このランキングは、販売データを基に作成されており、2位には「薬屋のひとりごと」、3位には「葬送のフリーレン」がランクインしています。また、5位には「SPY×FAMILY」が位置しています。全体的に、様々なジャンルの作品が人気を集めていることが伺えます。

    https://www.huffingtonpost.jp/entry/story_jp_695cacd2e4b0b1914ed1653c

  9. 「ai kindle 書籍」に関する最新情報です。

    株式会社イーリサは、Amazon販売を支援する次世代AI搭載商品リサーチツール「ERESA AI」を正式にリリースしました。このツールは、Kindle書籍のデータ分析機能とAIライティング機能を統合し、電子書籍制作の全工程を効率化します。電子書籍市場は拡大しており、ERESA AIは市場分析、執筆支援、表紙やページ画像の生成、出版後のSEO分析を一体化して提供します。

    主な機能としては、1) Kindle書籍のデータ分析による企画判断の精度向上、2) AIライティング機能による執筆支援、3) 表紙や挿絵の生成、4) 出版後のSEO改善提案が含まれます。これにより、制作・運用の速度と再現性を高め、Amazon販売におけるリサーチや制作の課題を解決することを目指しています。ERESA AIは、従来のデータ表示に加え、AIがコンサルタントのように判断と改善を支援する設計となっています。

    https://prtimes.jp/main/html/rd/p/000000003.000118686.html

  10. 「人気 40 kindle」に関する最新情報です。

    この記事では、Amazonで人気のKindleマンガの中から、ポイント還元率が40%以上の作品を紹介しています。特に、著名な作品が多く対象となる高還元セールが行われており、懐かしの名作やアニメ化された人気作品が揃っています。具体的な作品としては、「葬送のフリーレン」、「メダリスト」、「チェンソーマン」、「黄泉のツガイ」、「ぼっち・ざ・ろっく!」が挙げられ、それぞれの巻数や合計価格、還元ポイントも詳しく記載されています。これらの作品は、期間限定のポイント還元が適用されるため、購入時には有効期限を確認することが推奨されています。

    https://komameblog.jp/sale/kindle-20260102-point/

  11. 「ブック ブランド ブランド ブック」に関する最新情報です。

    株式会社ARENA GAMESは、2025年12月25日に「NIPPON SERIES ブランドブック」を公開しました。このブランドブックは、ポーカーの価値や社会との関係性を明確にし、NIPPON SERIESの思想や事業構造を体系的にまとめたものです。ポーカーの「交流」のポテンシャルに着目し、文化として根付かせることを目指しています。

    ブランドブックの主な内容には、NIPPON SERIESの使命や未来像、エシカルブランドとしての価値観、地方都市との連携「NIPPON SERIES GO」、社会への還元を考えた取り組みが含まれています。ブランドメッセージとしては、ポーカーを社会に誇れる文化として育て、地域と共にある存在を目指すことが強調されています。

    今後、NIPPON SERIESはこのブランドブックの考え方を基に、一貫性と透明性を持った大会運営や地域連携を進め、ポーカーを通じて人々が集い、学び、交流する場を提供し続けることを目指します。ブランドブックはPDF形式で閲覧可能です。

    https://prtimes.jp/main/html/rd/p/000000012.000108648.html

  12. 「2025 楽天 50」に関する最新情報です。

    JLab Japan株式会社は、2025年12月4日から12月11日まで楽天市場で開催される「楽天スーパーSALE」において、人気のワイヤレスイヤホンやヘッドホンを最大50%OFFで販売します。特に、2025年発売の新製品「Go Pods ANC」など、23製品が対象となります。JLabは、2024年度に全米で100ドル以下のスポーツイヤホンと50ドル以下のワイヤレスイヤホンのカテゴリーで売上No.1を獲得した実績があります。

    https://prtimes.jp/main/html/rd/p/000000095.000101853.html

  13. 「配信 楽天 楽天 証券」に関する最新情報です。

    楽天証券は、2025年12月12日から新番組「楽天証券 PRESENTS 未来を拓く資産形成の羅針盤」をラジオNIKKEIとJ-WAVEのコラボレーションチャンネル「TOKYO INSIGHT」で配信開始します。この番組では、独立系ファイナンシャルアドバイザー(IFA)や楽天証券の従業員が出演し、資産形成に関する考え方やアドバイザー選びのヒントを提供します。視聴者はYouTubeやポッドキャスト、radikoで番組を楽しむことができます。

    https://prtimes.jp/main/html/rd/p/000000685.000011088.html

タイトルとURLをコピーしました