*

楽天商品ページのカート付近、商品名の下にバナーを貼る方法

公開日: : ネットショップ

ネットショップのショッピングカート付近といえば、商品を見たり買ったりする人なら誰でも目を通す一等地です。そんな所にお知らせやバナーなんかを貼る事が出来たら便利ですよね。

楽天の商品ページでは標準機能では用意されていませんが、工夫次第でカート付近にバナー画像を貼る事ができます。図で言うと以下の場所にバナーを貼る事ができるのです。

バナーを貼れる場所

ショッピングカートの所まで来たら必ず目に入る所なので、イベント事とか送料関係の案内などがあっても良いですね。ここに何のバナー画像を貼るかはアイディア次第です

商品名の下にバナーを貼る方法

楽天 RMS の標準機能にはありませんので、CSS を使ってカスタマイズします。商品ページの商品名辺りの html ソースを見ると、商品名に「<span class="item_name">」というクラスが指定されています。ここを足がかりにカスタマイズします。

.item_name{
    display:block;
    height:280px;
    background-image:url('バナー画像');
    background-position:bottom;
    background-repeat:no-repeat;
}

まず display:block で商品名をブロック要素にします。span タグはインライン要素といって高さを指定する事はできませんが、ブロック化する事で可能になります。これで高さを指定することが可能になったので、height で高さを指定します。(バナー画像の高さによって微調整が必要です。)

あとは、background-image でバナー画像を背景に指定、background-position:bottom で下部に設置、このままだと何枚もバナー画像が表示されてしまうので background:no-repeat で一枚だけ表示するように設定しました。

CSSを書く場所

CSS を読み込ませる為に楽天 RMS 内で記述します。

楽天RMSでCSS

「1:店舗設定」→「1-2:デザイン設定」→「ヘッダー・フッター・レフトナビ」を開きます。

使用しているテンプレートを編集して、ヘッダーコンテンツの一番上に外部 CSS を読み込ませるためのタグを記述します。カスタマイズが増えるとかなりの行数になるので、Gold スペースに外部 CSS をアップした方が良いでしょう。

<link href="CSSのURL" rel="stylesheet" type="text/css">

おわりに

リンクを貼る事はできませんが、ショッピングカート付近に貼れるバナー画像は色々と活用法がありそうです。ここに何を貼れば効果的かという事を考えるのも良いと思います。

  • Pocket

おすすめトピックス

関連記事

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

スマートフォンを持つ手
楽天のスマホページで外部CSSを使用する方法

楽天に限らずネットショッピングはスマートフォンで買い物をする人が増えているという事は2013年くらいから言われている事ですが、現在ではパソコンをも上回るシェアに迫っているようです。扱っている商材によっては既にスマートフォ […]

動画からアニメーションgifへ自動で変換してくれるフリーソフト「動画GIF変換」

gif と言えば透過に対応した画像形式の一つですが、gif はアニメーションにも対応しています。ただの画像でありながらパラパラ漫画の要領で動く画像が作れるわけです。アニメーション gif はインターネット上で動画が普及し […]

プライスダウン
楽天ショップのカテゴリページの価格を赤文字にするには

商品の価格表記って何色なイメージですか? 実際のお店に陳列された商品の値札、折込広告、Amazon などのネットショップを想像してみてください。商品には価格は付き物です。お客様に買ってもらう為に価格を提示しなくてはいけま […]

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

楽天会社概要
楽天ショップ会社概要ページもCSSを使って若干のデザイン付けが可能です

楽天ショップで買い物しようとするとき、送料や支払い方法、納期、利用規約等を調べるために会社概要ページを見る事もあると思います。 その会社概要ページ、字ばかりでダラダラと書き連ねられており読むのも辛いほど読みづらい構成とな […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
本格ネパールカレーの栗山町「earth」はお洒落で入りやすくてナンカレーが美味

北海道の栗山町にある earth(アース)は本格ネパールカレー

ネジを締める時のワッシャー(座金)には何の意味があるのか?

ネジと言えば日常生活で使う家電や生活用品に数え切れない数のネジ

中部国際空港(セントレア)のカプセルホテル「TUBE Sq」に泊まってみた口コミ感想

中部国際空港(セントレア)に2017年4月8日にオープンしたカ

岐阜県垂井町の大人気パン屋「グルマンヴィタル本店」の食パンをレビュー

岐阜県不破郡垂井町にあるパン屋「グルマンヴィタル(GURUMA

谷汲ゆり園
林の中に咲く百合が美しい岐阜県揖斐川町の「谷汲ゆり園」で森林浴をしながら散歩

岐阜県揖斐郡揖斐川町にある谷汲ゆり園は日本のゆり園ベスト5に選

→もっと見る