コンサルロケッツ STATION

みなさんこんにちは。ロケッツ4号機です。
楽天スーパーSALEですね!!なにか買いましたか??僕は米を買いました。
EC(楽天)で買えばいちいちスーパーから肩壊しつつ担いで持ち帰る必要もありません。
もっと早く気づくべきでした。
  
これからは「米はEC(楽天)で買え」。
家訓にしたいと思います。
  
さて今回は・・・
『楽天のスマートフォン、商品ページ「商品画像」の上にバナーを設置する方法』をご紹介します。
さらに!バナー設置時の「高さ」を自動調節できるJavaScript(jQuery)も併せて記載!
  
コピペでかんたん設置!
セール時のバナー設置で、友達に差をつけよう!

  
  
  
  

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

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

  
楽天の有名な店舗などで見かけたこと、あると思います。
商品ページ表示後すぐに目に入る箇所(ファーストビュー)なので、おすすめ商品やセール時のクーポンなどを表示する店舗が多いと思います。
  
「うちの店舗もこのバナー出したい」とお考えの店長様!
よくぞこの記事にたどり着いてくれました!それでは引き続き下記へお進みください。

  
  
  
  

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

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

  

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

  

「sample01.css」記入例

  

上記の場合の問題点

この設置方法の問題点は「CSSで無理やりバナーを設置している」点です。
まず「#itemImageSlider」は、商品ページのサムネイル部分にかかるIDですが、ここにマージン(特に上部)をかけることでバナー表示分の「余白」を用意しています。
そうしてバナー要素である「#headerImg」に「position: absolute」をかけて、先ほどの「余白」にバナー位置を合わせることで、あたかもヘッダー下にバナーを「差し込み表示」しているかのようにしているのです。
 
しかしこの場合、バナーの個数やバナーの高さの変更に伴い「#itemImageSlider」のマージンを調整しなければならないという問題が発生します。
いちおう解決策としてCSSメディアクエリ(@media)で端末ごとのマージンを設定すれば調節は可能です。しかし、バナー変更のたびにCSSを編集するのは少々手間が掛かってしまいます。
 
「ここらへんのマージンとか自動で調節したい・・・」
そんなお悩みを解消するのが、こちらの方法↓↓↓

  
  
  
  

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

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

  

JavaScript(jQuery)

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

  

CSS

CSSは「#headerImg」のposition指定以外はお好みで調整してください。

  
  
  
  

さいごに

いかがでしたか??
楽天スマートフォン商品ページの上部にバナーを設置&自動調節についてご紹介しました。
ちなみに、この箇所にバナーを設置する方法は他にも何種類か存在しますので、あくまでひとつの参考としてご参照ください。
  
では自分は今からダイソーの「プチブロック」を作ります。また!

  
  
  
  

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • サリープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!