お気に入りボタンのカスタマイズについて

Question

カート回りの下記項目に関して、
テキストではなく、画像でより目立つようにカスタマイズしたいです。

■カスタマイズしたい項目
・レビューを書く
・お気に入り商品
・お気に入りショップ
・商品についてのお問い合わせ


■実装イメージ
https://item.rakuten.co.jp/f402052-iizuka/10001249/
https://gyazo.com/bf1734974359eb01cbd8e0446fecf948


上記実装イメージのようにカスタマイズするためのソースコードをご教示いただけますでしょうか。
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 上記実装イメージのようにカスタマイズするためのソースコードをご教示いただけますでしょうか。

以下のCSSに変更することにより、
ボタンをお好きな画像に
差し替えることができますので、
お試しください。

----------

.bookmarkAreaWrapper{
width: 300px !important;
}

/* お気に入り商品登録画像変更 */
#rakutenLimitedId_aroundCart #serviceTableSml td.normal-reserve-favorite .addBkm {
height: 50px !important;
width: 300px !important;
}
#rakutenLimitedId_aroundCart #serviceTableSml td.normal-reserve-favorite .bkmStar {
height: 50px !important;
width: 300px !important;
background: url(画像URL) !important;
}

/* お気に入りショップ登録画像変更 */
#rakutenLimitedId_aroundCart #serviceTableSml td.normal-reserve-favorite .addShopBkm {
height: 50px !important;
width: 300px !important;
}
#rakutenLimitedId_aroundCart #serviceTableSml td.normal-reserve-favorite .shopBkmStar {
height: 50px !important;
width: 300px !important;
background: url(画像URL) !important;
}

/* レビューを書く登録画像変更 */
body .normal-reserve-review span[irc=WriteReview] a {
height: 50px !important;
width: 300px !important;
line-height: 0;
text-indent: -9999px;
display: block;
    background: url(画像URL) no-repeat center center!important;
}
body .variant-gray-darker--3lUzx .text--xKo_r{
text-indent:-9999em;
display:block;
}

/* 商品についてのお問い合わせ画像変更 */
body #rakutenLimitedId_aroundCart #serviceTableSml button.rAskBtn {
    height: 44px!important;
    width: 300px;
    padding: 0!important;
    background: url(画像URL) no-repeat center center ￥!important;
    cursor: pointer!important;
    text-indent: -9999px;
}

----------

※width（幅）、height（高さ）の数値は
ご使用の画像のサイズに合わせて
ご変更ください。

なお、SKU化によって今後さらにページの
構成が変わり、上記のCSSが
利用できなくなる可能性も考えられます。
予めご留意の上、適用いただきますよう
お願いいたします。