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

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

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

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

※2024/08/23追記:現在使うならRinkerかPochippだと思います。比較記事を書きました。

ポチップとRinkerの違いを長期使用して比較！オススメはどっち？ポチップとrinkerの違いを両者とも長期使用した筆者が丁寧に解説していきます。乗り換えを考えている方や、これから始める方の参考になればとおもいます。総合的に見て、オススメはポチップの方ですね。

maipyon

個人的にはRinkerを使うのが使い勝手が良くてオススメです！

この記事の目次

カエレバ・ヨメレバをカスタマイズ後のデザイン
カエレバ・ヨメレバの設定
- もし楽天市場・Yahooショッピングと提携していないなら、必ず提携できるように登録しておこう
カエレバ・ヨメレバのカスタマイズ用CSS
- デザインの確認方法
カエレバ・ヨメレバのカスタマイズまとめ

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

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

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

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

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

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

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

ヨメレバでの設定は以下の通り。

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

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

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

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

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

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

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

高めの商品が売れたときに、報酬上限である1,000円の報酬が発生することもちょいちょいあります。

最初に無料で会員登録するという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!ショッピングにも対応済みです！安心してご使用ください。

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

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