このブログは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介しています。

カエレバを使うことで、選択するネットショップリンクの幅が広がるので、アフィリエイト報酬の取りこぼしを減らすことが期待できるという訳ですね。

カエレバの初期デザインでも十分かもしれませんが、自分好みのおしゃれなデザインに変更するため、CSSをカスタマイズしてみましたので、参考までに掲載します。

スポンサーリンク



カエレバの初期デザイン

カエレバのブログパーツをそのまま使用すると、以下のようなデザインになります。

kaereba_image_03

 

CSSカスタマイズ後のデザイン

本記事で掲載するCSSをstyle.cssに記述することで、先ほどのデザインが以下のようなデザインになります。レスポンシブデザイン対応にしましたので、ブラウザの幅が狭くなると表示状態が変化しますよ。

 

PC・タブレット表示

パソコンやタブレットで表示した場合、以下のようなデザインになります。

画像が右寄せで表示されます。また、最大128pxになるように設定しています。ボタンは2つ横並びになります。3個以上あると、下にボタンが増えていきます。

kaereba_image_01

スマートフォン表示

スマホ等の幅460px以下の画面で表示した場合は、以下のようなデザインになります。

画像がトップ中央に表示され、ボタンが縦並びになります。

kaereba_image_02

CSSコード

ちょっと長いですが、こちらのCSSをstyle.cssに記述すると、カスタマイズされた表示になります。

コードを適用する際には、バックアップを取ることを忘れずにお願いします。

 

ちょっとだけ説明

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

他にポチレバ、トマレバといったブログパーツがありますが、私にとって使用頻度が高くないので、今回はカエレバとヨメレバのみカスタマイズしました。

なお、ボタンは以下のネットショップに対応しており、それぞれ色が異なります。

カエレバ
  • Amazon
  • 楽天市場
  • Yahoo!ショッピング
  • 7net
  • ベルメゾン
  • セシール
  • 価格コム
ヨメレバ
  • Amazon
  • Kindle
  • 楽天市場
  • 楽天kobo
  • 7net
  • honto
  • ehon
  • 紀伊國屋書店
  • 図書館

ボタンを押すと沈むようにした

押したくなるようなボタンにしたかったので、ボタンは沈み込むようにしました。

PCでは、ボタンにカーソルを合わせたタイミングで沈むようにしました。スマホでは、そもそもカーソルを合わせることができないので、ボタンを押したタイミングでボタンが沈むようにしました。

ボタンが沈み込むタイミングを変更したい場合は、「:hover」と「:active」を変更してみてください。

ボタンデザインのカスタマイズに当たっては、サルワカさんのサイトを参考にさせていただきました。

初心者でもわかりやすく説明されているので、重宝しています。

 

もしもアフィリエイト使用時の余計な画像を削除

もしもアフィリエイトを使用すると、余計な画像が表示され、変な余白ができてしまう場合があるので、152行目から170行目で削除しています。

ブログパーツ生成時の注意点

ブログパーツを生成する時は、デザインを「amazlet-2(cssカスタマイズ用)」に設定してください。他のデザインだと、デザインが崩れてしまいます。

kaereba_image_04

 

いかがでしたか?今回は、カエレバのデザインのカスタマイズ方法について書いてみました。どのようにカスタマイズしたら良いか悩んでいる方がいましたら、参考にしてみてください。

この記事をシェアする

“コピペでOK!カエレバ/ヨメレバのデザインをCSSでカスタマイズしたよ!” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です