*

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

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

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

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

バナーを貼れる場所

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

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

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

おすすめトピックス

関連記事

偽サイト蔓延、早期対策を!楽天偽サイトの探し方

楽天ショップを丸々コピーした偽サイトや、楽天市場を装った偽メールが蔓延していると楽天が注意を促しています。 楽天市場を装う偽サイトやメール出現 楽天が注意呼びかけ – ねとらぼ 私からすると今更?という印象で […]

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

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

楽天ショップのカテゴリページで売り切れ商品を表示しないリンク方法

楽天ショップで商品の種類ごとにまとめられたカテゴリページというものがあります。楽天で買い物をした事がある人なら一度は目にした事があるでしょう。あるカテゴリに属する商品を一覧で見る事ができるので便利です。 そのカテゴリペー […]

手間不要!楽天スマホページ自動で楽に作れる「Snapp」が凄い

ネットショップにおいてもスマートフォンからの利用者が PC 利用者を上回りつつある事は周知の事実となっています。PC のページは作りこんでいても、スマートフォンページまでは手が回らない!という方もいらっしゃると思います。 […]

楽天ショップ等の縦帯バナーを商品別に変えるには?

楽天などのインターネットショップをパソコンで見ると、よく画面端に縦に伸びる細長いバナーが表示されている事があるでしょう。あれを縦帯バナーなどと呼んでいます。 ポイント○倍!とか送料無料!とかお客さんにアピールしたい文言を […]

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

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

著者について

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

フォローはこちら

       

       
Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

北海道チーズおかき
チーズの旨味が超濃厚!YOSHIMIの「北海道チーズおかき」

北海道に本社を置き、レストラン事業や製菓事業を行っている YO

無効なURLです。
エックスサーバーへ移転時にデータベースをインポートしたら「無効なURLです。」

高速で安定度の高いと評判のエックスサーバーへサイトの移転を行い

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だ

北のちーずボー
北海道産チーズのスティックケーキ「北のちーずボー」

新千歳空港のお土産店で販売されていた「北のちーずボー」を買って

→もっと見る