楽天ページ「買い物かごに入れる」ボタンの真上にバナーを差し込む方法（cssによるテキストを画像へ置換）⇒を改善した新しいテクニック

楽天ページ「買い物かごに入れる」ボタンの真上にバナーを差し込む方法

楽天商品ページ内「買い物かごに入れる」ボタン周りにバナー画像を置くハック

repo.oga-ria.com

設置方法

1. 以下のCSSを用意します。

   <style type="text/css">
   <!--
   span.unit { 
   background: url(画像URL) no-repeat left top; 
   text-indent:-9999; 
   display: block; 
   width: 400; 
   height: 100; 
   margin:15px 0; }

   -->
   </style>

   ※”画像URL”の欄は、予めサーバにアップした画像のURLを差し込みます。
   ※width:400; height:100;　←画像の大きさに合わせて適宜変更してください。

2. 上記のCSSを、商品ページのHTML編集欄へ貼り付け、更新します。
   ※RMS内「デザイン設定」の、「共通説明文（大）」へ貼り付ければ、全商品へ反映させる事ができます。

⇒CSSの『text-indent:-9999;』で、画像置換をしていますが、これのパフォーマンスを良くした方法は、
400×100pxで作成したバナーをR-Cabinetへアップし、
以下CSSを、「共通説明文（大）」へ貼り付けます。

<style type="text/css">
<!--

/* 買い物カゴの真上にバナーを差し込む */
span.unit { 
background: url("jpegのR-CabinetのURL") no-repeat left top; 
overflow: hidden;
text-indent:100%;
white-space: nowrap;
display: block;
width: 420;
height: 120px;
margin:15px 0;
}

-->
</style>