iframeについて

Question

iframeで楽天のスマホページにコンテンツ入れたいのですが少し大きさを縮小してスマホにぴったりの大きさで表示したいです。
どう記述すればよいのでしょうか？

Answer

ECマスターズの伊藤です。

iframeの表示についてですが、iframeの内容によって、
ご案内する内容が異なってまいりますので、お手数ですが、
ソース、もしくは適用したページのURLを
返信もしくは「投稿内容について報告する」よりお知らせいただきますようお願いします。

Answer

ECマスターズの田中です。

URLをご報告いただき、ありがとうございました。
確認の上、改めてご案内いたします。
お時間をいただきますので、何卒よろしくお願いいたします。

Answer

スマホページのゴールドで作製されたページですが作成者がいないのでドキュメント不足でどれを読み込んでいるのかわかりません。
ゴールドのスマホページはＰＣと違ってふつうにHTMLを置けばよいだけでなと思うのですが。。
どうするのでしょう？

Answer

ECマスターズの伊藤です。

iframeの表示につきまして、見た目のご確認をさせていただきたいので
お手数ですが、スクリーンショットと
似たようなページは縮小されてる、とのことですが
こちらのページのURLを頂戴できますでしょうか。

また、ゴールドのスマホページのURLがわからない、とのご質問も頂いておりますが、
修正したいページと、修正を行ったファイル名をフォルダ名も合わせて頂戴できますでしょうか。

内容につきまして、返信もしくは「投稿内容について報告する」よりお知らせいただきますようお願いします。
お忙しいところ度々お手数おかけいたしますが、よろしくお願いいたします。

Answer

了解です
明日には送ります

Answer

ECマスターズの伊藤です。

ページの確認方法をご連絡くださいまして、ありがとうございました。

＞　スマホで入って「物干し専門店きらら」トップページ＞真みどり色のボタン物干し竿＞竿一覧の画像付
こちらのページのURLですが、下記の通りとなっております。
https://www.rakuten.ne.jp/gold/ショップURL/smt/sao_30_smt.html
上下にスクロールした際に表示される、URL入力欄を
タップしていただくと、URLを確認することができます。
今後、修正の際のURL確認にご利用ください。

修正しているファイルと、ページのURLが一致していますので
修正する箇所についてはお間違いないと思います。
スマホのキャッシュの影響で、
古い情報が表示されていると思われますので
シークレットモードにて、表示のご確認を
お願いできますでしょうか。

シークレットモードの起動方法
https://pcmanabu.com/iphone-secret-mode/

また、iframe内に表示しているページについてですが
参照しているページのURLが
https://www.rakuten.ne.jp/gold/ショップURL/smt/sao_30_nabi_smt.html 
となっておりますが、こちらが上記と「似たページ」と
認識されている、いうことでお間違いないでしょうか。

Answer

以下以外の２件ありがとうございます。
スマホは疎くてすみません。
https://www.rakuten.ne.jp/gold/ショップURL/smt/sao_30_nabi_smt.html 
となっておりますが、こちらが上記と「似たページ」と
認識されている、いうことでお間違いないでしょうか。
→その通りです。

Answer

ECマスターズの伊藤です。

スマホはPCと違い、いろいろと制限がされており、ページの作成など難しいことが多ので、お時間をかけて慣れていっていただければと思います。
ご不明な点がありましたら、こちらよりお気軽にご相談ください。

Iframeのはみ出しについてですが、弊社の環境で再現ができなかったため、どういった形で表示されているのか確認させていただきたいため、スクリーンショットを頂戴できますでしょうか。
度々お手数おかけいたしますが、よろしくお願いいたします。

Answer

スマホページにうまく一覧が入らないでしょうか？
スクリーンショット添付つけておきます###HR######IMG079f26fcf81c39e3cf4ea29ae7dcd5648.pngIMG0######BR###

Answer

ECマスターズの伊藤です。

スクリーンショットありがとうございます。
こちら、ページ内での横幅の指定が640pxとなっており、スマホの画面のサイズが、それ以下（iPhone8の場合、375px）のため、ページ内に収まりきっていないと思われます。

そのため、CSSにて、pxで指定されているサイズを、%に修正をお願いいたします。
640pxと指定している箇所を、100％としていただき、それ以外の箇所も、3つ並んでいる箇所は33%にするなど、ページ全体の修正をお願いいたします。

なお、幅が指定されているCSSですが、
https://www.rakuten.ne.jp/gold/ショップID/smt/sao_30_smt.html
https://www.rakuten.ne.jp/gold/ショップID/smt/sao_30_nabi_smt.html
ともに、同一の指定がされております。
その他のページのレイアウトにも影響が出る可能性がございますので、修正するページのを
（sampleは半角英数でわかりやすいものに変更してください）
にしていただき、CSSを
＝＝＝＝＝＝＝＝＝＝
#sample .area {width:100%;margin:10px auto;padding:0 10px;border:0px;}
＝＝＝＝＝＝＝＝＝＝
や
＝＝＝＝＝＝＝＝＝＝
#sample .cat_u_botton{width: 30%;height:70px;background:#9c9d9b;text-align:center;font-size:20px;position: relative;border-radius:5px;}
＝＝＝＝＝＝＝＝＝＝
のように
#sample （半角スペースも必ず入れてください）
を適用したいCSSの頭に入れていただきますと、が適用されているページにのみCSSが適用されるようになります。


また、iframeですが、最初に頂いておりました、下記の記述でお間違いないでしょうか。


上記iframeで指定しております
https://www.rakuten.ne.jp/gold/ショップID/smt/sao_30_nabi_smt.html
のページですが、スマホ表示の際に
smt/sao_30_smt.html
に移動する記述が見られます。
上記のどちらのページが表示されているかご確認をしていただき、表示されたページを修正していただきますよう、お願いいたします。
確認方法ですが、例えば、ページ一番下に白文字でなにかテキストを入れるか、表示されても問題ないテキストを表示するなどをして、ご確認ください。

少々複雑な作りになっていますので、修正中にご不明な点などがございましたら、ご相談くださいませ。

Answer

ありがとうございます
トライしてみます