【楽天】買い物カゴ上バナーを設置しよう

楽天で、買い物をしている時に

買い物カゴボタンの上に、バナーが差し込まれているページは
見たことありませんか？

ショップ運営をされている方は
うちにもできたらなぁ～なんて思いませんか？

今回はそのバナーを差し込む方法をお教え致します。

ここを参考に作りました。
http://repo.oga-ria.com/rakuten-tips-kagobanner-49.html

こんな風に、買い物カゴ上にバナーを置いて
注意を促したり、セールスに活用できたら素敵ですよね。

【参考ショップ：http://www.rakuten.ne.jp/gold/newbag/】

さて、このバナーを差し込む方法を説明します。

まず、バナーのサイズを決めます。
初めから大きいバナーサイズをお勧めします。

といっても、あまりバナーは横長じゃないほうが良いので

横　～500px　が良いかと思います。

縦　～300px　くらいですかね。

後ほどのサイズ変更は面倒なので
300pxの縦幅でも、デザインでは上下に余白をとれば良いことなので＾＾
今後、画像を入れ替えする事を想定して
余裕があるサイズにしましょう。

例えば、こんな感じ

こちらのタグを　個々の商品ページ情報の　「PC用商品説明文」か
RMS内「デザイン設定」の、「共通説明文（大）」に入れてください。
「共通説明文（大）」に入れると全ての買い物カゴ上にバナーを
差し込めると思います。

<style type="text/css">
<!--
span.unit { background: url(http://www.rakuten.ne.jp/gold/pajamakobo-lovely/shop/common/cart-bn2.gif
) no-repeat left top; text-indent:
-9999; display: block; width: 400px; height: 200px; margin:15px 0; }
-->
</style>

RMSに読み込ませているCSSに入れても反映するはずなのですが
私の環境では無反応でした。。。

RMS内「デザイン設定」の、「共通説明文（大）」にも
貼り付けてみましたが、同じく無反応でした。
やり方がまずいのか、原因は分かっていません。

もしや、CSSの　@charset “utf-8”;　が駄目なのか？
@charset “Shift_JIS”;　にして、スクリプトがやっと動く時があったので・・・

違いについてはこちら
http://www.homepage-tukuri.com/shosinshanyuumon/entry70.html

指定の商品のみ、このバナーを入れる場合は

個々の商品ページ情報の　「PC用商品説明文」に直接入れることになりますね。

個々の商品ページ情報に入れると、画像の大きさが変更になった場合

width: 400px; height: 200px;　の部分を修正しないといけないので

一括作業が必要になりますので、少し大変です(=_=;)

是非、設置してみてください！