カエレバとヨメレバのcssカスタマイズ

カエレバ、ヨメレバをご利用のアフィリエイターの方も多いと思います。

僕も使わせてもらっていますがcssでカスタマイズして使うのが一般的なようなので、このページで検証していこうと思います。

スポンサーリンク

カエレバ、ヨメレバ

カエレバ、ヨメレバというのはAmazon、楽天市場など複数ショップのアフィリエイトを効率よくサイトに貼り付けるためのブログパーツです。

普通に商品リンクを貼ると、どちらか一方のショップしか紹介できません。両方並べて貼るのも不効率ですし。

でも、カエレバを使えばAmazonと楽天市場を同時に、しかもスマートに紹介することができます。

参照 商品紹介ブログパーツ カエレバ

そして何よりも一回の手間で複数ショップのリンクが作成できるのが最大の利点です。

ヨメレバはカエレバと同じコンセプトで書籍に特化したものです。

参照 書籍紹介ブログパーツ ヨメレバ

カエレバ、ヨメレバは、かん吉さんという方が開発し無料公開してくださっています。

カエレバ、ヨメレバのcssカスタマイズ

cssカスタマイズのベースはこれを使わせてもらうことにします。

参照 カエレバの使い方とCSSをいじる前の基礎知識。初心者がカエレバCSSカスタマイズに挑戦。 ピスログ

当サイトのテーマはSimplicity2を利用しているので、次の場所にcssを貼り付けます。
「外観」-「テーマの編集」→Simplicity2 child: スタイルシート (style.css)

cssでカスタマイズしたカエレバは次のようになります。
(これは画像にしてあるのでクリックできません。)

カエレバcssカスタマイズ

カエレバなのに商品が書籍なのは次のヨメレバと比較しやすいようにするためです。

上記サイトから戴いたcssはヨメレバに対応していません。cssに手を加えずにヨメレバを貼り付けると以下のようになります。(こちらも画像です。)

ヨメレバ amazlet風-2(cssカスタマイズ用) cssカスタマイズ 修正前

これはカエレバとヨメレバのクラス名が違うことによります。そこで、ヨメレバのクラス名をcssに追記します。

カエレバのクラス名と対になる以下のものを単純に追加しました。
booklink-box
booklink-image
booklink-info
booklink-name
booklink-powered-date
booklink-detail
booklink-link2shoplinkkindle
shoplinkrakukobo

修正後のヨメレバの表示です。(画像です。)

ヨメレバcssカスタマイズ用

Kindle、楽天koboの文字の色はそれぞれのサイトで使われているものを拝借しました。

カエレバ、ヨメレバを直接貼り付けるのではなく画像にしたものを貼り付けているのは、今後さらにcssをカスタマイズした際見た目が変わってしまうのを防ぐためです。

カスタマイズcssソースコード

もう少しボタンの幅などを調整したいところではありますが、現時点での知識ではここが限界です。

さらにカスタマイズをしています。
最新コードは次のページを参照してください。
関連 続・カエレバとヨメレバのcssカスタマイズ
/* カエレバ,ヨメレバ カスタマイズ */
.kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
}
.kaerebalink-image, .booklink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img, .booklink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info, .booklink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name, .booklink-name {
  font-size: 18px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo {
  float: left;
  width: 40%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkkindle a{
  color: #FE9900;
}
.shoplinkrakukobo a{
  color: #00A4CC;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 580px) {
  .kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image, .booklink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img, .booklink-image img {
  margin: 0 auto;
}
.kaerebalink-info, .booklink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name, .booklink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo {
  float: none;
  width: 96%;
  margin: 10px 0;
  padding: 5px 0;
}
}/* カエレバ,ヨメレバ カスタマイズ END */

フォローする

スポンサーリンク