まるごとスマホによるY!ショッピングのスマホトップページ作成時の表示トラブルについて

Question

いつもお世話になります。

現在、ECステーションのまるごとスマホを使用して、Yahoo!ショッピングのスマホトップページの作成を進めています。

作成中のページは以下になります。
https://shopping.geocities.jp/modealacarte/ecstation/spc/index.html

この中で、＜HTML直接入力＞ブロックに、他の「おすすめショーケース」と「にぎわいランキングR3」の2ツールで作ったスライドショーのパーツをフレーム表示しようと思いましたが、どうも表示がうまくいきません。

不具合の具体的な内容

・Iphone7やiphone7plusで表示した時に、フレームの高さの指定が無視され、中の要素がかなり大きく表示されてしまう。

・そのフレームのブロック上での上下スワイプが効かず、ブロック自体が縦画面の約2/3ほどまでに大きく表示されてしまうため、該当のブロックが画面中心に表示されている場合、ページのスクロールができなくなってしまう。

・マニュアルで画像を進め/戻しするための右左矢印のナビゲーションボタンの挙動がおかしい。タップしても正常に動かず、スライド画像の先頭画像に戻ってしまったりする。
（画像上での横スワイプは正常に効きます）

幅100％の指定はちゃんと言うことを聞いてくれますが、フレーム高さと、中身の大きさが何をやっても言うことを聞いてくれません。

中身のスラードショーは、ポーズ中に2〜3商品を表示できる状態の大きさにし、ブロックの高さもそれに合わせて調節したいです。
また、右左矢印のナビゲーションボタンも正常に効くようにし、できればフレームのブロック上でも上下スワイプでページスクロールできるようにしたいです。

どこをどのように直したらよろしいでしょうか。

また、このページに横スクロールタイプのY!イベント告知くんを貼りたいです。
過去のフォーラムを見て、「表示自体の大きさを変更する方法」というのを読みましたが、少し難しくてできませんでした。
もう少し詳しくご説明いただけたら助かります。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞・Iphone7やiphone7plusで表示した時に、フレームの高さの指定が無視され、中の要素がかなり大きく表示されてしまう。 

こちらは、iOSにおけるタグの仕様であり、
原則として、高さの指定に関わらず、埋めこんだHTMLの内容が必ず全て
表示されるようになっております。
（PCやAndroid機では、高さの指定が適用されます）
そのため、パーツで表示される内容は全て表示されることを前提として
ページ作りを行っていただくことをオススメいたします。

上記を踏まえていただいた上で、まずは
http://sapo.ecsystem.jp/53
上記マニュアルに沿って、ご希望に沿うテンプレートをダウンロードしてください。
※にぎわいランキングR3も、同様の操作でテンプレートをダウンロードできます。
※タグに【スマホ対応】の表記があるテンプレートをご選択ください。

その後、２〜３商品表示する大きさにするなど、
見た目の調整についてはスタイルシートを操作する必要がございますが、
me&hiroさんでの調整が難しい場合は、
ECステーションにて、２〜３営業日程度で修正対応を承っておりますので、
マニュアルの右上にある電話番号まで、ご相談いただきますようお願いします。
※ナビゲーションボタンやスワイプ時の挙動については、
スライドの仕組みとYahoo!ショッピングのシステムの相性に起因する可能性があるため、
たとえばボタンを非表示にするといった代替案でご対応させていただく形になります。

＞また、このページに横スクロールタイプのY!イベント告知くんを貼りたいです。 

それでは、表示させたい位置に



$(function(){
$('#ypoint_box').css({
transformOrigin: "0 0",
transform: "scale(" + Math.floor( window.innerWidth / 510 * 1000 ) / 1000 + ")"
});
});

とご記入の上、タグとタグの間に、ヘッダーと同じ
横スクロール型イベント告知君用のタグをご記入ください。

続いて、同タグに、
id="ypoint_box"
と、ID属性を追加していただくことで、
横スクロール型イベント告知君を設置していただくことができます。

Answer

ありがとうございます。

iOSではフレーム内の要素はすべて表示されてしまうのですね。
では、スマホページでフレームを使う場合、中身の要素の大きさ調整が肝心ですね。

さっそくやってみます。
ありがとうございました。