yahoo新デザインの導線の仕方

Question

yahooショッピングで新デザインを適用したのですが
今までカスタマイズしたヘッダーなどが見えない仕様になっておりました。

イベント開始用のバナーやほかの商品に誘導するためのバナーを貼りつけたいのですが
なにかいい方法はありますでしょうか？

PC.スマホとともにアドバイスを頂けると幸いです。

Accepted Answer

ECマスターズの伊藤です。

コードのご連絡ありがとうございました。

看板の仕様について確認したところ

https://store-info.yahoo.co.jp/s/shopping/toolmanual/sdesign/c/3305.html
> 看板は、高さ上限200ピクセル×横幅上限1,290ピクセル（*）で表示されます。

となっており、今回iframeは
高さが900px程度ございましたので、
設置するには、Yahoo!のデザインを壊していただく
必要がございます。

おそらく、CSSにて対応可能となりますが、
Yahoo!の正式な方法とは異なりますので、
自己責任でご対応頂ますよう
お願いいたします。


https://shopping.geocities.jp/biosupli/css/common.css
に以下のCSSを追加してください。

.mdFreeSpace.isLimited .elContent {
    max-height: 900px;
    overflow: hidden;
}


新ストアデザインの「看板」に、
ご連絡頂いた内容を設置してください。
https://store-info.yahoo.co.jp/s/shopping/toolmanual/sdesign/c/3305.html


上記を適用頂いても、高さが小さくなってしまう場合は、
Yahoo!のシステムで高さが制御されていますので、
高さを200px以内に収めて頂ますよう
お願いいたします。

参考までに、新ストアデザインの表示内容です。
https://store-info.yahoo.co.jp/s/shopping/toolmanual/sdesign/a/3301.html

Answer

ECマスターズの伊藤です。

> イベント開始用のバナーやほかの商品に誘導するためのバナーを貼りつけたいのですが
> なにかいい方法はありますでしょうか？

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

> yahooショッピングで新デザインを適用したのですが
> 今までカスタマイズしたヘッダーなどが見えない仕様になっておりました。

カスタマイズされたヘッダーですが、
商品ページの、現在の固定されているヘッダーの
下に表示されるイメージでしょうか。
また、スマホはどのように表示されていましたでしょうか。

元の状態がわかりかねるため、
詳細なイメージをご連絡くださいませ。

また、
・ヘッダーが設置されているページのURL
・ヘッダーのHTMLコード
・設置箇所（フリースペースなど）
をご連絡くださいませ。

フォーラムへのご投稿が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせくださいませ。

Answer

ご回答ありがとうございます。

添付させていただいたのが旧商品ページのヘッダーです。

yahooの新ストアデザインに変更したところ、
このヘッダーのiframeが見えなくなってしまいました。（商品ページのみ）

実際に挿入しているHTMLになります。

Answer

https://store.shopping.yahoo.co.jp/biosupli/k001.html

教えていただいたようにページの高さを変えようとトライしましたがうまくいきませんでした。
ですので、200px程度でスライドショーをiframeで指定したのですが
なぜかスクロールが入ってしまいうまくいきません。

widthもmaxで950pxに指定したいのですが
どのように指定すればいいでしょうか？
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 教えていただいたようにページの高さを変えようとトライしましたがうまくいきませんでした。
> ですので、200px程度でスライドショーをiframeで指定したのですが
> なぜかスクロールが入ってしまいうまくいきません。

https://shopping.geocities.jp/biosupli/css/common.css

/* iframe */
#sample iframe {
    width: 100%;
    height: 800px;
    border: none;
    overflow: hidden;
}

にて、iframeの高さ、幅が指定されていますので、
こちらを変更して、適用可能か、お試しいただけますでしょうか。