【楽天】スマホ「商品画像」の上にバナーを設置&高さ自動調節jQueryのご紹介

コンサルロケッツ STATION

肆号機

2018年9月8日

みなさんこんにちは。ロケッツ4号機です。
楽天スーパーSALEですね！！なにか買いましたか？？僕は米を買いました。
EC(楽天)で買えばいちいちスーパーから肩壊しつつ担いで持ち帰る必要もありません。
もっと早く気づくべきでした。

これからは「米はEC(楽天)で買え」。
家訓にしたいと思います。

さて今回は・・・
『楽天のスマートフォン、商品ページ「商品画像」の上にバナーを設置する方法』をご紹介します。
さらに！バナー設置時の「高さ」を自動調節できるJavaScript(jQuery)も併せて記載！

コピペでかんたん設置！
セール時のバナー設置で、友達に差をつけよう！

楽天スマホ「商品画像」の上のバナーってなに？

そもそも「スマホ『商品画像』の上のバナー」ってどこ？って話ですが、こちらです。



楽天の有名な店舗などで見かけたこと、あると思います。
商品ページ表示後すぐに目に入る箇所(ファーストビュー)なので、おすすめ商品やセール時のクーポンなどを表示する店舗が多いと思います。

「うちの店舗もこのバナー出したい」とお考えの店長様！
よくぞこの記事にたどり着いてくれました！それでは引き続き下記へお進みください。

よくある設置方法と問題点

ここで、よくみかける設置方法を見てみましょう。

RMS「商品ページ共通説明文」記入例

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/xxxxxx/sample01.css?" ="">
<div id="headerImg" ="">
<ul ="">
<li =""><a href="[リンク先]"><img src="[画像]"></a></li ="">
<li =""><a href="[リンク先]"><img src="[画像]"></a></li ="">
</ul ="">
</div ="">

</ul ="">

</div ="">

「sample01.css」記入例

/* 商品ページのサムネイル画像上下のマージンを、バナー分とる */
#itemImageSlider{
margin: 150px 0 32px 0 !important;
}
/* バナーを絶対位置(position:absolute)で配置 */
#headerImg{
position: absolute;
top: 270px;
left: 0;
right: 0;
margin: 0 auto;
}

/* 商品ページのサムネイル画像上下のマージンを、バナー分とる */

#itemImageSlider{

margin: 150px 0 32px 0 !important;

}

/* バナーを絶対位置(position:absolute)で配置 */

#headerImg{

position: absolute;

top: 270px;

left: 0;

right: 0;

margin: 0 auto;

}

上記の場合の問題点

この設置方法の問題点は「CSSで無理やりバナーを設置している」点です。
まず「#itemImageSlider」は、商品ページのサムネイル部分にかかるIDですが、ここにマージン（特に上部）をかけることでバナー表示分の「余白」を用意しています。
そうしてバナー要素である「#headerImg」に「position: absolute」をかけて、先ほどの「余白」にバナー位置を合わせることで、あたかもヘッダー下にバナーを「差し込み表示」しているかのようにしているのです。

しかしこの場合、バナーの個数やバナーの高さの変更に伴い「#itemImageSlider」のマージンを調整しなければならないという問題が発生します。
いちおう解決策としてCSSメディアクエリ(@media)で端末ごとのマージンを設定すれば調節は可能です。しかし、バナー変更のたびにCSSを編集するのは少々手間が掛かってしまいます。

「ここらへんのマージンとか自動で調節したい・・・」
そんなお悩みを解消するのが、こちらの方法↓↓↓

楽天スマホ「高さ自動調整」バナーの設置方法

要は「高さ(『#itemImageSlider』のマージン)」を自動で調節すれば良いだけなので、
仕組みとしてはとてもかんたんです。
RMS「商品ページ共通説明文」に記述するHTMLは先述ソースコードと同じものを使用します
JavaScriptファイルへのリンクを追加してください(下記)。

<script src="https://www.rakuten.ne.jp/gold/xxxxxx/autoheight.js" charset="utf-8" =""></script ="">

1	<script src="https://www.rakuten.ne.jp/gold/xxxxxx/autoheight.js" charset="utf-8" =""></script ="">

JavaScript(jQuery)

$(document).ready(function () {
  let $bnrArea = $('#headerImg');
  let $bnrAreatH = $bnrArea.height()+50;
  let $target = $('#itemImageSlider');
  $target.css('margin-top', $bnrAreatH);
});

$(document).ready(function () {

let $bnrArea = $('#headerImg');

let $bnrAreatH = $bnrArea.height()+50;

let $target = $('#itemImageSlider');

$target.css('margin-top', $bnrAreatH);

});

バナーエリアの高さ(height())にプラス50px(バナーエリアの高さぴっちりだと窮屈になってしまうので)した「高さ」を、サムネイル要素である「#itemImageSlider」のmargin-topに指定しています。こうすることでバナー個数の増減やサイズの変更により「高さ」が可変したとしても、自動的に合わせてくれるようになります。

CSS

#headerImg{
  position: absolute;
  top: 235px;
  left: 0px;
  overflow: hidden;
  width: 100%;
}
#headerImg li{
  margin-bottom: 10px;
}
#itemImageSlider{
  margin-bottom: 32px;
}