PCページの iframe 作成について。

Question

度々の質問、誠に申し訳御座いません。現在、楽天のPC用GOLDページに iframe を読み込ませてショップを構築しています。御社で制作された出荷日バナーはPC、タブレットの大きさに関わらず、高さまでぴっちり綺麗に収まっています。一方弊社で自作したはPC、タブレットなど、画面の大きさによって下段の途中で切れてしまっていたり、タブレットを縦画面で見た際にはiframe下に妙なスペース(意図していない最下段の空白)が生じてしまいました。以前教えて頂いたスマホの vw でも対応出来ず(上記と同じように意図していないスペースが出来る為)困っています。ご面倒をお掛け致しまして誠に恐縮では御座いますが、解決法をご教授頂きたく存じます。弊社でも調べましたが、時間を掛けたにも関わらず解決する事が出来ませんでした。何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。> > > はPC、タブレットなど、画面の大きさによって下段の途中で切れてしまっていたり、タブレットを縦画面で見た際にはiframe下に妙なスペース(意図していない最下段の空白)が生じてしまいました。頂いておりましたページが存在しないとのことで、確認することができませんでした。実際のページを拝見させていただきたいのでお手数ですが、URLをご連絡いただきますようお願いいたします。なお、ページの構成によっては縦横比が固定とならず解決できない場合がございますので予めご了承いただきますようお願いいたします。

Answer

伊藤様ご連絡有難う御座います。>なお、ページの構成によっては>縦横比が固定とならず>解決できない場合がございますので>予めご了承いただきますよう>お願いいたします。上記の件、承知致しました。また、ご確認出来ない状態について、大変失礼致しました。となります。埋め込み場所はヘッダー上部、御社のイベント告知君(R)の真上に設置しております。以上、お手数をお掛け致しますが、何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。> 埋め込み場所はヘッダー上部、御社のイベント告知君(R)の真上に設置しております。URLのご連絡ありがとうございました。確認させていたところ、こちらは、vwを利用して高さを変更するのは難しそうです。かわりに、下記に変更していただけますでしょうか。＝＝＝＝　以下に変更＝＝＝＝＝＝＝　以上に変更＝＝＝@media only screen and (max-width : 750px) {の部分で、画面幅が750px以下の場合という設定をし.hader_height{ height:100px;}の部分でclass="hader_height"の付与されている要素の高さを100pxにする設定をしています。数値の部分は自由に変更いただけますので文字の折返しのタイミングなどに合わせて修正をしてください。（750、100は仮で入れた数値です）＝＝＝＝@media only screen and (max-width : 750px) { .hader_height{ height:100px; }}@media only screen and (max-width : 500px) { .hader_height{ height:200px; }}＝＝＝＝のように、複数追加をすることも可能です。※@media only screen and (max-width : 750px) は数字が小さいものを下に記述して下さい。↓↓ですと、300の設定が効かない場合があります。＝＝＝＝@media only screen and (max-width : 300px) {}@media only screen and (max-width : 500px) {}＝＝＝＝すべて解説しますと長くなってしまいますのでhttps://sole-color-blog.com/blog/71/など、レスポンシブ CSS media screenで検索されて、参考サイトをご覧いただければと思います。

Answer

ご連絡有難う御座います。お教え頂いた通りに変更し、max-width : や.hader_height{　　　　height:100px;　　}の数字も変えてみましたが、上記の記述にすると今度は全て表示されず、1枚目のバナー辺りで表示が切れてしまいました。ちなみに、https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/のスマートフォン用商品説明文でも似たような(縦画面と横画面で空白の大きさが異なり、レスポンシブルになっていない？) 現象が起きました。最初の質問では PC ページにで使用した Flexbox が原因かと考えておりましたが、使用していないスマホ用ページでも似たような現象が生じてしまい…共通している事と言えば、共にバナーの下に文字を入力している事です。それが原因なのでしょうか…。お手数をお掛け致しますが、ご確認の程何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。> 数字も変えてみましたが、上記の記述にすると今度は全て表示されず、1枚目のバナー辺りで表示が切れてしまいました。大変失礼いたしました。一部、全角が入力されていたため、CSSが適用されずにいました。下記に修正していただき、お試しいただけますでしょうか。＝＝＝＝以下に変更＝＝＝＝＝＝＝以上に変更＝＝＝> 共通している事と言えば、共にバナーの下に文字を入力している事です。> > それが原因なのでしょうか…。こちらについては、ご認識されている通り文字（と画像）が入力されているためとなります。vwは横幅に対する比率となります。たとえば、height="200vw"（＝画面幅の２倍）としていただいた場合375 x 812pxのスマホでは縦持ち375 x 2 = 750px横持ち812 x 2 = 1624pxとなりますがテキストの場合横持ちのほうが、改行される回数が減り高さ小さくなります。対して画像は縦横比を維持しますので横持ちのほうが、高さが大きくなります。そのため、画面幅に対する高さが合わず、余白ができてしまっています。

Answer

ご連絡有難う御座います。先程、に修正を行い、CSSの数値を変更する事でPC 並びに所有のタブレットで空白を消すことが出来ました。また、別の場所でも class 名を変更し、適用する事が出来ました。お忙しい中ご対応下さり感謝申し上げます。解決済にする前に1つだけ確認させて頂きたく存じます。https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/のスマートフォン用商品説明文の空白は伊藤様のお話を総合するとスマホでは例えば@media only screen and (max-width : 750px) {/* 画面幅が750px以下のときの設定 */.smp_test{height:250vw;}}@media only screen and (max-width : 500px) {/* 画面幅が500px以下のときの設定 */.smp_test{height:310vw;}}のようにCSS ファイルを作成し、※●●●名は後日外部ファイルで作成する予定のファイル名です。と読み込めばスクリーン幅によって生じる空白を消す事が可能でしょうか。お手数をお掛け致しますが、ご確認の程何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。> スクリーン幅によって生じる空白を消す事が可能でしょうか。はい、頂いております通りのコードでスクリーン幅によって、高さを切り替えるようにできますので余白を消していただくことができます。

PCページの iframe 作成について。

カテゴリーから探す