テック

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

こうじ

2016.09.11

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

先日は、サイドの縦バナーについてご紹介しましたが、今回は『フローティングバナー』のご紹介を使用と思います！
まぁ前回のもフローティングだけどさ。

コピペで使える！サイドに伸びる縦バナーを作ろう

サイドに縦長で固定表示するバナーを、HTMLとCSSで作る手順を紹介する記事です。

こちらも比較的楽天市場やYahooショッピング等の『モール型』で比較的需要があるみたいですね。よく見かけます。
ただ、使い過ぎてデザイン破綻しているところもちらほら見えますが…。ご利用は計画的にですね（笑）

今回は、前回のサイド縦バナーよりかは汎用性があり、スマホでもサイズや場所によりますが比較的活用しやすいです。
『新作出たよ！』とか『イベント始まったよ！』といったワンポイントの告知としても十分重宝できます。

メリット

ページを閲覧中常に目に入るので、情報を訴求しやすい。
比較的邪魔にならずに、ワンポイントとして表現できる。
場所やサイズによってはレスポンシブでも使い勝手が良い。

デメリット

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

フローティングバナーを作ろう

まずはタグ作成！

出来るだけ更新を楽にするために『タグはシンプルにして、バックグラウンドを複雑にする』様に心がけます。

<div id="fixed_right_banner">
  <a href="example1.html">
    <img src="example1.png">
  </a>

  <div>
    <img src="example2.png">
  </div>
</div>

スタイルシートを作成！

/* フローティングバナーのラップ要素 */
#fixed_right_banner
{
    /* 右端の上から20pxの位置に固定表示 */
    position: fixed;
    top: 20px;
    right: 0;
}

/* 画像の共通設定 */
#fixed_right_banner > *
{
    /* 横幅 */
    width: 65px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 10px; }

/* リンク要素 */
#fixed_right_banner > a
{
    /* ブロック要素に変更 */
    display: block;

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

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

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

説明

構造の基本的な部分は、[link slug="js-fixed-side-banner" display="inline"]前回の記事[/link]と一緒です。合わせてご参考下さい。

まず全体の画像をリンク画像を含めたボックス要素を右上に固定。
11行目の#fixed_right_banner > *で、指定をリンクタグにしていないのは、リンクを貼らないでバナーだけ表示したいという場合に<a />を使わなくても同じように表示させることが出来るようにするためです。
その場合は<div />で<img />を囲う用にします。

あとは32行目で、リンクタグには『これはリンクしてますよ～』というのが分かるようにマウスオーバー時のアクションを指定。
39行目で、セパレートタイプのページ用にコンテンツが被る前にフローティングバナーが非表示になるようにしています。

完成！

あれ？めちゃくちゃ簡単ですね！

マウスオーバーアクションを変えてみよう！

マウスオーバー時に使える表現で最もスタンダードなのは『背景の色を変える』だったり、『半透明にする』あたりではないでしょうか。
楽だしね。うん。

次はそのマウスオーバーアクションを変えてみましょう！

吹き出しを出す

あるある！イメージ的にもちょっとカジュアルになります。

HTML

<div id="fixed_right_banner">
  <a href="example1.html">
    <img src="example1.png">
    <span>CLICK!</span>
  </a>
  <div>
    <img src="example2.png">
    <span>NICE!!</span>
  </div>
</div>

スタイルシート

/* フローティングバナーのラップ要素 */
#fixed_right_banner
{
    /* 右端の上から20pxの位置に固定表示 */
    position: fixed;
    top: 20px;
    right: 0;
}

/* 画像の共通設定 */
#fixed_right_banner > *
{
    /* 座標の基準要素にする */
    position: relative;

    /* 横幅 */
    width: 65px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 20px; }

/* リンク要素 */
#fixed_right_banner > a
{
    /* ブロック要素に変更 */
    display: block;
}

/* 吹き出し要素 */
#fixed_right_banner > * > span
{
    /* マウスオーバー時以外は非表示にする */
    display: none;

    /* 画像の左上に移動 */
    position: absolute;
    top: -1em;
    left: -1em;

    /* 画像の左上に移動 */
    padding: .5em 1em;

    /* 背景色 */
    background-color: #c00;

    /* 画像の左上に移動 */
    border-radius: 5px;

    /* テキストの設定 */
    color: #fff;
    font-size: .75em;
    text-align: center;
    white-space: nowrap;
}

/* 吹き出し要素の足部分 */
#fixed_right_banner > * > span::after
{
    content: '';
    position: absolute;
    top: 100%;
    left: 1em;
    z-index: 5;
    width: 0;
    height: 0;
    border-color: #c00 #c00 transparent transparent;
    border-style: solid;
    border-width: 5px;
}

/* マウスオーバーされたら吹き出しを表示 */
#fixed_right_banner > *:hover > span
{
    /* マウスオーバー時以外は非表示にする */
    display: block;
}

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

説明

各画像の左上で吹き出しが表示されるように、14行目で基準座標の指定を行っています。

あと吹き出しが他の画像に被るので、21行目の余白を広くしました。

あとは31行目と57行目で、吹き出しのデザインを設定しています。内容は割愛。
吹き出しは何もしない状態では非表示になるように34行目でdisplay: noneに設定し、75行目の設定でマウスオーバーで表示されるようにしています。

完成！

マウスオーバーで吹き出しが表示されるようになりました！

番外編: ちょっとリッチにする

せっかくなので、吹き出しに動きを出してそれっぽくしてみます。
簡単です。アニメーションさせるだけですね！
上記のスタイルシート内の下記部分の内容を変更します。
変更点と、追加点以外は省略しています。

/* 吹き出し要素 */
#fixed_right_banner > * > span
{
    /* noneになっているとアニメーションしないのでblockに変更 */
    display: block;

    /* マウスオーバー時以外は非表示にする為に追加 */
    visibility: hidden;
    opacity: 0;

    /* 左座標の初期値を変更 */
    left: 0;

    /* アニメーション */
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

/* マウスオーバーされたら吹き出しを表示 */
#fixed_right_banner > *:hover > span
{
    /* 必要ないので削除する */
    /*display: block;*/

    /* マウスオーバーで吹き出しをスライドして表示 */
    visibility: visible;
    opacity: 1;
    left: -1em;
}

完成！

これで吹き出しがにゅるっと出てくるようになりました！

ぴょこんとバナーを作る

モール型ではこれが一番見かけるんじゃないでしょうか。
マウスオーバーすると、ぴょこんと画像が少し飛び出るようになる演出です。
ちなみに『ぴょこんとバナー』は前の会社の上司が言っていたのですが、非常に分かりやすい名称だと思います。

HTML

<div id="fixed_right_banner">
  <a href="example1.html"><img src="example1.png"></a>
  <div><img src="example2.png"></div>
</div>

スタイルシート

/* フローティングバナーのラップ要素 */
#fixed_right_banner
{
    /* 右端の上から20pxの位置に固定表示 */
    position: fixed;
    top: 20px;
    right: 0;
}

/* 画像の共通設定 */
#fixed_right_banner > *
{
    clear: both;
    float: right;
    /* 横幅 */
    width: 65px;

    /* 最初にあらかじめ右側を詰めて表示。 */
    margin-right: -15px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 20px; }

/* リンク要素 */
#fixed_right_banner > a
{
    /* ブロック要素に変更 */
    display: block;
}

/* マウスオーバーで、詰めた右側のマージンをリセット。 */
#fixed_right_banner > *:hover
{
    margin-right: 0;
}

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

まず18行目で、最初の表示時に右側のマージンにマイナス値を設定して見えなくしておきます。今回は15px分見えなくしました。

そして35行目で、マウスオーバーしたら見えなくしていた15px分をマージンをリセットして、全て表示する感じです。

また、11行目の『画像の共通設定』に下記スタイルシートを追加する事で、にゅるんとバナーに変える事が可能です。

/* 画像の共通設定 */
#fixed_right_banner > *
{
    /* アニメーション設定を追加。 */
    -webkit-transition: margin .2s ease;
    transition: margin .2s ease;
}

完成！

ぴょこんとします。

表示する場所を中央にする

例えば上から○pxとか下から○pxとかと言った場合なら分かりやすいのですが、中央にドン！みたいなのはちょっと工夫が必要です。
と言っても、ラップ要素のスタイルシートをちょこっと変更するだけです。世の中便利になりましたね！

/* フローティングバナーのラップ要素 */
#fixed_right_banner
{
    /* 右端の上から半分の位置に固定表示 */
    position: fixed;
    top: 50％;
    right: 0;

    /* 要素の高さ半分の値を上に移動 */
    -webkit-transform: translateY（-50%）;
    transform: translateY（-50%）;
}