CSSコピペで完了！カエレバ・ヨメレバのデザインをカスタマイズ

読者の悩み

カエレバ・ヨメレバのデザインを変えたい
初心者でも分かりやすくサクッと変える方法を教えて！

こんな悩みに答える記事になっています。

このブログはわかったブログの運営者かん吉さんが開発したブログツール「カエレバ」「ヨメレバ」を使用していました。(現在はRinkerに変更)

カスタマイズすると見た目が変わるので当然クリック率もあがりますし、自分のサイトに合った色合いにすることも可能です！でも、ＣＳＳなんてよくわからないし難しそうという方もいると思います。

今回は、そのカエレバ・ヨメレバのカスタマイズができるということで、カスタマイズ方法をコピペだけで実装できるように簡単に紹介します！

※2019/01/12追記:カエレバ・ヨメレバの仕様変更で、Amazonだけで取り扱っている商品に対して使えなくなるので、以下の記事で対応させました。

Amazon Associates Link Builderをカエレバ・ヨメレバ風にカスタマイズ！

※2019/03/30追記:Rinkerという商品紹介プラグインでのデザインを似た感じにする方法を紹介する記事を書きました。

CSSコピペでOK！Rinker(リンカー)のデザインをカスタマイズしよう！ RinkerのカスタマイズCSSを紹介します。Rinkerのメリットは大きく、私も乗り換えに至りました。今回はそんなRinkerを今まで使っていたカエレバ・ヨメレバのデザインと大体同じにしたいということで、カスタマイズのためのCSSを紹介していきます！

maipyon

現状は、個人的にはRinkerを使うのが一番使い勝手が良いのでオススメ。

この記事の目次

カエレバ・ヨメレバをカスタマイズ後のデザイン

カスタマイズ後のデザインはこのようになります。

また、このサイトはスマホにも対応しているので、柔軟にデザインを切り替えています。スマホでのデザインはこんな感じです。

スマホの方では、ボタンが縦に連なる形になるのでレイアウトが崩れず、スクロールで絶対にボタンを見てしまう配置になっています。

初期状態では文字だけになっており、Amazonなどへのリンクも小さいのであまり押す気にならないのですが、デザインをカスタマイズすることでボタンが強調されて、クリック率が上がります。

カエレバ・ヨメレバの設定

カエレバ・ヨメレバでの設定方法は次の通り。

カエレバでの設定

ヨメレバでの設定

画像では商品の欄は空欄にしているので、そこにお好きな商品を入れ込んでください。

また、両者とも「～で探す」などの文章を付けたほうがユーザにとって分かりやすく、クリック率があがるのでぜひつけましょう！

また、提携しているサイト次第ではAmazonだけでなく、楽天市場など、他のボタンにもチェックを押せるようになります。

もし楽天市場・Yahooショッピングと提携していないなら、必ず提携できるように登録しておこう

もしもあなたが楽天市場やYahooショッピングと提携していないのであれば、この機会に必ず提携しましょう！

楽天・Yahooショッピングのボタンをつけないだけで、機会損失になってしまいます。

このブログでは、楽天市場でしか取り扱っていない高めの商品を紹介していることもあり、楽天市場からの売り上げがAmazonの売り上げを越える月もあります。

最初に無料で会員登録するという1回の苦労だけで、後に数万円の差が生まれるかも・・・。

もしもアフィリエイトで楽天市場との提携が結べ、バリューコマースでYahooショッピングとの提携が結べるので、まだやっていない方は必ずしておきましょう。

maipyon

もしもアフィリエイトではAmazonとの提携も結べちゃうから、Amazonアソシエイトとの提携が難しいという人もそちらを使うべし！

カエレバ・ヨメレバのカスタマイズ用CSS

それではカスタマイズ用のCSSを紹介します！

編集する箇所

外観

テーマの編集

style.css

追加の際は一番下にコピペするとうまくいくはずです。

もしくは

編集する箇所

外観

カスタマイズ

追加CSS

にコピペをすれば大丈夫です。

CSS

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a {
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.shoplinkamazon a {
  background: #FF9901;
  border-radius: 7px;
  color: #fff;
}

.shoplinkkindle a {
  background: #007dcd;
  border-radius: 7px;
  color: #fff;
}

.shoplinkrakuten a {
  background: #c20004;
  border-radius: 7px;
  color: #fff;
}

.shoplinkyahoo a {
  background: #7b0099;
  border-radius: 7px;
  color: #fff;
}

.booklink-image {
  zoom: 1.2;
}

.kaerebalink-box, .booklink-box {
  border: 1px #9C9996 solid;
  box-shadow: 2px 2px 4px gray;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-around;
}

.booklink-footer {
  display: none;
}

.kaerebalink-info, .booklink-info {
  width: 43%;
  font-size: 16px;
}

@media screen and (max-width: 640px) {
  .kaerebalink-box, .booklink-box {
    display: block;
  }
  .kaerebalink-info, .booklink-info {
    width: 100%;
  }
  .kaerebalink-image, .booklink-image {
    margin: 0 0 20px 0!important;
    text-align: center;
    float: none!important;
  }
  .kaerebalink-name, .booklink-name {
    text-align: center;
  }
}

実際に画像で見せてはいませんが、yahoo!ショッピングにも対応済みです！安心してご使用ください。

ひこ　追加CSS内ではコメントを入れることができず、エラーが発生して保存できなかったので、何かエラーが発生する場合はその辺りを疑ってみてください。

また、ボタンの色を変えたかったらソースコード内のshoplink[amazonなどのサービス名] a の{}内のbackgroundの値を変えてください！

詳しい色は、原色大辞典を見てもらえればと思います。