*

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

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

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

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

バナーを貼れる場所

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

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

楽天 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

おすすめトピックス

関連記事

Amazonの商品説明文に画像を載せられるようになりました「商品紹介コンテンツ」

Amazon の商品ページを想像してみてください。商品画像に商品説明がリストで列挙されている程度で実にシンプルですよね。楽天など他ショッピングモールと比べて商品アピール具合が大人しいと思いませんか? その理由は Amaz […]

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

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

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

線画に変換
写真や画像から綺麗なベクター線画に変換してくれるツールが便利

「この画像から線画にできる?」 この前そんな事を言われました。その画像とはある物の設計図のようなものでした。線画に出来るか?と問われれば出来ます。Adobe Illustrator で縁をなぞって線を書けばいいわけです。 […]

スマートフォン
楽天ショップも影響有るかも、スマホ対応サイトをGoogle検索順位で優遇化

2015年2月末、Google がスマホ対応サイトをモバイル検索で検索順位を優遇するという発表しました。PC の検索には影響しません。 Google、スマホ対応サイトをモバイル検索結果で優遇するアルゴリズム変更を発表、4 […]

画像ダウンロード
楽天R-Cabinetの画像をURLから一括でダウンロードする方法

楽天市場の商品ページにある商品画像や説明画像は、楽天 RMS の R-Cabinet にアップロードします。しかし、この R-Cabinet。画像ファイルの一括アップロード機能は用意されていても、一括ダウンロード機能は提 […]

著者について

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

フォローはこちら

       

       
Tシャツ
夏でも涼しい蒸れない無地TシャツならグリマードライTシャツがおすすめ【レビュー】

以前なんでも良いからとりあえず無地Tシャツを買おうと思って手に

長浜市の手打ちうどん処「二福亭」地元で美味いと話題のうどん屋さん

滋賀県長浜市にある手打ちうどん屋さんの「二福亭」は地元でうどん

彦根市の緑豊かで温かい雰囲気の民家カフェ「MokuMoku」でランチ

滋賀県彦根市にある隠れ家的民家カフェ「MokuMoku(モクモ

世界一のジェラート
彦根市にある世界一のジェラート店「ジェラテリアアズーロ」で滋賀ならではの味を堪能

世界一のジェラートのお店が滋賀県に、彦根市にあるなんて。半信半

スマホで遊園地経営ゲーム「ローラーコースタータイクーンタッチ」レビュー

自分で夢のワンダーランドを作る遊園地経営シミュレーションゲーム

→もっと見る