カテゴリ一覧から記事を探す

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

カエレバ・ヨメレバをカスタマイズ

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

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

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

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

[ttnlink url=”https://maipyon.net/amazon-link/”]

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

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

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

PC画面でのカエレバ・ヨメレバのデザイン

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

スマホでのカエレバ・ヨメレバのデザイン

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

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

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

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

カエレバでの設定

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

ヨメレバでの設定

ヨメレバの方での設定方法

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

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

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

3.カエレバ・ヨメレバのカスタマイズ用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の値を変えてください!

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

デザインの確認方法

確認方法ですが、カエレバ・ヨメレバ編集画面およびWordPressでの編集画面ではカスタマイズされたものは出てきません。

設定したスタイルがなにも反映されていないものが出てきます。
反映されてない!と私も思い焦りましたが、プレビューを見るときちんと反映されてました。

PCでもスマホでも確認するのめんどくさいなぁ・・・。
でも心配だなあという方がいるかと思いますが、プレビュー画面で、Choromeの右上の「…」を押してその他ツール→デベロッパーツールをクリックしたのちに

デベロッパーツールを使ってカエレバ・ヨメレバのデザインを確認する手順

①、②の順で押せばMobile、つまりスマホで見たときのものと同じ表示になります!

今見えてる画像は編集画面の上の方ですが、スマホでこのページにくると画像にあるような画面になる、ということですね。

なので、プレビュー画面でデベロッパーツールを呼び出せばOKです!

このテクニックはフレキシブルに対応させるコードを書く時には確認しやすくするための必須スキルですので、覚えておいて損はないです!

また、他のデザインをいじった後でも、どのデバイスでもデザインにおかしなところがないか見るうえでも重要なスキルです。

CSSが分かる人は気に入ったデザインのボタンの色などを参考にすることができますので、どうしても自分でカスタマイズしたいという人は挑戦してみてもいいと思います!

4.まとめ

コピペだけでカスタマイズできるCSSを公開しました。

私自身CSSはちょっとかじった程度ですが、自分でCSSをいじれるくらいにはすぐに成長できたので、本などで勉強してみてもいいと思います!

CSSをいじれるようになったら、自分のサイトを自由自在にデザインすることができるので自由度が一気に高まります。

カスタマイズ程度なら簡単にできるようになるというところまで、まずは勉強してみてもいいかもしれませんね。