楽天RMS 固定の左サイドバナーを設置してみよう(HTML編) - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:https://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

楽天RMS 固定の左サイドバナーを設置してみよう(HTML編)

楽天市場RMSサイト作りで、左でも右でもいいのですが、
スクロールしないで、固定されているバナー見たことありますよね。
カーソルを合わせると、オンマウスでバナーがニョ~と出でくるのです。
今回は、左のサイドバナーの実装方法です。

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

を記述します。
※バナー画像をあらかじめ用意してURLを変更するのを忘れないように

次に、先ほどのCSSの下に



を記述。
これで、プレビューを確認して、「登録」をすればOKです。
お疲れさまでした。


この記事を読んだ人はこんな記事も読んでます



Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/68-ab36bf4f

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。