楽天スマホ商品ページのナビ/バーナー画像の設置のしかた

Question

イーザッカ　http://item.rakuten.co.jp/e-zakkamania/33586-1600181
神戸レタス　http://item.rakuten.co.jp/mobacaba/au208/

固定のバーナーでななく、
上記の店舗のスマホページのような、
商品ページの上部のバーナーやナビの作り方を教えてください。
宜しくお願い致します。

Answer

ECマスターズの田中です。

今回ご案内する方法は、
楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

最初に、ヘッダーとして表示させるためのHTMLファイルを、
楽天GOLD内に設置してください。

ご参考までに、

イーザッカさんは　http://www.rakuten.ne.jp/gold/e-zakkamania/sp/rms/header_new.html
神戸レタスさんは　http://www.rakuten.ne.jp/gold/mobacaba/sp/sp_item_gnav.html
上記HTMLファイルを、それぞれヘッダーとして設置されております。

次に、下記の内容でCSSファイルを作成し、
楽天GOLD内に設置してください。
===== この下の行から ============
.spHeader{
display: block;
position: absolute;
left: 0;
top: ページ上端とヘッダーの間隔px;
z-index: 999;
width: 100%;
height: HTMLの内容の高さpx;
}
===== この上の行まで ============
※ページ上端とヘッダーの間隔、HTMLの内容の高さは、実際の数値にご変更ください。

最後に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
画面上にヘッダー用HTMLの内容を固定させることができます。
===== この下の行から ============


===== この上の行まで ============
※CSSファイルのURL、ヘッダー用ページのURLは、実際のURLにご変更ください。

Answer

ありがとうございます。

Answer

やってみたのですが、（HTMLの内容の高さpx;）の部分が反映されないです。
HTML全部が表示されない。

あと、イーザッカさんは内容が多いHTMLで上記のやり方ですと、
商品ページのフリックの画像部分に重なってしまいませんか？

Answer

ECマスターズの田中です。

＞やってみたのですが、（HTMLの内容の高さpx;）の部分が反映されないです。
＞HTML全部が表示されない。

私にて、いただいたソースを貼り付けて確認したところ、
確かにタグの内容は、指定通り高さ400ピクセルで表示されました。

全部が表示されない原因は複数あります。

最初に、「header-sm.html」に記載された2つ目の画像ファイル
「summersale-616.jpg」のURLが、ローカルパスで設定されているため、
作業者のPC以外では画像が表示されないようになっております。

「summersale-616.jpg」ファイルを、
R-CabinetもしくはGOLDにアップロードしていただいた上で、
アップロードしたファイルのURLを、タグのsrc属性としてご指定ください。

二つ目の画像を表示させた上で、
「header-sm.html」を表示させた時の内容の高さが
400ピクセルに満たない場合は、
に対して「header: 400px;」を指定していたとしても、
内容ぶんの高さしか表示されません。

「header-sm.html」の内容の高さが400ピクセルになるように作成していただく、
背景色（画像）を指定して、内容が不足した分は背景が表示されるようにする、
などの対応をお願いします。

また、画像の横幅を100%指定した場合、
bodyタグの右端のmarginも0にしないと、右端に隙間ができますので、
「header-sm.html」に

body {
	margin-left: 0px;
	margin-top: 0px;
}

とご指定いただいているところを、

body { margin: 0px; }

にご変更ください。

＞あと、イーザッカさんは内容が多いHTMLで上記のやり方ですと、 
＞商品ページのフリックの画像部分に重なってしまいませんか？ 

イーザッカさんの場合は、
商品ページのフリック画像部分の上に「margin」属性で隙間を作ることで
HTMLを表示させるぶんの空間を確保しております。

http://www.rakuten.ne.jp/gold/e-zakkamania/sp/rms/sp_new.css
の30行目から77行目、「#itemImageSlider」に対する規則をご参照ください。
（複数記述があるのは、画面横幅によって数値を変えるためです）

400ピクセルのタグを埋め込む場合は、
「sm.css」の中に

body #itemImageSlider { margin-top: 265px; }

とご記載いただくと、丁度良い表示となります。
必要に応じて数値を増減させて、細かい調整をお願いします。

Answer

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