スマホの商品ページについて２

Question

先日、スマホの商品ページの上を
http://item.rakuten.co.jp/shirocos/puri-om0506/
のように、
ショップ内検索窓やカテゴリーなどのメニューがある固定バナーを設置したいのですのですが、どうすれば宜しいでしょうか？

とお問い合わせさせて頂き、無事に設置できたのですが、
上部に固定バナーを設置したところ、PCに切り替えボタンや買い物かごなどが隠れてしまいました。
http://item.rakuten.co.jp/mobacaba/b940/?l2-id=Ranking_SP_top-0-day_rnkRankingMain&s-id=Ranking_SP_top-0-day_rnkRankingMain_19

のスマホページみたいに、上部バナーを設置しても、その上に買い物かごやポイント倍率などが表示されるようにしたいのですが、どうすれば宜しいでしょうか？

Answer

ECマスターズの田中です。

＞上部バナーを設置しても、その上に買い物かごやポイント倍率などが表示されるようにしたい
その場合は、買い物かご・ポイント倍率などの表示欄（）の下に空間を作り、
作った空間の中に上部バナーを設置してください。

具体的な作業については、
https://ec-masters.club/forum/post_view.php?id=2846
にて設置していただいた外部CSSファイル（ue-bana-kotei.css）の内容を
書き換えていただく形になります。

たとえば、下記のような内容です。

===== この下の行から ================
div#ipnsh-header {
    margin-bottom: 40px;
}

.spFixedBanner img {
    display: block;
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 999;
    width: 100%;
	height: 40px;
}
===== この上の行まで ================

div#ipnsh-header に対して margin-bottom を設定して空間を作り、
その中に .spFixedBanner img を配置しております。

.spFixedBanner img に対して、
高さを指定しない（バナーの縦横比を保とうとする）と、
横幅が長くなった時に高さがさらに延び、
下のボタン類を隠してしまうため、
高さに固定の値を設定しております。

そのため、横幅が延びるにつれ、
バナーがどんどん横に広がってしまうことを
ご承知おきください。

Answer

ご連絡ありがとうございます。
ご指摘通りの
『そのため、横幅が延びるにつれ、
バナーがどんどん横に広がってしまうことを
ご承知おきください。』
とございますとおり、横幅がスマホサイズではなく、バナーのサイズのままになります。

これを解決する方法はございますでしょうか？
もしくは別の方法はございませんでしょうか？

Answer

ECマスターズの田中です。

＞横幅がスマホサイズではなく、バナーのサイズのままになります。
こちら、先日ご案内したCSSに入れ替えた結果でしょうか。
文章ですと正確な状況が確認できないので、
実際に適用した結果が確認できるページをご用意いただくか、
スクリーンショットを撮影していただけますでしょうか。

＞これを解決する方法はございますでしょうか？
＞もしくは別の方法はございませんでしょうか？
http://item.rakuten.co.jp/mobacaba/b940/?force-site=ipn
最初のご質問にていただいた、上記商品ページの場合、
差し込んだ領域についてはHTMLの複数要素で作成されており、

店舗ロゴは横幅が広がっても、灰色背景の領域の中で左揃えになる、
ナビボタンは５等分された大きさ、かつ、中央揃えになる、

というように、横幅の変更に柔軟に対応する仕組みになっております。

１枚の画像の場合、拡大と縮小しかできないので、
画像だけでの調整は難しいですが、
たとえば、バナーの背景色と同じ色を、画面幅全体の背景色として指定する、
という方法があります。

下記のCSSをお試しいただけますでしょうか。
バナーを囲むタグを横幅100％・背景赤色の領域として設定しております。

===== この下の行から ================
div#ipnsh-header {
margin-bottom: 40px;
}

.spFixedBanner a {
display: block;
position: absolute;
right: 0;
top: 46px;
z-index: 999;
width: 100%;
height: 45px;
text-align: center;
background: red;
}

.spFixedBanner img {
width: 320px;
height: 45px;
}
===== この上の行まで ================