スマホ iframe 左右の余白が不均一

Question

いつもお世話になっております。先日、slickスライダーの設定を本フォーラムで教えてもらい、実際に設置してみました。スマホトップページに設置したのですが、画面が左右にブレてしまったので、過去のフォーラム（https://forum.ec-masters.net/post_view.php?id=6755）を参考にiframeにstyle="width:calc( 100% - 16px );"を入れました。すると、左右のブレはなくなったのですが、右側が余白が大きくなってしまいました。現トップページの、大きいスライドバナーがそれです。ここを綺麗に直したいのですが、どうすればいいでしょうか？よろしくお願い致します。

Answer

ECマスターズの田中です。複数枚表示時用の余白がそのまま右側に表示されていたことと、過去フォーラムの時よりも左右の余白が少ない箇所に挿入されておりましたので、それぞれの余白がなくなるよう調整していただく必要がございます。具体的には、fvslider.htmlの先頭にある<style>タグの中身にて、.slick-slide img { width: 100%;  } body { width: calc( 100vw - 5px ); }このように値を書き換えていただきますようお願いします。

Answer

田中さん度々ありがとうございます。回答いただいた通りに設定しましたら、画像同士がくっつきました。数日中にPCページにも流用を考えており、PCページでは画像が離れていてほしいのです。今、暫定的に.slick-slide img { width: calc( 100% - 5px ); }にして、少し隙間を空けています。スマホでは5pxだけ右の余白が大きい状態かと思いますが、ぱっと見で最初ほど違和感ないので許容範囲かとは思っていますが、他に良い方法があれば教えてください。よろしくお願いいたします。

Answer

ECマスターズの田中です。失礼しました、１点ご案内しそびれた内容がございます。fvslider.htmlを埋め込んでいるiframeタグのstyle属性をwidth: calc( 100vw - 10px );にご変更ください。また、同じiframeタグにて、height属性が設定されていないため、PCやAndroid機で閲覧した際、バナーが途中で見切れてしまいます。style属性の中に height:120vw; を加えるなどして、高さを調整していただきますようお願いします。> 他に良い方法があれば教えてください。余白を作った上で、バナーを囲む

タグの中央に位置するように、.slick-slider img の規則の中に margin: 0 auto;を追加していただくことで、左右の空白を均一にすることができます。

Answer

田中さんお世話になっています。コメントいただいた点、全て修正しましたら、良い感じになりました。ありがとうございます。＞PCやAndroid機で閲覧した際、バナーが途中で見切れてしまいます。こちらについて、height:120vw; を加えたところ、画面を横向けにすると余白が大きくできてしまいます。横向けで見ることは想定して作っていないので、他のiframeも見切れまくってますが、この際、勉強だと思い、https://forum.ec-masters.net/post_view.php?id=5740こちらを参考にscriptを入れました。すると、下のドットが見えなくなってしまいました(汗)ご教授よろしくお願いいたしますm(_ _)m

Answer

ECマスターズの田中です。実際の様子を確認したところ、仕組み上、下のドットがページの高さとしてカウントされていないためにこのような高さの調整になるようです。解決するのはかなり困難なので、iframeResizerの代わりに、<style>タグもしくは外部CSSファイルの中でメディアクエリを用いて、横幅ごとの高さ調整を行っていただく方法が一番現実的であると思います。https://techacademy.jp/magazine/9369

Answer

田中さんありがとうございます。難しいということで、今回はiframeResizerは使わないでおこうと思います。いただいたメディアクエリというのも、難易度高そうなので、また日を改めてチャレンジしたいと思います。本当に細かく丁寧にありがとうございました。

スマホ iframe 左右の余白が不均一

カテゴリーから探す