EZ-SPARROW > SHOPSERVEで楽天市場のような縦に長いバナーを表示する

SHOPSERVEで楽天市場のような縦に長いバナーを表示する

October 01, 2014

ショップサーブ のサイトで売上アップを目指すなら 楽天市場 でよく見かける縦長のバナーを表示させる方法をご紹介する。

売上アップを目指すなら 楽天市場 のような長いバナーを表示させる方法

縦長のバナーはスクロールしても常に表示される。

これはご存知かと思うが、同じ画像がリピートされているのだ。

リピートさせる画像を用意する

リピートさせる画像の長さは特に指定はないが、楽天バナー用の素材を参考にすると良いかもしれない。

ちなみに今回使用した素材は下のサイトのが無料素材を利用した。

商用無料でPSD形式でもダウンロード可能だ。

使用した素材

バナーを作成したら、それを背景画像で使用している画像と合成する。

サイトの横幅からはみ出るサイズで画像を書き出せばOKだ。

CSSの設定

CSSでbodyの背景画像をたてにリピートさせるだけ。

body {
 background-image: url("画像url");
 background-repeat: repeat-y;
}

サイトを賑やかにアレンジしたいというサイトは採用してみるのも良いかもしれない。

 

RELATED POSTS