楽天GOLD name属性について

Question

お世話になっております。
現在スーパーセールに向けてセールページを作成しています。
https://www.rakuten.ne.jp/gold/●●●●/sale/sale.html

ヘッダー部分にフローティングヘッダーを表示し、目玉商品等の見出しにname属性をつけてページ内ジャンプできるようにしているのですが、ジャンプした後スクロールにてページ上部まで行くと、
ヘッダー部分が隠れてしまいます。

また、スマホ表示はiphone6sで確認した所、問題はないのですがクローム拡張機能で閲覧すると
拡大表示となります。別環境ではそのような表示になるのではないかと危惧しています。

修正するにはどのようにすればいいでしょうか。

Answer

ECマスターズの田中です。

> ヘッダー部分にフローティングヘッダーを表示し、目玉商品等の見出しにname属性をつけてページ内ジャンプできるようにしているのですが、ジャンプした後スクロールにてページ上部まで行くと、
> ヘッダー部分が隠れてしまいます。

「base.css」にて、
#wrap に対する overflow: hidden; を削除し、
#header に対する margin-top を padding-top にご変更いただくことで
ページ内ジャンプが発生した後もヘッダーが隠れないようになります。

今回の変更（overflowの削除、margin→paddingの変更）によって
ページ内の別の場所の表示が乱れそうな場合は、その旨ご返信ください。

> また、スマホ表示はiphone6sで確認した所、問題はないのですがクローム拡張機能で閲覧すると
> 拡大表示となります。別環境ではそのような表示になるのではないかと危惧しています。

スマートフォンで開いたとき、
ページ全体をどれくらいの幅で表示したらいいか
ブラウザで判断できなかったことが原因ですので、
表示する幅の指定ができる、タグをご記載ください。

sale.htmlの場合、内容の横幅が1000pxとなっておりますので、

と、〜内にご記載いただく形になります。

Answer

ありがとうございます。非常に助かりました！！
すみませんが、もう一点お伺いしたいのですが、
スマホ表示の時、ヘッダー部分のインラインフレーム内のフォーム部分がスマホだとPC表示よりも高さが出てしまい、本来のサイズ指定では領域が隠れて表示されてしまう為、やむなくiframeのheightを通常サイズよりも大き目のheightを指定することで表示させているのですが、これを修正する方法はございますでしょうか？ヘッダー内のiframeのheight通常サイズは122pxのところ大きめに指定しております。

Answer

ECマスターズの田中です。

> スマホ表示の時、ヘッダー部分のインラインフレーム内のフォーム部分がスマホだとPC表示よりも高さが出てしまい、本来のサイズ指定では領域が隠れて表示されてしまう為、やむなくiframeのheightを通常サイズよりも大き目のheightを指定することで表示させているのですが、これを修正する方法はございますでしょうか？

の中にある
 と  、
つまり入力欄と「検索」ボタンの幅の合計が
の横幅を超え、２行に折り返されることが原因ですので、
入力欄の横幅を狭めるなどして、１行におさめるよう修正していただくことで
正常な高さで表示されるようになります。

まずはアダルトさんにて、１行におさめるよう対策をお願いします。

Answer

無事解決しました。ありがとうございました。

楽天GOLD name属性 について

楽天GOLD name属性について