スマホページのファーストビューにバナーを設置する方法

Question

大変お世話になります。

表題の件でございますが、設置できてはいるのですが、縦幅が見切れてスクロールになってしまいます。

標準サイズで全表示できるにはどのように修正すればよいのでしょうか？

Answer

ECマスターズの田中です。

iframeの高さを設定しようとして、
height属性に 100% と記載しても、
iframeの内容を判断して自動で高さを調整してくれることはございません。

ちょうどよい高さを設定しつつ、スクロールを避けるために、
設置用のタグに

style="height: calc( 56vw + 30px );" scrolling="no"

上記属性を追加していただきますようお願いします。

Answer

大変お世話になります。

ご教授頂きました通りに実装させていただき解決いたしました。

本当に有り難うございます。

PS.　スライダー画像の大きさが変わった場合でも設定値の変更は必要ないのでしょうか？

ちなみに画像　640×120をと少し細めのバナーを入れますと同じように下に空白が出ます。

設定値height: calc( 56vw + 30px )のあたりを変える必要があるのでしょうか？

またその際の基準値等はございますか？

Answer

ECマスターズの田中です。

スライダーに使われている画像の、縦横比が変わった場合に
設定値の変更が必要となります。

スライダーに画像が表示される際、
縦横比を変えないように縮小される仕組みになっておりますので、
横幅が変わると、縦横比に応じて高さが増減します。
「vw」は、画面横幅全体の1/100を示す単位のため、
横幅に対する高さの比率をvw単位で、他パーツの高さをpx単位で、
それぞれ設定することでちょうどよい高さを設定することができます。

640x120の場合、(120÷640)×100≒19 となるため、
19vwにご変更いただくと、ちょうどよい高さになるはずです。

Answer

大変お世話になります。

本当に丁寧に有り難うございます。

十分理解できました。

今後とも何卒よろしくお願い申し上げます。