CSS 縦バナーのサイド表示、両サイドへの固定表示

楽天ショップなどで縦バナーを両サイドに表示しているショップをよく見かけますよね。両サイドのスペースをうまく活用できて良いと思います。

ただ、背景画像として設定しているのでクリックしてページに飛んだりするような設定はできません。

縦バナーの設定CSS

<style type="text/css">
body {
  background-image:url("画像のＵＲＬ");
  background-repeat:repeat-y;
  background-position:right;
}
</style>

せっかく表示するならリンクを設定してみましょう。

サンプルHTML、CSS

<span style="position:fixed; _position:absolute; right:0; top:120px;">
  <a href="リンク先URL1" target="_blank">
    <img src="バナー画像1、商品画像1等" border="0">
  </a>
  <a href="リンク先URL2" target="_blank">
    <img src="バナー画像2、商品画像等2" border="0">
  </a>
</span>

このブログの両サイドにも設置してありますがページをスクロールしても常に表示された状態になります。

ちなみにright:0; を left:0; にすれば左サイドに表示されます。
top:120px;で上からの位置を指定します。
（上の例では＜span＞を使用していますが＜div＞でも大丈夫です。）

あとは＜span＞の内側に画像配置、リンクを設定すれば両サイドのスペースをさらに活用できそうですね。

さらに、おまけ情報として
普段は隠れててマウスオーバーで表示させることもできます。
このブログの右サイドに表示してます。

HTMLサンプル

<div id="side_item">
  <div id="item">
          表示する内容を記述
  </div>
</div>
</pre>

CSSサンプル
<pre class="brush: css;">
<style>
#side_item div{
  position:fixed;
}
*html #side_item{
  position:absolute;
  width:51px;
  height:281px;
  margin-right:-159px;
  right:0;
  top:200px;
}
*html #item a:hover{
  z-index:1;
  margin-right:0;
  width:210px;
  height:281px;
}
#item{
  top:200px;
  right:0;
  width:51px;
  white-space: nowrap;   
  padding:2px;
}
#item:hover{
  width:210px;
}
</style>