スマホの通知アイコンバッジのような吹き出しカウンターをヘッダーメニューに付けてみよう！

楽天
Yahoo!

スマホの通知アイコンバッジのような吹き出しカウンターをヘッダーメニューに付けてみよう！

2016/06/28

お気に入りに追加する

インスタント麺をレンジで作るとまるで生めんのような食感になるそうで、
今非常に気になっているogaRia佐藤です。

今回はスマホの通知アイコンバッジのような吹き出しカウンターのHTMLテンプレートを
ご紹介したいと思います。
この記事ではPCのヘッダーメニューに設置する前提で作っています。
汎用的に作ってはいますが、その他の場所やメニューの構築方法によってはうまく設置できない場合がございます。予めご了承お願いします。

設置デモ

ヘッダーカテゴリメニューの新着と再入荷に商品点数が一目で分かるように設置してみました。
ちょっとした事でも非常に分かりやすくなりますね！

吹き出しデザインCSS

吹き出しのカラーと位置をこのCSSで調整します。
「border-color」「background-color」に指定されているカラーコードは
同じものにしてください。

topの指定は基本-(マイナス)指定にします。
マイナスの数値が大きいほど吹き出しは上部に設置されます。

leftの指定は設置するメニューによって初期位置が異なってきます。
0が初期位置、-(マイナス)指定で左へ、+(プラス)指定で右へ位置が調整されます。

※赤字クリックで編集できます。

<style type="text/css">
<!--
.balloon-count {
    position: relative;
    width:0px;
    height:0px;
    vertical-align:top;
}
.balloon-count span,
.balloon-count span:after {
    border-color: #E04646 transparent transparent;
    background-color: #E04646;
}
.balloon-count span{
    top:-30px;
    left:20px;
    border:none;
    position: absolute;
    border-radius: 10px;
    color: #fff;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 11px;
    line-height:20px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    width: 34px;
    height: 19px;
    z-index: 1000;
    display:block;
    padding:0 1px 0 0;
}
.balloon-count span:after {
    background:none;
    border-image: none;
    border-style: solid;
    border-width: 4px 4px 0;
    bottom: -3px;
    content: "";
    display: block;
    left: 13px;
    position: absolute;
    width: 0;
}
-->
</style>

ogaRia会員なら簡単設定でCSSタグを取得できます！
ヤフー店舗も場合もこちらから取得をお願いします。

CSSタグをまず反映

修正したタグ、もしくは簡単設定CSSタグをヘッダーなど共通部分に貼り付けましょう。
また、GOLDサーバーなどにメニューが構築されているヘッダーをiframeなどで呼び出している店舗様の場合はこのヘッダーHTML内へ貼り付けましょう。

カウント数HTMLタグの貼り付け

下記HTMLタグをヘッダーメニューのHTMLへ追記します。
数字は任意で変更してください。

※赤字クリックで編集できます。



<span class="balloon-count"><span>30</span></span>

追記箇所サンプル1

ulタグを使った横並びメニューの場合、
aタグ内に入れずliタグの先頭に追記しましょう。

<ul>
  <li><span class="balloon-count"><span>30</span></span><a href="menu1.html">メニュー1</a></li>
  <li><a href="menu2.html">メニュー2</a></li>
  <li><a href="menu3.html">メニュー3</a></li>
  <li><a href="menu4.html">メニュー4</a></li>
  <li><a href="menu5.html">メニュー5</a></li>
</ul>

追記箇所サンプル2

テーブルタグで構成されている場合、
こちらもulタグと同じくtdタグの先頭に追記しましょう。

<table>
  <tr>
    <td><span class="balloon-count"><span>30</span></span><a href="menu1.html"><img src="menu1.gif"></a></td>
    <td><a href="menu2.html"><img src="menu2.gif"></a></td>
    <td><a href="menu3.html"><img src="menu3.gif"></a></td>
    <td><a href="menu4.html"><img src="menu4.gif"></a></td>
    <td><a href="menu5.html"><img src="menu5.gif"></a></td>
  </tr>
</table>

追記箇所サンプル3

table、ulタグ等を使わず、aタグだけでならべている場合、
こちらはaタグ内の先頭に追記しましょう。

<div>
  <a href="menu1.html"><span class="balloon-count"><span>30</span></span><img src="menu1.gif"></a>
  <a href="menu2.html"><img src="menu2.gif"></a>
  <a href="menu3.html"><img src="menu3.gif"></a>
  <a href="menu4.html"><img src="menu4.gif"></a>
  <a href="menu5.html"><img src="menu5.gif"></a>
</div>