楽天出荷日バナーをスマホ用商品ページにも表示したい

Question

お世話になっております。
現在ECステーションの出荷日バナーをPCの商品ページとスマホはトップページのみに表示させています。
これを、スマホ用商品ページの商品説明文に入れたいと思っています。
ですが、imgタグ使用数の制限がある為、画像は使わずCSSのみで背景色などを指定し、ある程度目立つような表示にしたいのですが、可能でしょうか?

Answer

ECマスターズの田中です。

ご質問にお答えする前に、出荷日バナーの仕組みについてご説明いたします。

出荷日バナーの設置用HTMLタグをご覧いただくと、
中にGOLDのURLが含まれていること、
また、imgタグではなくiframeタグが使われていることが
おわかりいただけると思います。

日付を表示する仕組みは、一枚の画像だけでは実現できないため、
HTMLページを、あたかもバナーのような見た目で埋め込むことで
出荷日バナーが表示されております。

そのため、imgタグ使用数の制限を受けることはございません。
なお、タグは、スマートフォン用項目では
使用が禁止されているため、通常、埋め込むことはできないのですが、
タグに手を加えることでご利用いただけるようになります。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、 
　今後、RMSの改修により、使用できなくなる可能性があります。 

設置用タグに含まれている
タグ、およびタグのタグ名の後ろに 
「 =""」を挿入していただくことで、 
説明文内でタグが使えるようになります。

Answer

以前のライブ配信で説明していた。スマホ商品ページの商品画像（フリック可能な最初の画像）の
直下に、イベント告知君を表示できる案内があったと思うのですが、同様の箇所に表示させるにはどうすればいいですか?

Answer

ECマスターズの田中です。

同様の箇所に、出荷日バナーを表示させたいということでよろしいでしょうか。
確認の上、改めてご案内いたします。

Answer

ECマスターズの田中です。

社内にて確認したところ、
LIVE配信では、スマートフォン用商品説明文の先頭に
イベント告知君を挿入されている事例を
ご案内差し上げたことがございました。

一度、任意の商品に対して、
スマートフォン用商品説明文の先頭に
出荷日バナー用の設置タグを挿入していただき、
（※先の返信のとおり、「 =""」の挿入が必要です）

この位置および方法でご希望に沿うかどうか
ご確認いただけますでしょうか。

Answer

ありがとうございます。
https://item.rakuten.co.jp/futon/w-522/?force-site=ipn
こちらのショップさんがスマホ商品画像の上にiframeを挿入されているのですが、こちらと同様の箇所に出荷日バナーを表示するにはどのように記述すればよいでしょうか。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

＞こちらと同様の箇所に出荷日バナーを表示するにはどのように記述すればよいでしょうか。

最初に、下記内容をメモ帳に貼り付けて
ファイル名の末尾を「.js」にして、
外部JSファイルとして保存し、
楽天GOLDにアップロードしてください。

= この下の行から ====================
jQuery(function($){
$('#itemImageSlider').before($('.beforeImage'));
});
= この上の行まで ====================

次に、下記内容を
スマートフォン用の商品ページ共通説明文に挿入していただくことで
商品画像の上に出荷日バナーを設置することができます。

= この下の行から ====================


出荷日バナー設置用HTMLタグ

= この上の行まで ====================
※外部JSファイルのURL・出荷日バナー設置用HTMLタグは、
　実際のURL・HTMLタグに置き換えてください。

Answer

ご連絡ありがとうございます。
スマートフォン用の商品ページ共通説明文に



出荷日バナー設置用HTMLタグ

を入力すると
許可されないHTMLタグ "iframe" が入力されています。となります。

Answer

ECマスターズの田中です。

＞許可されないHTMLタグ "iframe" が入力されています。となります。

最初の返信にて申し上げたとおり、タグは
スマートフォン用商品ページ共通説明文での使用が禁止されているため、
出荷日バナーを設置するには、
設置用のタグ、およびタグのタグ名の後ろに 
「 =""」を挿入していただく必要がございます。

最終的に、共通説明文に挿入していただくHTMLソースは
下記のような形になります。

Answer

=""は開始タグにも必要なのですね。失念しておりました。
無事解決しました。ありがとうございます。

Answer

お世話になっております。
同様の方法でimgタグを増やすことも可能ですか？

これで制限を受けることなく設置できるのでしょうか。
空要素の場合はどうすべきかお教え下さい。

また

のようにするつもりなのですが、aタグについては＝””をつける必要はないですよね？

Answer

ECマスターズの田辺です。

＞同様の方法でimgタグを増やすことも可能ですか？

スマートフォン用商品説明文にimgタグの制限なく
１０枚を超える画像を掲載する方法についてでしょうか。
そちらについては可能です。

＞空要素の場合はどうすべきかお教え下さい。

=""は制限があるタグの制限をなくすためにご記入いただいているので、
imgタグのような空要素の場合でも =""入れるだけで大丈夫です。

 /を入れる場合にはタグ内の末尾に入れていただき、

 /は省略していただいても構いません。


この方法により、制限なく画像ファイルを埋め込むことができますが、
埋め込みすぎて、読み込むデータ量が多くなり、
お客様が閲覧しづらくなってしまわないようご注意ください。


＞aタグについては＝""をつける必要はないですよね？

 =""をつけるのは禁止タグや画像制限を回避するためですので
制限のないaタグにつける必要はございません。

 =""をつける方法につきましてはデザインレシピでも
解説しておりますのでこちらもご覧いただけますと幸いです。
https://club.ec-masters.net/index.php?design_page5

Answer

ありがとうございます！

Answer

お世話になっております。
＝”” をクロスモールで入力した場合。クロスモール内でimgタグ制限10枚を超えるエラーが表示されうまくいきません。RMSでやるしかないのでしょうか。

Answer

ECマスターズの田辺です。

そうですね、
あらかじめクロスモール上で禁止タグや制限超えのタグなどを
入力できないようにしている可能性がございますので
 =""を入れる場合にはRMS上での編集をお願いいたします。

Answer

基本的に一括編集を行なうときはクロスモールを使って行なうので、バグ利用は控えようと思います。

楽天 出荷日バナーをスマホ用商品ページにも表示したい

楽天出荷日バナーをスマホ用商品ページにも表示したい