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. buchikuma-info より:

    「楽天 タイムセール sale」に関する最新情報です。

    楽天スーパーSALEでは、9月11日1:59までの期間中に半額タイムセールが実施されており、特にPCやガジェット関連の商品が注目されています。日替わりで販売される商品は早期に売り切れる可能性があるため、購入準備が推奨されています。例えば、Ryzen 7を搭載した軽量ノートPCは、キャンペーン参加で実質6万1875円で購入可能です。一方、Celeron搭載のスタンダードノートPCは性能が低く、オフィス付きかどうかの情報が不明で、注意が必要です。その他にも多様な商品が半額で販売されているため、興味のある方は楽天の公式サイトで詳細を確認することが勧められています。

    https://komameblog.jp/sale/202409rss-timesale/

  2. buchikuma-info より:

    「2024 2024 楽天 sale」に関する最新情報です。

    2024年9月に開催される「楽天スーパーSALE」では、特に注目すべき攻略ポイントが3つあります。まず、楽天カードを持っていない人でも「5と0のつく日」に新規入会し、その日に買い物をすることでポイントが4倍になる特典があります。また、新規入会者には5,000ポイントのプレゼントも実施中で、年会費は永年無料です。さらに、セールでは200万点以上の商品が半額以下になり、「買いまわり」システムを利用することでポイントが最大10倍(通常ポイント1倍を含む)になります。この機会を利用してお得に買い物を楽しむことができます。

    https://www.lifehacker.jp/article/rakuten-supersale-point/

  3. buchikuma-info より:

    「楽天 gmktec pc」に関する最新情報です。

    楽天スーパーSALEでは、GMKtecのミニPCが最大50%オフで販売される特別セールが開催されます。セールは9月4日20時から始まり、楽天モバイル会員は9月3日20時から購入可能です。期間は9月11日1:59までで、ポイント還元を含めるとさらにお得に購入できます。

    セール対象のミニPCには、以下のモデルがあります:
    1. **Intel N100搭載エントリーモデル** – メモリースロットがあり、最大32GBまで増設可能。Type-C非対応で、価格は手頃。
    2. **Intel N97搭載コンパクトモデル** – ハイエンドノートPCレベルの性能を持ち、Type-C対応。消費電力や熱対策が施されている可能性あり。
    3. **Ryzen 7搭載ミドルレンジモデル** – 32GBメモリと2TB SSDを搭載し、価格は6万円台で非常にお買い得。グラフィックス性能も高め。
    4. **Core i5-12450H搭載ミドルレンジモデル** – こちらも高性能で、熱対策が考慮されている。

    これらのモデルは、特にコストパフォーマンスが優れており、ゲーミングや高負荷作業にも対応可能です。

    https://komameblog.jp/sale/202409rss-gmktec/

  4. buchikuma-info より:

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

    バンダイナムコエンターテインメントは、人気ゲーム『ONE PIECE バウンティラッシュ』の配信番組「全世界1.5億ダウンロード超感謝生放送」を8月19日20時から実施すると発表しました。番組にはスペシャルゲストとして倉持由香さんとゴー☆ジャスさんが参加し、最新キャラクターや情報の公開が予定されています。また、生放送に先立ち、X上でのキャンペーンも実施され、リポストやいいねの数に応じてゲーム内アイテムがプレゼントされる仕組みになっています。

    https://gamebiz.jp/news/390851

  5. buchikuma-info より:

    「楽天 2024 マラソン」に関する最新情報です。

    2024年8月11日まで開催される楽天お買い物マラソンでは、お得なノートPCやミニPCが多数紹介されています。特にRyzenシリーズ搭載のスタンダードノートPCはコストパフォーマンスが優れており、ポイント還元やクーポンを利用することでさらにお得に購入可能です。例えば、Ryzen 5 7530Uモデルは実質価格が約6万3455円、Ryzen 7 7730Uモデルは約9万9725円になる可能性があります。また、Intel N100を搭載したスタンダードノートPCは、キャンペーンを利用することで実質3万7686円で入手できるため、軽作業向けとしておすすめです。全体的に、各種キャンペーンを活用することで、パソコンをお得に購入できるチャンスが広がっています。

    https://komameblog.jp/sale/202408-rakuten-pc/

  6. buchikuma-info より:

    「2024 半期 書籍」に関する最新情報です。

    2024年上半期の電子書籍ランキングでは、「呪術廻戦」が1位となりました。他にも「葬送のフリーレン」や「SPY×FAMILY」、「キングダム」など、アニメ化や実写化された漫画作品が多数ランクインしています。

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

  7. buchikuma-info より:

    「000 000 楽天 sale」に関する最新情報です。

    UGREENの人間工学マウスは腕の負担を軽減することができ、現在は1,000円台で販売されている。楽天スーパーSALEでのお得な情報として注目されている。

    https://www.lifehacker.jp/article/rakuten-sale-2024-0607-2/

  8. buchikuma-info より:

    「60 60 楽天 sale」に関する最新情報です。

    楽天スーパーSALEでは、クロックスのサンダルが最大60%OFFで販売されており、通気性が高く涼しい定番のバヤ クロッグや新作のオフ グリッド クロッグなどがお得に登場しています。また、年中使えるダイソンの3 in 1羽根なし扇風機も36%OFFで販売されている。

    https://www.lifehacker.jp/article/rakuten-supersale-2024-0606-1/

  9. buchikuma-info より:

    「6千 6千 楽天 anker」に関する最新情報です。

    Ankerの充電器やモバイルバッテリーがお得に登場しており、最新の電源タップも6千円台で販売されています。例えば、最大7台の機器を同時に充電できる「Charging Station(7-in-1, 100W)」や最大6台の機器を一度に充電できる「Nano Charging Station(6-in-1, 67W)」が特価で販売されています。

    https://www.lifehacker.jp/article/rakuten-supersale-2024-0605-2/

  10. buchikuma-info より:

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

    バンダイナムコエンターテインメントは、『ONE PIECE バウンティラッシュ』において、公式リアル大会第2回超奪取祭のエントリー受付を開始しました。エントリー期間は5月29日から6月9日までで、オンライン予選は6月16日から7月1日に行われ、上位16チームが8月10日の本戦で競い合います。本戦は幕張メッセで開催され、Youtubeでも配信予定です。賞品にはオリジナルTシャツやメダルが用意されており、出演者にはたなP氏や倉持由香さん、平岩康佑さんが参加します。イベントの詳細は公式サイトやアプリ内で確認できます。

    https://gamebiz.jp/news/386824

  11. buchikuma-info より:

    「楽天 周辺 周辺 機器」に関する最新情報です。

    2024年3月に開催されている楽天スーパーSALEでは、お得なガジェットやPC周辺機器が紹介されています。例えば、ロジクールのM575やXiaomiのゲーミングモニターG27i、USBメモリー32GBなどがお買い得として紹介されています。さらに、Google Playギフトコードの購入で使える10%オフクーポンも配布されており、さまざまなお得な情報が提供されています。楽天スーパーSALE期間中にチェックしてみると良いでしょう。

    https://little-beans.net/sale/rakuten-gadget/

  12. buchikuma-info より:

    「990 990 楽天 anker」に関する最新情報です。

    Ankerの最新プラグ付きバッテリーが3,990円で販売されており、前モデルから全てが進化していることが特集されています。楽天スーパーSALEでの販売となっており、注目アイテムとなっています。

    https://www.lifehacker.jp/article/rakuten-supersale-2024-0306-2/

  13. buchikuma-info より:

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

    株式会社バンダイ カード事業部が主催する「ONE PIECEカードゲーム」とダンス&ボーカルグループ「BE:FIRST」がコラボした応援ソング『Set Sail』が2月26日に配信される。楽曲はSHUNTOさんとRYUHEIさんが作詞し、ONE PIECEカードゲームの世界観を表現している。PVはYouTubeで公開され、楽曲は3月のONE PIECEカードゲーム世界大会に向けて制作されたものだ。

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

  14. buchikuma-info より:

    「ユニフォーム ユニフォーム 争奪戦 争奪戦」に関する最新情報です。

    箱根駅伝のユニフォーム争奪戦に、ナイキや新参メーカーが参入していることが報じられています。これまで国内メーカーが攻勢をかけてきた中、外資系メーカーが忍び寄ってきているようです。記事では、過去10年間のユニフォームの変遷や、第100回大会に向けての争いの様子が紹介されています。また、業務部門の課題解決にITを活用する方法についても触れられています。

    https://www.itmedia.co.jp/business/articles/2401/03/news006.html

  15. buchikuma-info より:

    「今日 kindle kindle scribe」に関する最新情報です。

    『Kindle Scribe』は、手書きメモが好きな人にとって必見のノート機能が追加されたタブレット端末です。一般的なタブレットとの違いや手書きペンの実力についても紹介されています。さらに、文章をハイライト表示しながら注釈を書き込むこともできます。『Kindle Scribe』は、手書き派の人にとって便利なツールとなるでしょう。

    https://www.lifehacker.jp/article/2311-lht-kindle-scribe-with-pen/

  16. buchikuma-info より:

    「ai ai powered amazon」に関する最新情報です。

    AmazonはAIを搭載したバンの検査により、強力な新しいデータフィードを得ることができるようになりました。AI技術を利用した検査ステーションをバンに設置し、センサーを搭載したUVeyeというソフトウェアを使用して、タイヤの品質や車両の損傷を検知します。この技術により、車両の安全性を向上させるだけでなく、メンテナンスの必要性を早期に把握することができます。Amazonはこれまでに約100,000台の配送車両にこの技術を導入しており、今後数年でさらに多くのユニットを導入する予定です。また、データの分析結果を活用して、路線や地域ごとのダメージのパターンを把握し、メーカーや都市にフィードバックを提供することも計画しています。この技術は、自動車業界や保険業界などとのパートナーシップも広げており、注目を集めています。

    https://www.wired.com/story/amazons-ai-van-inspections-powerful-data-feed/

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