楽天RMS　コピペでOK！固定の左サイドバナーを設置してみよう

楽天市場のショップ作成は楽しいですね！他店より目立ちたいとか、おしゃれなページにしたいとか、やりたいことがいっぱいありますが、こだわるときりがありませんね。

さて、楽天市場の他店のサイトで、左でも右でもいいのですが、スクロールしないで、固定されているバナーが設置されているの見たことありますよね。カーソルを合わせると、オンマウスでバナーがニョ～ッと出でくるあれです。

今回は、左のサイドバナーの実装方法をご紹介します。

RMSで固定されたサイドバナーを実装する方法

まず初めにRMSの編集を行う前に、通常の画像1枚、オンマウスで出てくる画像1枚のバナー画像を、あらかじめ作成し、アップしておく必要があります。

余談ですが当店では、Photoshopみたいな高額な画像編集ソフトは使っていません。(笑)当店が使用している画像編集ソフトは、Photoshop並みの機能が充実している、超高機能無料グラフィックソフトGIMPを使ってます。GIMPは使いやすいですし、十分きれいな画像が作れますよ。

あっ、本題から外れてしまいすいません。本題に戻りましょう。

楽天市場RMSのデザイン設定ヘッダー・フッター・レフトナビから、現在使用中のテンプレートの編集を選択して、ヘッダーコンテンツのどこでもいいですが、分かりやすいように一番上に以下をコピペして貼り付けてください。

<style type="text/css">
#sidebanner1 a{
display: block;
background: url("画像URL")/*通常時画像*/ no-repeat scroll 0 0;
width: 70px;/*画像幅*/
height: 190px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
left:0px;
top:240px;
}
 
#sidebanner1 a:hover{
display: block;
background: url("画像URL")/*マウスオーバー時画像*/ no-repeat scroll 0 0;
width: 70px;/*画像幅*/
height: 190px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
left:0px;
top:240px;
}
</style>

次に、先ほどのCSSの下に、以下を追加記述します。

<div id="sidebanner1">
<a href="リンク先URL"></a>
</div>

これで、プレビューを確認してバナーが表示されていれば成功ですよ。

あとは「登録」をすればOKです。