小さな会社のためのECサイトプロデュース|ブレイントラスト
  • Yahoo!コマースパートナーBest Store Awards 2020特別賞
  • Yahoo!コマースパートナー認定
  • 06-6253-2005
    営業時間:平日10:00~19:00
  • お問合せ

PCページで別々の縦バナーを両側に設置したいのですが、どのようにすればいいでしょうか?

片側のみの縦バナー設置では、bodyタグの背景画像として縦バナーを設定しますが、その方法だけだと両側に別々のバナーを設定できません。
divタグを使って両側にバナーを設置する方法は楽天でも紹介されていますが、商品ページによっては長さが長すぎたり、途中で切れてしまったりするので、bodyタグを利用した場合に比べて見栄えが悪くなります。
そこでおすすめの方法として、bodyタグと同じ縦バナー設置cssを、左右を逆にしてhtmlタグにも設定する方法です。

html { background: url(xxxx.jpg) repeat-y right top;}

body { background: url(yyyy.jpg) repeat-y left top;}
(※marginとpaddingはreset.cssで0に設定しています)

こうする事でページの長さにピッタリと合った、別々の縦バナーを両側に設置する事ができます。