[楽天RMS]スマホページに高さ自動調整のiframeを挿入する方法！裏技を使ってカスタマイズ

楽天に出店しているショップさんなら当たり前になっているスマホ内でのカスタマイズ。
オリジナルヘッダーニューをつけたり、フロートバナーをつけたり、などなどさまざまなカスタマイズをしているショップが目立ちます。
逆にしていないと、売れない感じになっていますよね。

今回は、カスタマイズの王道的なスマホのカテゴリページ・商品ページのヘッダー部分にifreamを追加する方法です。
ただ、ifreamといっても最近はさまざまなデバイスがでているので、どの高さにあわせたら良いのやら・・・
なのでこの記事では、ifreamの高さを自動調整する方法でご紹介します！

今回挿入するifreamは下記になります。
楽天でよく配布されるキャンペーンバナー（616*120）をスライドで挿入をすること仮定して作ってます。
 
サンプルページ
 

CSS

#headerContents {
width: 1024px;
height: 200px; /* iframeの横幅が1024px時の高さを入力（※単位はpx） */
}

#itemImageSlider, .ctgTtl , .imageFlick {
margin-top: calc(200 / 1024 * 100% + 10px); /* iframeの横幅が1024px時の高さを入力（※単位はつけない） */
position: relative;
}

#itemImageSlider, #sCLContainer, #sCSLContainer, .ctgTtl , .imageFlick {
z-index: 1000;
position: relative;
}

@media screen and (max-width: 1023px) {
#headerWrap {
position: relative;
width: 100%;
padding-bottom: calc(200 / 1024 * 100%); /* iframeの横幅が1024px時の高さを入力（※単位はつけない） */
}

#autoheight {
position: absolute;
top: 8px;
left: 0;
width: 100%;
height: 100%;
}
}

#absoluteBox {
position: absolute;
top: 190px; /* トップからの距離を指定 デフォルトだとこのまま */
left: 0;
width: 100%;
z-index: 0;
}

バグコード

 	<link rel="stylesheet" =""="" href="https://www.rakuten.ne.jp/gold/店舗ID/任意.css">
<div id="absoluteBox" =""="">
<div id="headerWrap" =""="">
<iframe id="autoheight" src="https://www.rakuten.ne.jp/gold/店舗ID/任意.html" width="100%" height="100%" frameborder="0" scrolling="no" =""=""></iframe></div>
</div>

設置可能箇所

デザイン設定 > スマートフォンデザイン設定 > 商品ページ 共通パーツ設定
デザイン設定 > スマートフォンデザイン設定 > カテゴリページ 共通パーツ設定

参考店舗

こちらの店舗さんを参考にさせていただきました。
楽天ではかなり実績のある店舗さんになります。