楽天スマートフォン商品ページ内の共通表示について

Question

お世話になっております。
先ほど以下の商品ページをiphoneから確認したところ、商品ページ内の本来検索窓やお気に入りボタン等が表示される個所に福袋クーポンやフライングスーパーＳＡＬＥのバナーが表示されていました。

http://item.rakuten.co.jp/e-zakkamania/33566-1401336/
(スクリーンショットを保存し該当の個所に赤丸を付けたものを画像添付しています)

このような表示をするにはどのような設定をすればよろしいでしょうか？

どうぞよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。


いただいた商品ページの場合、

最初に、GOLD内に
http://www.rakuten.ne.jp/gold/e-zakkamania/sp/rms/item_bottom.html
このように、バナーを表示するためのHTMLファイルと、
別途で配置調整用の外部CSSファイルを
GOLD内に設置しておき、

バナー表示用HTMLを掲載するタグと
外部CSSを読み込むタグを
共通説明文の中に記載することによって、

本来ヘッダーの中にあるボタンを隠し、余白を作って、
余白の上に、バナー表示用のHTMLを乗せる、
という手順を取っております。


実現するためには、スマートフォン用の共通説明文に、
本来入力を禁止されているHTMLタグを入力する必要があるのですが、
RMSのバグを利用して、禁止タグチェックを回避しております。

そのため、RMSの改修により、
使用できなくなる可能性があることをご承知おきください。


実際に、外部CSSファイルに記述するスタイルシートは、
たとえば下記のような内容となります。

===== この下の行から ================
/* iframe用表示設定 */
iframe#pointBanner {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
    padding-top: 15px;
    z-index: 10;
    background: #FFFFFF;
    height: 190px;
}
/* ヘッダパーツを非表示に */
div#rstTopSearch, #ipnsh-header > .logo, .topbtn > ul > li { display: none; }
/* ページ先頭とメニューの間に空間を作る */
.current, #page_top .ctgTtl { padding-top: 160px; }
===== この上の行まで ================

共通説明文に記述するHTMLソースは、
たとえば下記のような内容となります。

===== この下の行から ================


===== この上の行まで ================
※外部CSSファイルのURL、バナー表示用HTMLのURLは、実際のURLに置き換えてください。

Answer

確認いたしました。
とても詳しく丁寧にご説明くださり誠にありがとうございました。