かご回りCSSについて

Question

お世話になっております。

http://item.rakuten.co.jp/tohoku-happynouen/tohokuec-momo01/?scid=me_ich_pcn_810_20160809_6051210_013

こちらの参考リンクは、他店様になりますが、カート横のこの位置（500円クーポンの画像）への画像挿入方法を教えて頂けますでしょうか？

よろしくお願いします。

Answer

ECマスターズの田中です。

いただいた商品ページの場合、
PC用商品説明文の左上に設置した画像を
スタイルシートで移動させて設置しておりますが、

商品説明文の上に掲載される
あす楽の説明の有無や、テンプレートの種類によって
移動量が変わり、デザインが崩れやすいです。

リンク付き画像の場合はこの方法でしか設置できないので、
下記URLのひとつ目の返信をご参照ください。
https://ec-masters.club/forum/post_view.php?id=2240

リンクの無い、画像だけを設置する場合は、
「個数」表記の左上から移動させることで、
位置ずれの可能性を低くすることができます。

下記のHTMLソースを
ヘッダー・フッター・レフトナビ、もしくは商品説明文（大）に
挿入していただくか、
〜の中身を、外部CSSファイル内に追記して
ご利用ください。

===== この下の行から ================

div#rakutenLimitedId_aroundCart > table[id] tr:nth-child(2) td:first-child:before {
    content: " ";
    background: url(挿入する画像URL);
    position: absolute;
    left: 右に移動させる量px;
    top: 下に移動させる量px;
    width: 画像の横幅px;
    height: 画像の高さpx;
    display: block;
}
div#rakutenLimitedId_aroundCart > table[id] tr:nth-child(2) td:first-child {
    position: relative;
}

===== この上の行まで ================
※挿入する画像URLは実際のURLに、
　右（下）に移動させる量、画像の横幅（高さ）は半角数字に、
　それぞれ変更してご利用ください。

なお、こちらの方法でも、
Windows・Mac・スマートフォン・タブレットや、
InternetExplorer・Chrome・Firefox・Safari等、
お客様がページを見る端末・ブラウザが変わると、
文字列の高さの違いなどにより
位置に若干のズレが発生する可能性がありますので、

可能な限り複数の環境でご確認の上、
画像を右（下）に移動させる量の調整をお願いします。