カエレバ・ヨメレバをCSSでカスタマイズ(レスポンシブ対応も)しました

わかったブログ」のかん吉さんが作成した「カエレバ」「ヨメレバ」というツール。いろんなウェブサイトで当ツールによる商品リンクを見かけるため、導入を考えているブログ運営者の方も多いのではないでしょうか。

当ブログでも、先月のリニューアルを機に「AmazonJS」というワードプレスプラグインから乗り換える形で使い始めました。

それから約1ヶ月が経過したということで、デザインを整えるために適用しているCSSのコードを紹介するとともに、当ツールの使用感想も少し書いてみたいと思います。

カエレバ・ヨメレバに乗り換えた理由

先ほども書いたように、当ブログでは長い間「AmazonJS」というWordPressプラグインを利用していました。このプラグインも大変人気があるため、多くのウェブサイトで使用されているのを見ることができます。

使い始めるまでに設定が多い点は大変ですが、それが終われば記事の投稿画面から動かずに商品紹介リンクを作成できるため、とても便利なプラグインでした。

しかし、そのプラグイン名から分かるように「AmazonJS」はAmazonにある商品しか紹介できません。

訪れるユーザーが皆Amazonユーザーならいいのですが、楽天オンリーな人など、ネット通販の利用者にはいろんなタイプの人がいることでしょう。思えば僕自身もジャンルによってAmazonと楽天を使い分けていたりします。

「Amazonだけのリンクを張って楽天へのリンクを張らないのは機会損失かもしれない」

そう思ったため、カエレバやヨメレバといったツールを利用することにしたのです。

デザインのカスタマイズ

カエレバ・ヨメレバの使い方については、当記事冒頭でリンクしている各ツールの公式ページで解説されているため、ここでは割愛してコードの紹介に入っていきたいと思います。

なお、以下で紹介しているサンプル表示やコードについては、各ツールで用意されているテンプレート「Amazlet風-2(cssカスタマイズ用)」の利用を想定したものになっています。

デフォルト表示とカスタマイズ後の表示

まず、カエレバ・ヨメレバのデフォルト表示(サンプル画像)を見てみましょう。現時点でAmazonのランキングが1位だった商品を選んでみました。

▼カエレバ

▼ヨメレバ

このままでも十分に商品紹介の機能を果たしてくれるのですが、せっかくなので見た目をいじってみました。そのサンプル画像が以下のものです。(環境によってぼやけて見えるようなので本物も記事の最後に置いておきます)

▼カエレバ(画面幅が狭いとき)

カエレバカスタマイズ後スマホ想定表示

▼カエレバ(画面幅が広いとき)

カエレバカスタマイズ後パソコン想定表示

▼ヨメレバ(画面幅が狭いとき)

ヨメレバカスタマイズ後スマホ想定表示

▼ヨメレバ(画面幅が広いとき)

ヨメレバカスタマイズ後パソコン想定表示

こんな感じですね。商品紹介が縦に長くなるのは個人的に好みではないため、スマホを想定した場合にも商品画像の横にリンクボタンなどが並ぶようにしています。

適用したコードの紹介

前置きが長くなってしまいましたが、上の画像のように表示させるため、次の記述をスタイルシートに加えました。

.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:"\3067\63A2\3059";
}
.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;
  }
}

賢くない書き方をしている箇所はありますが、とりあえずこんな感じになっています。使用しているワードプレステーマ元々のCSSとの兼ね合いのため、一般的には不要と思われる記述も含まれてたりします。

特にポイントというわけでもないのですが、コード内でも示しているように、ボタンの色をブランドカラーより少し薄めに設定しています。これはブログ全体の雰囲気からボタンが浮きすぎないようにするためです。

リンクをボタン形式にする場合、多くのサイトではAmazonへのリンクを#ff9900で、楽天へのリンクを#bf0000に指定しているようです。kindleについてはサイトによってまちまちですが、#1683c6あたりの青色にしているケースが多い印象です。参考までに。

また、ショップ名の後ろに「で探す」という語句を付け加えています。コードのcontent:”\3067\63A2\3059″;の部分ですね。content:”で探す”;としても大抵の場合は大丈夫なようですが、文字化けが起こる可能性もゼロではないようなので、念のため16進表記のUnicodeへエスケープしたものを記述しています。

この点については、変換ツールの利用を含め、「WEB制作会社 W3G」のこちらのページが参考になりました。

カエレバやヨメレバのページからも「で探す」「で購入」「でチェック」などを付けたリンクを作成することができますが、語句を変えたくなった時に過去のリンクを修正していくのも面倒なので、疑似要素で一気に変更できるようにしています。

注意点として、上記コードはテンプレート「Amazlet風-2(cssカスタマイズ用)」の利用を想定したものとなっています。また、使用しているワードプレステーマによっては、そのテーマ独自のCSSとの関係で、当ブログのものとは少し違う表示になる可能性もあります。

その際は、適宜コードを修正してもらえればと思います。また、文字の色やサイズ、余白などは当ブログに合わせて設定しているので、その点もご自身のサイトに合わせてもらえたらと思います。

そうそう、書き忘れていましたが、当ブログではカエレバ・ヨメレバでの画像サイズを「中」にして使っています。

使ってみた感想など(AmazonJSとの比較を交えつつ)

カエレバとヨメレバを導入して良かった!と素直に思っています。……なんか普通すぎる感想ですね。でも実際にそうなんです。今後も継続して使い続けたいと考えています。

なぜかというと、クリック数が増加したからです。単純!

当ブログでは現時点で十数個の記事に商品紹介リンクがあるのですが、1ヶ月あたりのアクセス数はほとんど変わらないものの、「AmazonJS」を使っていた時と比べて約6倍(Amazonだけだと約5倍・楽天分も加えると約6倍)のクリック数を記録しています。

そのような結果になったのも納得です。次の画像をご覧ください。上がカエレバ、下がAmazonJSで作成したリンクです。

どちらが目を引くかといったらカエレバで作成したリンクの方ですよね。AmazonJSの方も控えめで好印象という見方はできるものの、やはり目立ったもん勝ちなのかもしれません。

画像の大きさについて、AmazonJSの方も大きく表示すればいいのに、と思われるかもしれません。僕もそう思います。しかし、この商品の場合、これ以上大きく表示することができないのです。正確に言えば、商品名などの情報が表示されない画像のみのリンクならば表示させられたのですが、テンプレートを使うとこれが限界だったのです。

もちろん、テンプレート利用時にも大きめな画像が表示される商品(書籍はそんな印象)もありました。ただ、やはり画像が商品次第で小さくなってしまう点は少し不満でした。投稿画面から動かずにリンクを挿入できたり、動的に情報を表示させられたりといった点は素晴らしかったんですけどね。

さて、話を戻すと、今回カスタマイズしたカエレバの方が「クリックしたら何が起こるか」を予測しやすく、それがクリック数に影響しているのではないかと個人的に思っています。

商品画像・商品名に加え、「Amazon」や「楽天市場」などと書かれたボタンがあることで、リンクをクリックしたらそれぞれのサイトへ飛ぶのだとユーザーは判断できます。

AmazonJSも右下にリンク先がAmazonであることを示唆するマークが入っていますが(上の比較画像では消えちゃってますが)、サイト名がテキストで示された場合と比べると、分かりにくさは否めません。

その分かりにくさの経験から、今回のカスタマイズではショップ名のリンクを目立たせましたし、さらには「で探す」という語句も付け足しました。こうすることで商品に興味を持った方が「ここを押せばこの通販サイトでこの商品を探せるんだ」と直感的に理解できるようになり、クリック数の増加に繋がったのでしょう。(という想像)

以前よりクリックされるようになったのは、単純に楽天市場や楽天ブックスへのリンクが新たに加わったのも大きいですね。

そうそう、カエレバの特徴として、商品名をクリックすると商品ページに飛び、ショップ名をクリックすると「指定したキーワードの検索結果ページ」に飛ぶようになっています。ショップ名に「で探す」を付け足したのは、ショップ名をクリックした人を困惑させないためでもあるのです。

……長くなってしまったのでそろそろ終わりにします。

一応強調しておきたい点がひとつ。

AmazonJSからカエレバやヨメレバに変えてクリック数が増えたと書きましたが、これはあくまで当ブログのケースです。このひとつのサンプル、ひとつの判断基準をもってAmazonJSよりカエレバやヨメレバの方が優れていると言いたいわけでは決してありません。

……はい!それでは、最後に記事中でサンプル画像として表示したものの本物を載せて終わりたいと思います。