2017.12.25このブログは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介しています。カエレバを使うことで、選択するネットショップリンクの幅が広がるので、アフィリエイト報酬の取りこぼしを減らすことが期待できるという訳ですね。カエレバの初期デザインでも十分かもしれませんが、自分好みのおしゃれなデザインに変更するため、CSSをカスタマイズしてみましたので、参考までに掲載します。Contentsカエレバの初期デザインCSSカスタマイズ後のデザインPC・タブレット表示スマートフォン表示CSSコードちょっとだけ説明カエレバ・ヨメレバのみカスタマイズカエレバヨメレバボタンを押すと沈むようにしたもしもアフィリエイト使用時の余計な画像を削除ブログパーツ生成時の注意点スポンサーリンクカエレバの初期デザインカエレバのブログパーツをそのまま使用すると、以下のようなデザインになります。CSSカスタマイズ後のデザイン本記事で掲載するCSSをstyle.cssに記述することで、先ほどのデザインが以下のようなデザインになります。レスポンシブデザイン対応にしましたので、ブラウザの幅が狭くなると表示状態が変化しますよ。PC・タブレット表示パソコンやタブレットで表示した場合、以下のようなデザインになります。画像が右寄せで表示されます。最大128pxになるように設定しています。ボタンは2つ横並びになります。3個以上あると、下にボタンが増えていきます。スマートフォン表示スマホ等の幅460px以下の画面で表示した場合は、以下のようなデザインになります。画像がトップ中央に表示され、ボタンが縦並びになります。CSSコードちょっと長いですが、こちらのCSSをstyle.cssに記述すると、カスタマイズされた表示になります。コードを適用する際には、バックアップを取ることを忘れずにお願いします。*/}}ちょっとだけ説明カエレバ・ヨメレバのみカスタマイズ他にポチレバ、トマレバといったブログパーツがありますが、私にとって使用頻度が高くないので、今回はカエレバとヨメレバのみカスタマイズしました。ボタンは以下のネットショップに対応しており、それぞれ色が異なります。ボタンを押すと沈むようにした押したくなるようなボタンにしたかったので、ボタンは沈み込むようにしました。PCでは、ボタンにカーソルを合わせたタイミングで沈むようにしました。スマホでは、そもそもカーソルを合わせることができないので、ボタンを押したタイミングでボタンが沈むようにしました。ボタンが沈み込むタイミングを変更したい場合は、「:hover」と「:active」を変更してみてください。ボタンデザインのカスタマイズに当たっては、サルワカさんのサイトを参考にさせていただきました。初心者でもわかりやすく説明されているので、重宝しています。CSSで作る!押したくなるボタンデザイン100(Web用)もしもアフィリエイト使用時の余計な画像を削除もしもアフィリエイトを使用すると、余計な画像が表示され、変な余白ができてしまう場合があるので、152行目から170行目で削除しています。ブログパーツ生成時の注意点ブログパーツを生成する時は、デザインを「amazlet-2(cssカスタマイズ用)」に設定してください。他のデザインだと、デザインが崩れてしまいます。いかがでしたか?今回は、カエレバのデザインのカスタマイズ方法について書いてみました。どのようにカスタマイズしたら良いか悩んでいる方がいましたら、参考にしてみてください。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。