楽天ショップやYahooショップの固定表示バナーの作り方 | ECプロ│ECサイト運営のためのアドバイス情報サイト

こんにちは、イメージデザインの古川です。

最近のWEBぺーじでは、ECサイトやそれ以外のサイトでも
右端に固定されたバナーをよく見かけます。

見かけるというか、実際に付けてという依頼が来るので
なかなか需要が多いです。
固定されているので、どれだけスクロールしても目に入るので、
売りたいものをかなりアピールできるのではないでしょうか。
~~もはや押し売り状態です。~~
同じ依頼が多いということは、それだけ効果もあるはずなので
（計測していないので憶測です。）
今回はこの固定バナーの紹介をしたいと思います。

固定バナーのHTMLソース

HTMLは単純にこんな感じです。

<a href="#"><img src="sample1.gif" width="360" height="120"></a>
<a href="#"><img src="sample2.gif" width="360" height="120"></a>

このHTMLとCSSで実装したいと思います。

固定バナーのCSS

<style type="text/css">
a{
	position: fixed;/*固定化*/
	right: 0;
	top:100px;
	margin-right:-320px;/*バナーを右に隠す*/
	-webkit-transition: all 0.5s;
    transition: all 0.5s;
	z-index:9999;
}
a:nth-child(2){
	top:220px;/*2個目のバナーの上からの距離*/
}
a:hover{
	margin-left:0;/*:hoverで位置を戻す*/
}
</style>

固定化させる命令は「position:fixed;」だけです。
後は、位置をtopとrightで調節しています。

昔はIEの古いバージョンに対応させるために少しややこしかったですが、
推奨ブラウザからは抜けたのでこんなにあっさりできるようになりました。

今回はマウスが乗ったら出てくるというような固定バナーなので
「margin-right」で初期位置をずらして「:hover」で位置を戻しています。

左固定の場合

先ほどのものから「right」を「left」に変えてあげれば
左に固定することが可能です。

<style type="text/css">
a{
	position: fixed;
	left: 0;/*leftに変更*/
	top:100px;
	margin-right:-320px;/*margin-leftに変更*/
	-webkit-transition: all 0.5s;
        transition: all 0.5s;
	z-index:9999;
}
a:nth-child(2){
	top:220px;
}
a:hover{
	margin-left:0;/*:margin-leftに変更*/
}
</style>