商品画像上にバナー設置について

Question

いつもお世話になっております。
商品画像上にバナー、メニューを設置したく、
https://forum.ec-masters.net/post_view.php?id=4135
こちらをみながらやってみましたがうまくいきません。
GOLDにjsファイルをアップロードし、
スマートフォン用商品ページの共通パーツに






00000はストアアカウントです。
を入れました。間違っている箇所がわからず。。。
宜しくお願いいたします。

Answer

ECマスターズの田中です。

sp-menu.htmlをiframeとして埋め込むようなイメージですね。
その場合は、divタグをiframeタグにご変更ください。
（linkタグは、スタイルシートが必要なければ不要です）

つまり、下記のような形式になります。
（仮に高さを100pxとしておりますが、Android向けに適切な高さをご指定ください）

Answer

有難うございます。
アイフレームで埋め込むのはできたようですが、
画像のように全て重なってしまっています。
記述したHTMLは【投稿内容について報告する】から送信させていただきました。
修正箇所をご教授いただきたいです。
宜しくお願いいたします。###HR######IMG02c99167125e08dd43abd0ffbf5ef9098.pngIMG0######BR###

Answer

ECマスターズの田中です。

テーブル全体を画面幅100%で表示させた上で、
その中に横１０列ぶんの画像を並べたため、
無理やり表示しようとして、このような表示になっております。

スマートフォンの画面幅に１０個の画像を並べるのは
タップする上でも非常に不便になりますので、
たとえば、〜を
とで囲み、
#menut5Y に対するスタイルシート規則から width:100%; を削除することで、
横スクロールするメニューを作ることができます。

まずはこのように修正いただき、
修正方法が不明な場合や、さらに修正が必要な場合は
改めてご返信ください。

Answer

返信ありがとうございます。
【とで囲み、
#menut5Y に対するスタイルシート規則から width:100%; を削除】試してみました。
少々見にくく感じたため、画像ショップ様のように5つずつ並べてみたくやってみましたが、
均等に並べることができませんでした。
どのように記述したらいいのか、ご教授いただけましたら幸いです。
宜しくお願いいたします。###HR######IMG0173c7bf37c1d5796a5d80ee06f8cbf43.pngIMG0######BR###

Answer

ECマスターズの田中です。

前回いただいたソースから大幅に変わっていない場合、
画像のサイズが特に指定されていないのではないでしょうか。
その場合、画像本来のサイズで表示しようとして、
均等な表示ができなくなる可能性がございます。

たとえば、75pxといった固定値、あるいは
20vwといった画面に対する割合で、
メニュー用の画像ファイルに均等な横幅の指定を
お試しいただきますようお願いします。

Answer

できました。
ありがとうございました。

Answer

すみません、二つの機種で確認したところ、
画像のように切れていてスクロールしなければ最後まで見られないものと、
きれいにすべて表示になっている機種がありました。
どのspでもすべて表示になるようにするには、
どこを調整すればよいのでしょうか？
宜しくお願いいたします。
記述内容は投稿内容について報告する】から送信させていただきました。



でファイルを呼び出しています。###HR######IMG0a962298624bc6d02cc2487e0fd160ee1.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> どのspでもすべて表示になるようにするには、
> どこを調整すればよいのでしょうか？

返信にていただいたiframeタグの高さが
内容より低くなることが原因ですので、
高さの調整をお願いします。

現在は260（px）という固定値が設定されておりますが、
たとえば、iframeタグに
style="height: calc( 60vw + 40px );"
このようにstyle属性をつけていただくことで、
横幅に合わせて高さを自動で変更することができます。

Answer

できました。
ありがとうございました。

あと、商品ページから、iframeで埋め込んでいるメニューをタップしてカテゴリページに入ると、
添付画像のように商品ページが残ったまま、表示になっており見にくいのですが、
これを解消する方法はあるのでしょうか。iframe部分だけがリンク先に飛んだ表示のような感じです。
宜しくお願いいたします。###HR######IMG0049c89662a48022245308f610d02d999.pngIMG0######BR###

Answer

ECマスターズの田中です。

おっしゃる通り、iframe部分だけがリンク先に飛ぶ
動作になっていることが原因です。

iframeに埋め込んだHTMLファイルの
〜 の間に  を記載するなどして、
ウィンドウ全体で開くようにご設定いただく必要がございます。
http://html5.cyberlab.info/elements/metadata/base-target.html

何も設定していないと、iframe部分で開く動作になりますので、
iframeで埋め込むHTMLファイルには、
必ずタグなどでリンクの開き方をご指定いただきますようお願いします。

Answer

ご返答ありがとうございます。




こちらのhttps://www.rakuten.ne.jp/gold/アカウント/sp-menu.htmlのなかに を追記で合っていますでしょうか？

Answer

ECマスターズの田中です。

はい、おっしゃる通り、
sp-menu.htmlの、との間に追記をお願いします。

Answer

できました。
ありがとうございます。
【投稿内容について報告する】からHTMLファイルの内容送信させていただきました。
出来ましたが、記述方法が不安で、確認していただいてもいいでしょうか？
宜しくお願いいたします。

Answer

ECマスターズの田中です。

いただいた内容でHTMLファイルを作成していただくことで、
問題なくご利用いただけるようになります。

念の為申し上げておきますと、
本来、HTMLに１つだけ存在するはずの
、、や各タグが
多数記載されておりました。
何かしらのツールを利用して作成されたのでしょうか。

このようなHTMLの文法違いについては、
ブラウザで解釈した上で表示するので、
見た目上は問題なくご利用いただけますが、
本来の文法とは異なっており、
ある日ブラウザの解釈方法が変わってページが崩れる可能性も
わずかながらございますことを、予めお含みおきください。

Answer

ご確認いただきありがとうございます。
まるごとスマホで作成したページのソースをそのままコピーしました。
ブラウザの解釈方法が変わってページが崩れる可能性があるのですね。しりませんでした。
ありがとうございます。
また何かあれば、質問させていただきます。宜しくお願いいたします。

Answer

いつもお世話になっております。
商品画像上バナーを増やしたのですが、iframe部分スクロールしなければ全体を見られなくなっている状態です。
先日も同じ質問をさせていただき、

style="height: calc( 60vw + 40px );"
このようにstyle属性をつけるとご教授いただきまして、そのまま変更していません。
どのように調整すれば良いのでしょうか？
宜しくお願いいたします。

Answer

ECマスターズの田中です。

> どのように調整すれば良いのでしょうか？

追加した要素を２つに分けて、それぞれ高さを足してください。
・画面横幅に合わせて高さが変わる部分 → vwに足す
・高さが固定されている部分 → pxに足す

ページを確認したところ、今回追加された要素は
バナー２つと検索窓でした。

画面横幅に合わせて高さが変わる部分は、
横幅100%・高さの指定なし（つまり自動調整）で設定された
バナー２つとなります。
各バナーは元の大きさが縦250px・横1100pxなので、
高さの合計を横幅で割る、つまり ( 250px × 2個 ) / 1100px で
約45vwを追加してください。

検索窓部分は、窓自体の高さ30px＋上下余白20pxで
合計50pxを追加してください。

それぞれを 60vw + 40px に追加した結果、 105vw + 90px となります。