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

公開日:  最終更新日:2015/06/11

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

スポンサードリンク

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

縦バナーの設定CSS

<style type="text/css">
body {
background-image:url("画像の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>



FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑