スマホヘッダー部分の高さ調整

Question

お世話になっています。過去の質問を参考に、フローティングヘッダーを作っています。そこでヘッダー部分の高さの調整がしたいのですが、どのようにしたら良いでしょうか。現在使っているCSSは、当店GOLD内"sp"フォルダの"spheadder.css"です。まだ試作中のため、HTMLは載せていません。（商品ページ共通説明文に入れる予定です）CSS要素にbody #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }を入れているのですが、ヘッダーと商品画像との間に隙間ができてしまいます。作りたいヘッダーは、http://item.rakuten.co.jp/spu/spu13329のようなイメージです。よろしくお願い致します。

Answer

ECマスターズの塚本です。別途担当者よりお返事させていただきますので、多少お時間いただきますが、今しばらくお待ちください。

Answer

ECマスターズの田中です。body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }で出来た画面上部の余白は、実際にそこあるはずの要素が見えなくなってできたものなので、複数要素の高さが組み合わされており、調整しようとすると複雑なので、一度完全に余白を消してから、余白を調整してください。具体的な手順ですが、上記規則のvisibility: hidden;をdisplay: none;に変更し、<article class="current">タグの内部に、必要な分だけ余白を作る形になります。組み合わせると、下記のような記述になります。body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { display: none; }article.current{ padding-top: 必要な高さpx; }※必要な高さ は、フローティングヘッダーの高さを半角数字で記述してください。

Answer

田中様ありがとうございます。商品ページのほうはうまく設定できました。同様にカテゴリページも設定したいのですが、カテゴリページでは　article.current{ padding-top: 必要な高さpx; }　に設定した分の高さが反映されず、フローティングヘッダーと本体上部が被ってしまいます。どうしたら良いでしょうか。よろしくお願い致します。

Answer

ECマスターズの田中です。それでは、「article.current」を「body」にご変更の上、表示をご確認いただけますでしょうか。article.current{ padding-top: 必要な高さpx; }↓body{ padding-top: 必要な高さpx; }

Answer

田中様お世話になっています。bodyに変更することで希望通りの表示になりました。ありがとうございました。

スマホヘッダー部分の高さ調整

カテゴリーから探す