スマートフォン商品ページのバナー設置方法

Question

いつもお世話になります。
スマートフォンにECステーションさんの出荷日バナーを商品ページ共通パーツのところに設置していますが、バナー設置君を利用して、右の下の方（クーポンを取得している場合、クーポンの画像が出る下あたり）に設置したいのですが、どのようにすればいいのか教えてください。

Answer

ECマスターズの田中です。

方法をご案内差し上げる前に、
２点ほどご注意いただきたい内容がございます。

下記でご案内差し上げる方法は
RMSの、禁止タグを入力できるバグを利用しておりますので、
今後、RMSの改修により、使用できなくなる可能性があります。

また、出荷日バナーを、
楽天が提供している共通コンテンツを
覆い隠す形で設置された場合、
ガイドラインにて定められた、
下記の共通コンテンツを隠すという禁止行為に該当する可能性があり、
今年８月以降に違反点数の加算措置を受ける可能性がございます。

----
[重要]取扱禁止商材・禁止行為ガイドライン改定について
http://rd.rakuten.co.jp/rn/support_n/1702/02/32245233/?shops

2-（9）-31当社が全店舗に提供している共通コンテンツを隠す行為を禁止行為に新規指定

　［禁止行為］
　以下のような、当社が全店舗に提供している共通コンテンツの一部もしくは全部を隠す、または変更する行為
　・「http://www.rakuten.co.jp/」または「http://item.rakuten.co.jp/」で始まるページにおける共通ヘッダ部分
　（※GOLDページはこれに該当しません）
----

下記でご案内差し上げる方法は
楽天が提供している各種ボタンの
裏側に配置する形となりますので、
同じ位置に配置すると隠れますことを、
予めお含みおきください。


最初に、ECステーションにて
出荷日バナーを作成の上、
貼り付けソースをご用意ください。

次に、下記の内容を
メモ帳に貼り付けていただき、
ファイル名の末尾を「.css」にして
外部CSSファイルとして保存し、
楽天GOLDにアップロードしてください。

= この下の行から ====================
#spFixedBanner iframe {
  position: fixed;
  bottom: 画面下端からの距離px;
  right: 画面右端からの位置px;
}
= この上の行まで ====================
※画面下（右）端からの距離は、実際の半角数字に置き換えてください。
（両方0に設定すると、画面の右下端に表示されます）

最後に、下記HTMLソースを
スマートフォン用共通説明文にご記載いただくことで、
出荷日バナーを固定表示させることができます。

= この下の行から ====================


貼り付けソース

= この上の行まで ====================
※貼り付けソースは、実際にECステーションで出力した貼り付けソースにご変更ください。

Answer

田中さま

いつもお世話になります。
お忙しい中早々にありがとうございます。
ＥＣステーションさんのバナーですが、180px×82pxのサイズのものを利用していますがそのままですとスマホには大き過ぎるかと思います、スマホではどのぐらいのサイズが適正でしょうか。

カラーミーでも出荷日バナーを利用させていただいておりますが、カラーミーではトップページ・各商品のカテゴリ一覧ページ・カテゴリページと商品ページでも貼り付けしており、また上の方に貼り付けしているため、特に商品ページでは、商品画像の上に出荷日バナーを貼り付けていますので、必ずお客様の目に入るようになっています。
楽天でもカラーミーと同じような設置方法が一番いいと思いますが、分からないため、御社のバナー設置君を利用して商品ページで表示の方法をご教示願いましたが、
楽天では商品画像の上（店舗名のすぐ下）もしくは画像のすぐ下（商品名・キャッチコピーの上）などに設置する方法はないでしょうか。

Answer

ECマスターズの田中です。

＞スマホではどのぐらいのサイズが適正でしょうか。

スマートフォンにて、出荷日バナーの情報を
そのまま固定表示させようとすると、
場所を取りすぎてお客様の利便性を下げてしまう可能性が高いので
適正なサイズをご案内差し上げるのは難しいです。

＞商品画像の上（店舗名のすぐ下）もしくは画像のすぐ下（商品名・キャッチコピーの上）などに設置する方法はないでしょうか。

keiさんのショップには既に、
https://forum.ec-masters.net/post_view.php?id=3344
上記ご質問の５つ目の返信にてご案内差し上げた、
出荷日バナーを、項目選択肢および個数欄の上に表示させる方法が
導入されておりますので、

たとえば、楽天GOLDのjsフォルダにある「deliver.js」ファイルに記載されている
'#itemCart'
を
'#itemCart, #itemName'
に書き換えることで、
項目選択肢および個数欄の上・商品名の上、
両方に表示させることができます。

先述の返信内容では、JavaScriptをご利用される上での
注意点も記載しておりますので、
再度ご一読いただければと思います。

Answer

田中さま

いつもお世話になります。
同じことを大変申し訳ございませんでした。

'#itemCart'を
'#itemCart, #itemName'
に書き換え、無事表示させることができました、ありがとうございました。