商品紹介用ブログパーツ「カエレバ」デザインカスタマイズ

.cstmreba{margin:5px 0;padding:20px;border:1px solid #d9d9d9;border-radius:6px;word-break:break-all;font-size:14px}
.kaerebalink-box{display:flex}
.kaerebalink-image{margin-right:20px}
.kaerebalink-info{flex:1}
.kaerebalink-name{font-weight:700}
.kaerebalink-powered-date,.kaerebalink-detail{margin:10px 0;font-weight:400;font-size:8px}
.kaerebalink-link1{display:flex;flex-wrap:wrap;margin:0 -2px}
[class^="shoplink"]{width:calc(100%/3 - 4px);margin:2px}
[class^="shoplink"] a{display:block;padding:10px;border-radius:4px;text-decoration:none;text-align:center}
[class^="shoplink"] a:hover{color:#fff}
.shoplinkrakuten a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakuten a:hover{background:#bf0000}
.shoplinkamazon a{border:solid 1px #146eb4;color:#146eb4}.shoplinkamazon a:hover{background:#146eb4}
.shoplinkyahoo a{border:solid 1px #ff0033;color:#ff0033}.shoplinkyahoo a:hover{background:#ff0033}
.shoplinkseven a{border:solid 1px #009a44;color:#009a44}.shoplinkseven a:hover{background:#009a44}
.shoplinkwowma a{border:solid 1px #eb5505;color:#eb5505}.shoplinkwowma a:hover{background:#eb5505}
.shoplinkkakakucom a{border:solid 1px #051d93;color:#051d93}.shoplinkkakakucom a:hover{background:#051d93}
@media screen and (max-width:666px){.kaerebalink-link1{display:block;margin:0}[class^="shoplink"]{width:auto;margin:0 0 5px}}

.cstmreba{margin:5px 0;padding:20px;border:1px solid #d9d9d9;border-radius:6px;word-break:break-all;font-size:14px}

.kaerebalink-box{display:flex}

.kaerebalink-image{margin-right:20px}

.kaerebalink-info{flex:1}

.kaerebalink-name{font-weight:700}

.kaerebalink-powered-date,.kaerebalink-detail{margin:10px 0;font-weight:400;font-size:8px}

.kaerebalink-link1{display:flex;flex-wrap:wrap;margin:0 -2px}

[class^="shoplink"]{width:calc(100%/3 - 4px);margin:2px}

[class^="shoplink"] a{display:block;padding:10px;border-radius:4px;text-decoration:none;text-align:center}

[class^="shoplink"] a:hover{color:#fff}

.shoplinkrakuten a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakuten a:hover{background:#bf0000}

.shoplinkamazon a{border:solid 1px #146eb4;color:#146eb4}.shoplinkamazon a:hover{background:#146eb4}

.shoplinkyahoo a{border:solid 1px #ff0033;color:#ff0033}.shoplinkyahoo a:hover{background:#ff0033}

.shoplinkseven a{border:solid 1px #009a44;color:#009a44}.shoplinkseven a:hover{background:#009a44}

.shoplinkwowma a{border:solid 1px #eb5505;color:#eb5505}.shoplinkwowma a:hover{background:#eb5505}

.shoplinkkakakucom a{border:solid 1px #051d93;color:#051d93}.shoplinkkakakucom a:hover{background:#051d93}

@media screen and (max-width:666px){.kaerebalink-link1{display:block;margin:0}[class^="shoplink"]{width:auto;margin:0 0 5px}}

カスタマイズ後の表示

※サンプルのためリンクは機能していません

ウィッチャー3 ワイルドハントゲームオブザイヤーエディション PS4版

posted with カエレバ

2019/1/10 以降に作成したパーツの注意点

主データ ( 商品画像・商品名文字列 ) の取得先が Amazon から「楽天」に変更になった模様です。理由は Amazon の規約変更ですので仕方がない話ではあります。

提供者様の説明記事：http://www.wakatta-blog.com/kaereba-birth-change-and-so.html

そのため「商品画像・商品名文字列」のリンク先が次に変更になりました。

【旧】Amazon の自分のアフィリエイトリンク

【新】楽天のリンクで自分のアフィリエイトリンクではない模様

やはり画像と商品名はクリックする人が多いはずですので、リンク先を変更するなど「ひと手間」加える必要がありそうです。

まとめ

カエレバは仕様が変わりパーツソースにひと手間加える必要はありますが、複数 EC サイトのリンクをまとめて掲載できることはメリットです。

ですが、スマホでのユーザビリティを考慮すると CSS のカスタマイズはやはり必要でしょう。今回紹介した CSS 以外にも検索すれば情報は出てきますので、是非カスタマイズをお試しください。