スマホページの横スクロール画像の上のバナー

Question

お世話になっております。

https://item.rakuten.co.jp/idog/out-3504-/?smadid=d3cb588cedc53277&iasid=07rpp_10095__eb_jhc0xjm7_5q_e264100b-85ed-4fbb-a489-70a7877b8e39


こちらのスマホページの横スクロール画像の上にあるバナーですが
どこから貼ればいいでしょうか？

また、適切なサイズは何になりますでしょうか？

ご教示いただけましたら幸いです。
ご確認ください、よろしくお願いいたします。###HR######IMG0bcbff9c95c85b689d305233d07217445.jpegIMG0###

Answer

ECマスターズの田辺です。

> スマホページの横スクロール画像の上にあるバナーですが
> どこから貼ればいいでしょうか？

RMSの設定では商品画像の上にバナーを表示させることはできませんので
参考サイトと同じように表示させるには
デザインレシピに書かれている
こちらの方法をお試しくださいませ。
https://club.ec-masters.net/index.php?design_page4


> 適切なサイズは何になりますでしょうか？

横幅は機種によって異なるので一律にご案内しづらいのですが、
結論から先に申し上げますと、
スマートフォン用商品説明文に表示させる場合は
横幅718ピクセル以上あるファイルを利用して、
横幅100%で表示させるのが良いと思います。

iPhoneやAndroidなどのスマートフォンブラウザは、
自身の解像度を把握しており、
どの程度拡大して表示すれば丁度良い見やすさになるかを判断して
「dpiスケーリング」という、
ページの拡大・縮小を行います。

dpiスケーリング機能については、下記URLをご参照ください。
http://www.mdn.co.jp/di/articles/2909/?page=6

その際、画像ファイルについては、
dpiスケーリングを行ってしまうと解像度が低くなり、
粗く見えてしまいますので、
デバイスそのままの解像度で表示させております。

利用者数の多い、iPhone7以降の4.7インチ画面のモデルのブラウザでは、
画面の横幅750ピクセルを、375ピクセル（つまり1/2）にスケーリングして
表示させております。

スマートフォン用商品説明文の左右には8ピクセルの余白が設定されているため、
内容の横幅は375-(8x2)=359ピクセルとなります。

画像ファイルについては、
dpiスケーリングを行ってしまうと解像度が低くなり、
粗く見えてしまいますので、
デバイスそのままの解像度で表示させます。
つまり、359の2倍である、718ピクセルのファイルを使うと
綺麗に表示される、ということになります。

iPhone6PlusやiPhone8Plus、大型Android機になると
スケーリング後の横幅やスケーリングの倍率が大きくなっていくのですが、
標準的に一番狭い、横幅718ピクセルに合わせて
画像ファイルを作成していただくと良いと思います。
（※6/18 18:22 内容修正）

の横幅を100%にしていただくと
全ての機種で横幅一杯に表示されますが、
の中身が横幅の変化に対応出来ない場合は、
タグなどで、中央揃えにして表示していただくと良いと思います。

Answer

田辺さま

遅ればせながらありがとうございます。

作業をやっと始めたのですが、
デザインレシピを参照に

ECステーションでスライドバナー作りました
貼り付けソースが下記です



こちらを、SP用に修正したのが下記です





こちらのソースを貼り付ける場所なのですが、

商品ページ設定（スマートフォン）
■商品ページ　共通パーツ設定
の
商品ページ共通説明文
にいれました。

が上に表示されません。。

どこか調整が必要でしょうか。
ご教示いただけましたら幸いです。
ご確認ください、よろしくお願いいたします。###HR######IMG0af4b5cfbbb1ae6aa2e42b5483aa28337.jpegIMG0######BR###

Answer

ECマスターズの田中です。

タグにご設定いただいた
https://www.rakuten.ne.jp/gold/sp-top-slidebanner.js/
上記URLにアクセスしていただくとおわかりいただける通り、
URLに誤りがございます。

「gold/」の後ろに「banlyshop/」を追加し、
末尾の「/」を削除していただき、
正しいURLに修正していただきますようお願いします。

Answer

田中様
ありがとうございます。
スライドバナーを設定できました！

下記のようなスライドバナーではない普通のバナーおよびリンクを同じように設定は可能でしょうか？






お手数おかけしますが
あわえてご教示いただけましたら幸いです。

よろしくお願いいたします。

Answer

田中様
度々すいません

ECステーションで新たしくスライドバナーを２まいのバナーをつかい
作成しECステーションノプレビューでは表示が正しいのですが、




を、使って貼ると

スライドが２まいめも１まいめの画像が表示されています

どこか調整ポイントありましたでしょうか？
バラバラ申し訳ございませんが、
こちらもご確認ください、よろしくお願いいたします。###HR######IMG007081ff8d4429e7fa5cdb0250b1b05ff.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> 下記のようなスライドバナーではない普通のバナーおよびリンクを同じように設定は可能でしょうか？

同じように、というのが
商品画像の上に掲載するということであれば、可能です。

「sp-top-slidebanner.js」に記載されたJavaScriptでは、
「class="iframeBefore" が設定されたHTMLタグを、商品画像の上に移動させる」
という動作を行っております。

class属性は本来スマートフォン用項目では使うことが出来ないため、
タグチェック機能を回避するバグを利用して、


と

で、
商品画像の上に移動させたいHTMLソースを囲むことで、
囲んだ部分を移動させることができます。

> スライドが２まいめも１まいめの画像が表示されています

banliさんのショップにて実際に掲載されている様子を確認したのですが、
２枚ご設定いただいたバナーが、正常に順々にスライドされているようです。
banliさんの環境では、現在もいただいたような症状が起こっておりますでしょうか。