スマホの商品画像の上にバナーとバナーリンクを設置する方法

Question

いつもお世話になっております。

スマホの商品画像の上にバナーとバナーリンクを設置する方法を知りたいです。

今、スマホの商品ページの下あたりにクーポンバナーを設置しているのですが、
商品画像の上に設置できれば設置したいのですが可能でしょうか？

タグの設置については初心者です。
ご教授くださいますようお願いいたします。

・goldにバナーリンクを置いてバナーリンクを貼りたい
・クーポンがいくつかある場合はどのような設置が可能でしょうか？
・イベント告知君も2段で表示させたい

よろしくお願いいたします。

Accepted Answer

ECマスターズの田辺です。

＞今、スマホの商品ページの下あたりにクーポンバナーを設置しているのですが、
＞商品画像の上に設置できれば設置したいのですが可能でしょうか？

はい、可能です。

デザインレシピに
スマホの商品画像の上にスライドバナーを
設置する方法を解説しておりますので
まずはこちらをご覧いただきますようお願いいたします。
https://club.ec-masters.net/index.php?design_page4

＞クーポンがいくつかある場合はどのような設置が可能でしょうか？

クーポンがいくつかあるということでしたら
デザインレシピ通りにスライドバナーを作成する方法はいかがでしょうか。

＞イベント告知君も2段で表示させたい

スライドバナーの下か上にイベント告知君を置くということでしょうか。

こちらのフォーラムにて
イベント告知君を商品画像の上に表示させる方法を
ご案内しておりますので参考にしていただけますと幸いです。
https://forum.ec-masters.net/post_view.php?id=6550

総合いたしますとGOLDにアップロードするJavaScriptファイルの記述は

jQuery(function($){
$('#itemImageSlider').before($('.iframeBefore'),$('#rpoint_box_scroll'));
});

というようになり、
スライドバナー（.iframeBefore）と
イベント告知君（#rpoint_box_scroll）を上部にもっていくようになります。

難しい内容になりますので、
まずはデザインレシピをじっくりお読みいただき
ご不明な箇所を再度ご質問いただきますようお願いいたします。

Answer

お返事ありがとうございます。

よく読んでできることからやってみました。

スライドバナーとスケッチページで作りました。

GOLDにファイル名の末尾を「.js」にしてアップロードしました。
スマートフォン用の商品ページ共通説明文に入れて登録したところ、
表示は商品ページの下に入ってしまい、
ぐるぐるとページ取得中のようなマークが表示されるようになってしましました。

どこの設定が間違っているのでしょうか？

イベント告知君を上部に持ってくる方法はまだやっておりません。
まずは、クーポンだけのスライドバナーを上部に表示させたいです。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

sayudonさんにご設置いただいたスライドバナーを確認したところ、
スライドバナー自体の表示がうまく出来ていないようです。

一度、SketchPageの
画像・バナーをつくる＞スライドショーをつくる
より、再度、楽天GOLDへスライドショー素材のアップロードをお試しいただき、
表示されるようになるかどうかご確認いただけますでしょうか。

Answer

スケッチページは確認しましたが、問題なく表示されています。
再度アップロードし直しをしてスマホをみましたが、
まだエラー表示になっています。。。

スマホにスライドを表示するには、
スライドの横幅はどのぐらいが標準でしょうか？

いま横幅510でスライドをつくりましたが、
大きすぎるのでしょうか？

Answer

ECマスターズの田中です。

私にて確認したところ、
スライドバナー自体は問題なく表示されるようになっておりました。
ご対応ありがとうございました。

＞スマホにスライドを表示するには、
＞スライドの横幅はどのぐらいが標準でしょうか？

機種によって異なるため、一概に申し上げるのは難しいのですが、
現行機種の中で一番横幅が小さいiPhoneSEの場合、
ブラウザの横幅320pxから楽天スマートフォン用ページの余白左右8pxを引いて、
304pxに収めていただくことで、
ほぼ全ての機種で全体を表示させることができます。

その場合、横幅の広い機種で表示された時のために
スライドバナー設置用のタグをとで囲んで、
中央揃えにしていただけると良いと思います。

Answer

ありがとうございます。
もう一度やってみますが、
商品画像の上に表示できないので困っています。
何が違うのでしょうか？

Answer

やはり、スマホの商品ページの下で
表示エラーのようになっているのですが、
何が問題なのでしょうか。

また、商品画像の上に表示したいのですが、できないです。
よろしくお願いいたします。m(__)m###HR######IMG0eb8c2dae11536c2884f711cdb8b921fc.pngIMG0######BR###

Answer

ECマスターズの田中です。

＞やはり、スマホの商品ページの下で
＞表示エラーのようになっているのですが、
＞何が問題なのでしょうか。

私にて確認したところ、
再び、スライドバナー自体の表示が出来ないようになっておりました。

前回同様、SketchPageの
画像・バナーをつくる＞スライドショーをつくる
より、再度、楽天GOLDへスライドショー素材のアップロードをお試しください。

＞また、商品画像の上に表示したいのですが、できないです。

田辺よりご案内差し上げた
https://club.ec-masters.net/index.php?design_page4
上記デザインレシピにもございます通り、

スライドバナー用タグに含まれるURLの後ろに
 class="iframeBefore"
を、半角スペース区切りで追記していただくことで、
商品画像の上に移動するようになります。

Answer

ありがとうございます。
スマホで商品画像の上に表示する方法はできましたが、
やはり何度やってもエラーになります。

やはり表示できません・・・涙

なんでできないのでしょうか。

PCではスライドショーが表示ができています。


一度もスマホでは表示されたことがありませんが、
スケッチページからアップロードする際に何かやり方が間違っているんでしょうか？

他に方法はありませんでしょうか？

Answer

ECマスターズの田中です。

私にて確認したところ、
やはり、スライドバナー自体が表示できませんでした。

SketchPageではなく、
ECステーションのツールボックスに含まれる
「スライドバナー」を利用して、
スライドバナーの部分を作り直してみてはいかがでしょうか。

Answer

いつもお世話になります。
1週間かかりましたが・・・やっとできました。
ＥＣステーションさんのスライドバナーを使い
ありがとうございました。m(__)m

なぜ、スケッチページのスライドバナーがｐｃでは表示できるのに、
スマホでは表示されないのか・・・原因が今でもわかりませんが・・・

Answer

ECマスターズの田中です。

＞1週間かかりましたが・・・やっとできました。
＞ＥＣステーションさんのスライドバナーを使い

無事ご設置いただけて何よりです。

＞なぜ、スケッチページのスライドバナーがｐｃでは表示できるのに、
＞スマホでは表示されないのか・・・

確かに、PCでは表示されるのに、
スマートフォンや、PCにて開発者モードでスマートフォンの見た目に変更した時だけ
表示されないですね。
正確な原因究明は困難ですが、
スマートフォンでの閲覧を想定されていないのかもしれません。