スマホスライドバナー設定について(rakutenスケッチページ利用）

Question

お世話になります





pc表示で作成した、上記をスマホトップページに張り付ける場合、width="950" height="444" が大きくなるので、幅をうまく調整する方法などありますでしょうか？
やはり、スマホ用のスライドバナーを作り直さないといけないでしょうか？
よろしくお願いします

ちなみに、テストで試したところクローム拡張機能・iphone表示されますが、アンドロイドでは真っ黒の画面でした。

Answer

ECマスターズの小野です。

いただいたご質問ですが、
週明け担当者より改めて回答させていただきます。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

表示部分の幅自体は、
https://forum.ec-masters.net/post_view.php?id=7283
にてご紹介差し上げている方法を応用することで
うまく調整することができるのですが、

確かに、弊社のAndroid上のChromeでも
真っ黒の画面のままになり表示されませんでした。
スマートフォン上での表示を想定されていない作りのため、
修正は非常に困難となっており、
できた場合でも、バナー更新ごとに毎回手修正が必要となる可能性が高いです。

クラブ会員の皆様に無料でご提供差し上げている
ECステーションのツールボックスに含まれる
「スライドバナー」であれば、
レスポンシブでの表示もできますので、
こちらで作成し直していただくことをオススメします。
https://club.ec-masters.net/index.php?ecm-ecstoolbox

Answer

田中さん

お世話になります。そうなんですね。

ECステーションのツールボックスに含まれる「スライドバナー」を利用し作成しましたが

トップページ設定（スマートフォン）→トップ説明文(1) に



以下（クローム拡張機能でみましたら）のように余白が生まれます。対処方法教えてくださいませ。
よろしくお願いします（アンドロイドでもiphoneでも、スライドバナーレイアウト上下左右はおさまってます)

https://www.rakuten.co.jp/mekin-hiroba/

Answer

ECマスターズの田中です。

> 以下（クローム拡張機能でみましたら）のように余白が生まれます。対処方法教えてくださいませ。

iframeタグに、478（ピクセル）という、
表示内容よりも高いheightが設定されていることが原因です。

height="478"
の代わりに
style="height: calc( 42vw + 50px );"
とご記載いただきますようお願いします。

Answer

田中さん

解決しました。いつも丁寧な回答ありがとうございます

Answer

田中さん

お世話になります
楽天HLより、下記のソースをスマホ・設定（横幅）を収めるには、どうすればいいでしょうか？
よろしくお願いいたします

Answer

ECマスターズの田中です。

カウントダウンの横幅を収める方法について、
確認の上、改めてご案内いたします。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

いただいたカウントダウンバナーは、
元々PC向けのバナーであるということでよろしいでしょうか。

iframeの内容が、横700px・高さ150px以外での表示に対応していないため、
その表示を保ったまま、無理やり縮小させる必要がございます。

下記ソースを、ご希望の場所（商品ページ共通説明文など）にご記載ください。
なお、小数点の処理などの原因により、
枠線の表示に乱れが発生する可能性がございますことを、予めお含みおきください。


jQuery(function($){
var wrpw = $('#coverbanner').width(), w = 700, h = 150;
$('#coverbanner iframe').css({transform: 'scale(' + Math.floor( (wrpw / w) * 1000 ) / 1000 + ')',transformOrigin:'0 0'});
$('#coverbanner').css({height: Math.ceil( h * (wrpw / w) ) + 'px'});
});

Answer

田中さん

ありがとうございます。

このカウントダウンバナーは、元々PC向けのバナー(楽天より配信）のものでした。
スマホ用に改造するには、わたしの技術では無理ですね。
大変たすかりました。
次回のSSセールなどは、ECステーションさんなど利用するようにします

スマホ スライドバナー設定について(rakutenスケッチページ利用）

スマホスライドバナー設定について(rakutenスケッチページ利用）