2018年9月8日
みなさんこんにちは。ロケッツ4号機です。
楽天スーパーSALEですね!!なにか買いましたか??僕は米を買いました。
EC(楽天)で買えばいちいちスーパーから肩壊しつつ担いで持ち帰る必要もありません。
もっと早く気づくべきでした。
これからは「米はEC(楽天)で買え」。
家訓にしたいと思います。
さて今回は・・・
『楽天のスマートフォン、商品ページ「商品画像」の上にバナーを設置する方法』をご紹介します。
さらに!バナー設置時の「高さ」を自動調節できるJavaScript(jQuery)も併せて記載!
コピペでかんたん設置!
セール時のバナー設置で、友達に差をつけよう!
そもそも「スマホ『商品画像』の上のバナー」ってどこ?って話ですが、こちらです。
楽天の有名な店舗などで見かけたこと、あると思います。
商品ページ表示後すぐに目に入る箇所(ファーストビュー)なので、おすすめ商品やセール時のクーポンなどを表示する店舗が多いと思います。
「うちの店舗もこのバナー出したい」とお考えの店長様!
よくぞこの記事にたどり着いてくれました!それでは引き続き下記へお進みください。
ここで、よくみかける設置方法を見てみましょう。
1 2 3 4 5 6 7 |
<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 =""> |
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 商品ページのサムネイル画像上下のマージンを、バナー分とる */ #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ファイルへのリンクを追加してください(下記)。
1 |
<script src="https://www.rakuten.ne.jp/gold/xxxxxx/autoheight.js" charset="utf-8" =""></script =""> |
1 2 3 4 5 6 |
$(document).ready(function () { let $bnrArea = $('#headerImg'); let $bnrAreatH = $bnrArea.height()+50; let $target = $('#itemImageSlider'); $target.css('margin-top', $bnrAreatH); }); |
バナーエリアの高さ(height())にプラス50px(バナーエリアの高さぴっちりだと窮屈になってしまうので)した「高さ」を、サムネイル要素である「#itemImageSlider」のmargin-topに指定しています。こうすることでバナー個数の増減やサイズの変更により「高さ」が可変したとしても、自動的に合わせてくれるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#headerImg{ position: absolute; top: 235px; left: 0px; overflow: hidden; width: 100%; } #headerImg li{ margin-bottom: 10px; } #itemImageSlider{ margin-bottom: 32px; } |
CSSは「#headerImg」のposition指定以外はお好みで調整してください。
いかがでしたか??
楽天スマートフォン商品ページの上部にバナーを設置&自動調節についてご紹介しました。
ちなみに、この箇所にバナーを設置する方法は他にも何種類か存在しますので、あくまでひとつの参考としてご参照ください。
では自分は今からダイソーの「プチブロック」を作ります。また!