このブログは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介しています。
カエレバを使うことで、選択するネットショップリンクの幅が広がるので、アフィリエイト報酬の取りこぼしを減らすことが期待できるという訳ですね。
カエレバの初期デザインでも十分かもしれませんが、自分好みのおしゃれなデザインに変更するため、CSSをカスタマイズしてみましたので、参考までに掲載します。
Contents
カエレバの初期デザイン
カエレバのブログパーツをそのまま使用すると、以下のようなデザインになります。

CSSカスタマイズ後のデザイン
本記事で掲載するCSSをstyle.cssに記述することで、先ほどのデザインが以下のようなデザインになります。レスポンシブデザイン対応にしましたので、ブラウザの幅が狭くなると表示状態が変化しますよ。
PC・タブレット表示
パソコンやタブレットで表示した場合、以下のようなデザインになります。
画像が右寄せで表示されます。また、最大128pxになるように設定しています。ボタンは2つ横並びになります。3個以上あると、下にボタンが増えていきます。

スマートフォン表示
スマホ等の幅460px以下の画面で表示した場合は、以下のようなデザインになります。
画像がトップ中央に表示され、ボタンが縦並びになります。

CSSコード
ちょっと長いですが、こちらのCSSをstyle.cssに記述すると、カスタマイズされた表示になります。
コードを適用する際には、バックアップを取ることを忘れずにお願いします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
/* カエレバパーツ全体のデザインをカスタマイズ */ .kaerebalink-box, .booklink-box { width: 100%; margin-bottom: 1rem; /* 余白調整 */ padding: 1rem; background: #ffffff; /* 背景白に */ border: double 3px #d0d0d0; /* 外線を二重線に */ box-sizing: border-box; border-radius: 5px; /* 角を丸く*/ -webkit-border-radius: 5px; } /* 画像のデザインをカスタマイズ */ .kaerebalink-image, .booklink-image { float: left; /* 画像を左寄せに */ margin: 0; /* 余白なし */ text-align: center; } .kaerebalink-image img, .booklink-image img { max-width: 128px; /* 最大幅128pxに */ height: auto; /* 高さ自由 */ } /* 商品名等をカスタマイズ */ .kaerebalink-info, .booklink-info { margin-left: 140px; /* 文章は右寄せ */ line-height: 1.6rem; /* 行高さの幅を調整 */ } .kaerebalink-name, .booklink-name { font-weight: bold; /* 商品名太く */ margin: 0; /* 余白調整 */ } .kaerebalink-name a, .booklink-name a { color: #333333; /* 商品名色指定 */ } .kaerebalink-name p, .booklink-name p { margin-bottom: 0; /* 余白調整 */ } .kaerebalink-powered-date, .booklink-powered-date { font-size: 0.75rem; /* psted with ~ の大きさ指定 */ font-weight: normal; /* 文字の太さを標準に */ text-align: right; /* 右寄せ */ } .kaerebalink-detail, .booklink-detail { font-size: 0.875rem; /* メーカー・作者の文字の大きさ指定 */ margin-bottom: 0.5em; /* 余白調整 */ } /* ボタンのカスタマイズ */ .kaerebalink-link1, .booklink-link2 { width:100%; } .kaerebalink-link1 div, .booklink-link2 div { float: left; /* ボタンを横並びに */ width: 49%; /* ボタンの幅調整(2列にするので間の余白を考え49%を指定) */ margin-bottom:0.2rem; /* 余白調整 */ font-size: 0.875rem; /* 文字の大きさ */ font-weight: bold; /* 文字を太く */ text-align: center; /* 文字を中央寄せ */ box-sizing: border-box; } .kaerebalink-link1 div:nth-child(even), .booklink-link2 div:nth-child(even) { margin-left: 1%; /* 左右ボタン間の余白を調整 */ } .kaerebalink-link1 div a, .booklink-link2 div a { display:block; padding:3px 0; /* ボタンの上下幅指定 */ margin-bottom:8px; /* 上下ボタン間の幅指定 */ text-decoration:none; border-radius: 4px; /* 丸み調整 */ box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */ } /* ボタンにカーソルを当てた時の動きをカスタマイズ */ .kaerebalink-link1 div a:hover, .booklink-link2 div a:hover { -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); color: #ffffff; } /* カエレバ・ヨメレバ共通 */ .shoplinkamazon a, .shoplinkrakuten a, .shoplinkseven a, /* カエレバ */ .shoplinkyahoo a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, /* ヨメレバ */ .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a, .shoplinktoshokan a { display:block; text-decoration:none; } /* カエレバ・ヨメレバ共通 色の指定 */ .shoplinkamazon a { color:#ffffff; background:#ff9901; } .shoplinkrakuten a { color:#ffffff; background:#c20004; } .shoplinkseven a { color:#ffffff; background:#225496; } /* カエレバ 色の指定 */ .shoplinkyahoo a { color:#ffffff; background:#ff0033; } .shoplinkbellemaison a { color:#ffffff; background:#84be24 ; } .shoplinkcecile a { color:#ffffff; background:#8d124b; } .shoplinkkakakucom a { color:#ffffff; background:#314995; } /* ヨメレバ 色の指定 */ .shoplinkkindle a { color:#ffffff; background:#007dcd; } .shoplinkrakukobo a { color:#ffffff; background:#d50000; } .shoplinkbk1 a { color:#ffffff; background:#0085cd; } .shoplinkehon a { color:#ffffff; background:#2a2c6d; } .shoplinkkino a { color:#ffffff; background:#003e92; } .shoplinktoshokan a { color:#ffffff; background:#333333; } .booklink-footer { clear:both; } /* もしもアフィリエイトの場合不要な画像を削除 */ .kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"], .booklink-image img[src^="//i.moshimo.com/af/i/impression"], .shoplinkamazon img, .shoplinkrakuten img, .shoplinkseven img, .shoplinkyahoo img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img, .shoplinkkindle img, .shoplinkrakukobo img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img, .shoplinktoshokan img { display:none; } /* スマホ表示の設定 */ @media only screen and (max-width:460px){ /* 画像の設定 */ .kaerebalink-image, .booklink-image { float:none; /* 画像を中央寄せに */ margin:0; text-align:center; } /* 画像サイズを最大180pxに */ .kaerebalink-image img, .booklink-image img { max-width:180px; height:auto; } /* 商品名等をカスタマイズ */ .kaerebalink-info, .booklink-info { margin: 0; /* 余白調整 */ } /* ボタンのカスタマイズ */ .kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; } .kaerebalink-link1 div:nth-child(even), .booklink-link2 div:nth-child(even) { margin-left: 0; /* 余白を調整(ボタン縦並びにするため) */ } } |
ちょっとだけ説明
カエレバ・ヨメレバのみカスタマイズ
他にポチレバ、トマレバといったブログパーツがありますが、私にとって使用頻度が高くないので、今回はカエレバとヨメレバのみカスタマイズしました。
なお、ボタンは以下のネットショップに対応しており、それぞれ色が異なります。
カエレバ
- Amazon
- 楽天市場
- Yahoo!ショッピング
- 7net
- ベルメゾン
- セシール
- 価格コム
ヨメレバ
- Amazon
- Kindle
- 楽天市場
- 楽天kobo
- 7net
- honto
- ehon
- 紀伊國屋書店
- 図書館
ボタンを押すと沈むようにした
押したくなるようなボタンにしたかったので、ボタンは沈み込むようにしました。
PCでは、ボタンにカーソルを合わせたタイミングで沈むようにしました。スマホでは、そもそもカーソルを合わせることができないので、ボタンを押したタイミングでボタンが沈むようにしました。
ボタンが沈み込むタイミングを変更したい場合は、「:hover」と「:active」を変更してみてください。
ボタンデザインのカスタマイズに当たっては、サルワカさんのサイトを参考にさせていただきました。
初心者でもわかりやすく説明されているので、重宝しています。
もしもアフィリエイト使用時の余計な画像を削除
もしもアフィリエイトを使用すると、余計な画像が表示され、変な余白ができてしまう場合があるので、152行目から170行目で削除しています。
ブログパーツ生成時の注意点
ブログパーツを生成する時は、デザインを「amazlet-2(cssカスタマイズ用)」に設定してください。他のデザインだと、デザインが崩れてしまいます。

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