お気に入り商品登録画像変更がうまくできません。

Question

いつも大変お世話になっております。

ECマスターズliveで噂していたので
お気に入り商品登録画像変更をしようと思ったのですが、
画像が2重になったり、お買い物ボタンが消えたり、とうまくできません。
※ヘッダーに入れました。

どこがいけないのか教えていただけると大変助かります。

どうぞよろしくお願い致します。

参考ページ
https://club.ec-masters.net/index.php?design_page1

変更したい画像
https://image.rakuten.co.jp/este-beauty-h/cabinet/ez/800_okiniiri.jpg


入れたタグ
----------

/* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
width: 306px !important;
}
body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
width: 306px !important;
height: 48px !important;
background: url(https://image.rakuten.co.jp/este-beauty-h/cabinet/ez/800_okiniiri.jpg) no-repeat 0 0 !important;
}
body div.bookmarkArea div.bkm a.addBkm {
width: 306px !important;
height: 48px !important;
}

/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
width: 306px !important;
padding-left: 0px !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
width: 306px !important;
height: 48px !important;
background: url(https://image.rakuten.co.jp/este-beauty-h/cabinet/ez/800_okiniiri.jpg) no-repeat 0 0 !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm {
width: 306px !important;
height: 48px !important;
}

---------

Accepted Answer

ECマスターズの田中です。

https://image.rakuten.co.jp/este-beauty-h/cabinet/ez/800_okiniiri.jpg
を拝見したところ、
１つの画像の中で「お気に入り商品」「お気に入りショップ」の機能を
まとめようとされているようなのですが、

いただいたタグは、あくまでも既存のボタンの見た目を変えるためのタグのため、
「お気に入り商品」「お気に入りショップ」
それぞれ１つずつ画像をご用意いただく必要がございます。

見た目変更後の画像は縦に並ぶことをお含みおきいただいた上で、
たとえば
「気になる商品を〜通知を受けることができます。 の内容とお気に入り商品」
「お気に入りショップ」
で、それぞれ画像をご用意いただくなど、
２つの画像の分担をご検討の上、改めて作成をお願いします。

その際、横幅800pxの画像をそのまま設置されますと、
ページ全体の横幅を拡げ、レイアウトが崩れる原因となってしまいますので、
「商品をかごに追加」「ご購入手続きへ」ボタンを合わせた横幅、
430px以内で作成いただきますようお願いします。

また、デザインレシピのタグは
ページに用意された画像（と同じサイズ）を設置するためのタグとなっておりますので、
実際にご設置いただく際は、ソースに含まれる
「306」を実際の画像ファイルの横幅、「48」を実際の高さに
それぞれご変更いただきますようお願いします。

Answer

ECマスターズの田中さま

ご返信いただきありがとうございます。

＞いただいたタグは、あくまでも既存のボタンの見た目を変えるためのタグのため、
＞「お気に入り商品」「お気に入りショップ」
＞それぞれ１つずつ画像をご用意いただく必要がございます。

＞その際、横幅800pxの画像をそのまま設置されますと、
＞ページ全体の横幅を拡げ、レイアウトが崩れる原因となってしまいますので、
＞「商品をかごに追加」「ご購入手続きへ」ボタンを合わせた横幅、
＞430px以内で作成いただきますようお願いします。

＞ページに用意された画像（と同じサイズ）を設置するためのタグとなっておりますので、

デザインレシピと同じ画像で作成してみます。

ありがとうございました。