どうもこんばんは！HYPのこうじです。

今回は、楽天市場やYahooショッピングと言った『モール型ECサイト』でよくあるサイドにびろ～っと縦伸びたバナーの作り方をご紹介したいと思います。個人的には今の時代あまり必要性を感じませんが、それでもモール型ECでは未だにちょいちょい見ますね。

ページがレスポンシブなつくりじゃなかったり、PCとスマホでページを分けて管理運用している店舗では使えそうです。

メリット

• ページを閲覧中常に目に入るので、情報を訴求しやすい。

• インパクトがある？

デメリット

• レスポンシブサイトに向かない。

• 使い方によってごちゃごちゃしてうるさくなる。

縦にびろ～んバナーを作ってみよう

まずはコーディング

サクサクッと行くよ！まずはタグを作成。

<div id="vertical_banner" style="background-image: url('images/example.png')">
  縦にびろ～んバナー
</div>

説明

基本的にはスタイルシートでサイドに固定表示させて、<img />を使用するのではなく、<div />を利用して背景画像で表示させます。

また、表示する背景画像もスタイル群に含めてしまうと、もしスタイルシートを外部ファイルにした場合サイドバナーだけスタイルシートファイルを更新という面倒なことになってしまいます。なので、ページの更新はhtmlファイルのみにする為、背景画像だけはタグにインラインで埋め込んでいます。これでバナー更新も楽ちんですね！

<div />の中のテキストはSEO対策です。極論でいったらなくても機能します。極論じゃなくて機能するわ（笑）

スタイルシートでデザイン

#vertical_banner
{
    /* 左上に固定表示 */
    position: fixed;
    top: 0;
    left: 0;

    /* 横幅 */
    width: 65px;

    /* 縦幅 */
    height: 100%;

    /* 背景を左上から縦に繰り返して表示 */
    background-position: 0 0;
    background-repeat: repeat-y;
    background-color: transparent;

    /* SEO用のテキストを隠す */
    text-indent: -999em;
}

説明

要素を左上で固定する為に、position: fixed;で固定します。

重要なのは縦幅で、height: 100%;は普通に使用すると機能しないんですが、fixedで固定した状態の場合はブラウザ幅いっぱいで設定されます。これで左、もしくは右端にびろ～んと要素を縦いっぱいに伸ばす事が出来ます。

背景はブラウザの縦幅によって可視サイズが変わりますので、背景を縦にリピートする事で途切れない表示が可能です。もちろん、リピートさせない作りもアリです。作るバナーによります。

最後にSEO用に入力したテキストは表示する必要が無いので、飛ばします。ただし、バナーと関係のない内容を入れると、スパム行為になる恐れがあるのでご利用は計画的に。

ブラウザサイズを考慮する

大抵このバナー表示を利用する場合、サイトの作りはセパレートタイプ（横幅が決まっているページの作り）で作っていると思います。リキッドじゃ、使いづらいですからね。

なので、もしサイトの横幅以下にブラウザサイズが小さくなってしまったら、勿論横に固定で表示しているだけなのでメインコンテンツに内容が被ります。

そうならないように、メインコンテンツに被りそうになったら、バナーが見えなくなるようにカスタマイズしましょう。

@media (max-width: 1155px)
{
    #vertical_banner { display: none; }
}

説明

メディアクエリは、条件に合致した場合にのみスタイルシートを適用するスグレモノです。今じゃ当たり前ですが、html5登場当初は、IEのせいで便利なのに非常に使いづらかったのを覚えています。

上の例でいくと、ブラウザの横幅が1155px以下の場合に非表示にするという設定です。『max-width: ○○px』の○○部分に適用する横幅を入れます。今回は横幅1000pxのページで横幅65pxのサイドバナーを入れて、メインコンテンツとの間が10pxは空くように考慮するという設定で1155pxです。

（サイトの横幅） + （両サイドの縦バナー幅分） + （両サイドの余白） = 合計値1000px + （65px * 2） + （10px * 2） = 1155px

完成！

あとはページに突っ込むだけです。簡単ですね！

バナーの横幅は基本的には同じサイズで作るのが望ましいですが、どうしても毎回変えたい場合は背景画像URLと一緒にタグにインラインで組み込むのもアリですね。

縦にびろ～んバナーにリンクを貼ろう

上記で紹介したバナーに応用でリンクを貼ってみましょう。めちゃくちゃ簡単です。<div />を<a />にしてリンクを貼るだけです！

スタイルシートをちょっとカスタマイズ

<a />はインライン要素なので、ボックス要素に変更する必要があります。

また、リンクを貼る場合は、『ここはリンクされて別ページへ飛べますよ～』っていうのを分かりやすくするために、マウスオーバーアクションを入れた方が親切かもしれません。

#vertical_banner
{
    /* 左上に固定表示 */
    position: fixed;
    top: 0;
    left: 0;

    /* 横幅 */
    width: 65px;

    /* 縦幅 */
    height: 100%;

    /* 背景を左上から縦に繰り返して表示 */
    background-position: 0 0;
    background-repeat: repeat-y;
    background-color: transparent;

    /* SEO用のテキストを隠す */
    text-indent: -999em;

    /* ブロック要素に変更 */
    display: block;

    /* 透過変更をスムーズにする(任意) */
   -webkit-transition: opacity .2s ease;
   transition: opacity .2s ease;
}

/* マウスオーバー時の表現 */
#vertical_banner:hover
{
    /* 20%透過させる */
    opacity: .8;
}

/* コンテンツに被らないようにするメディアクエリ */
@media (max-width: 1155px)
{
    #vertical_banner { display: none; }
}

完成！

これで、サイドバナーにリンクが貼らさりました！

縦にびろ～んバナーにリンクを複数貼ろう

今度はさらに応用して、複数のリンクを入れてみたいと思います。さらにごちゃごちゃしてきましたね！ここまで来ると完全にネタです（笑）

画像を複数並べる場合は、画像を背景にする必要性が無いので、普通に画像を並べます。

<div id="vertical_banners">
  <a href="example1.html"><img src="example1.png" alt="縦にびろ～んバナー1"></a>
  <a href="example2.html"><img src="example2.png" alt="縦にびろ～んバナー2"></a>
  <a href="example3.html"><img src="example3.png" alt="縦にびろ～んバナー3"></a>
  <a href="example4.html"><img src="example4.png" alt="縦にびろ～んバナー4"></a>
</div>

スタイルシートでデザイン

基本的には、今までのと一緒です。

注目部分は、ラップ要素にははみ出た部分を非表示にする『overflow: hidden;』を指定しています。それと、画像がインラインボックス要素だと、ブラウザによっては微妙に下側に隙間が空いてしまうので、<img />をブロック要素に変更します。

#vertical_banners
{
    /* 左上に固定表示 */
    position: fixed;
    top: 0;
    left: 0;

    /* はみ出た要素を非表示にする */
    overflow: hidden;

    /* 横幅 */
    width: 65px;

    /* 縦幅 */
    height: 100%;

    /* 透過変更をスムーズにする(任意) */
   -webkit-transition: opacity .2s ease;
   transition: opacity .2s ease;
}
#vertical_banners > a > img
{
    /* 要素の余白を無くす為にブロック要素に変更。 */
    display: block;

    /* こっちでもOK */
    /*vertical-align: bottom;*/

    /* 透過変更をスムーズにする(任意) */
   -webkit-transition: opacity .2s ease;
   transition: opacity .2s ease;
}
#vertical_banners > a:hover > img
{
    /* マウスオーバー時の表現 */
    /* 20%透過させる */
    opacity: .8;
}
@media (max-width: 1155px)
{
    #vertical_banner { display: none; }
}

完成！

これで、サイドバナーの複数リンクの完成です！分かりづらい方は、『Edit on Codepen』をクリックして、画面を大きくして御覧ください。

番外編: 空いた隙間を埋める

例えばブラウザ高さが高くて画像がそれ以下だと下に余白が空いてしまいますよね。

それが気になる人は、同じ内容をコピペすればOK！

<div id="vertical_banners">
  <a href="example1.html"><img src="example1.png" alt="縦にびろ～んバナー1"></a>
  <a href="example2.html"><img src="example2.png" alt="縦にびろ～んバナー2"></a>
  <a href="example3.html"><img src="example3.png" alt="縦にびろ～んバナー3"></a>
  <a href="example4.html"><img src="example4.png" alt="縦にびろ～んバナー4"></a>

  <!-- 同じ内容をコピーする。 -->
  <a href="example1.html"><img src="example1.png" alt="縦にびろ～んバナー1"></a>
  <a href="example2.html"><img src="example2.png" alt="縦にびろ～んバナー2"></a>
  <a href="example3.html"><img src="example3.png" alt="縦にびろ～んバナー3"></a>
  <a href="example4.html"><img src="example4.png" alt="縦にびろ～んバナー4"></a>
</div>

見た目がキモイという方は

まぁぶっちゃけ管理の面で上のやり方はあまりきれいではないので、javascriptで内容をコピーして増やしましょう。

Vanilla JS

// 要素を取得。
var wrap = document.getElementById('vertical_banners');

// 画像を全て取得。
var banners = wrap.childNodes;

// 要素を一個ずつコピー。
var copys = document.createDocumentFragment();
for (var i = 0; i < banners.length; i++)
    copys.appendChild(banners[i].cloneNode(true));

// サイドバナーに追加。
wrap.appendChild(copys);

jQuery

// 画像を全て取得してコピー。
$('#vertical_banners').children().each(function()
{
    $(this).parent().append($(this).clone());
});

完成

これで、すっきりしたタグで要素内容がリピートされ、更新も楽になりましたね！

同じような感じでサイドに設置するフローティングバナーの実装例もご紹介してますので、合わせてご覧ください。

コピペで使える！サイドに設置できるフローティングバナーを作ろう

サイドに固定表示できるフローティングバナーを、HTMLとCSSで作る手順を紹介する記事です。

もっと見る