コラム 実用WEBデザイン

4,302views!

投稿日 : 2016年1月25日

楽天ショップやYahooショップの固定表示バナーの作り方

thum

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

最近の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>

ちょっと注意

cssでやると楽天やYAHOOでも管理ページのテンプレートに書けますが、
もっと違う動きをjsで実装したい場合はGOLDサーバやYahoo!トリプルを使って
iframeを使用する必要があります。

iframeを使用する際の注意点としては、今回の飛び出す固定バナーの場合だと
飛び出す予定の空間はiframe内なので、下(裏)にくる内容がクリックできないことです。

飛び出し注意です!



ちょっと注意が必要な場合のiframeの設置ですが、次回はjsプラグインを使った
もう少し違う動きの固定バナーを紹介したいと思います。