今非常に気になっているogaRia佐藤です。今回はスマホの通知アイコンバッジのような吹き出しカウンターのHTMLテンプレートをご紹介したいと思います。この記事ではPCのヘッダーメニューに設置する前提で作っています。汎用的に作ってはいますが、その他の場所やメニューの構築方法によってはうまく設置できない場合がございます。設置デモ吹き出しデザインCSSCSSタグをまず反映カウント数HTMLタグの貼り付け追記箇所サンプル1追記箇所サンプル2追記箇所サンプル3まとめ設置デモヘッダーカテゴリメニューの新着と再入荷に商品点数が一目で分かるように設置してみました。した事でも非常に分かりやすくなりますね!吹き出しデザインCSS吹き出しのカラーと位置をこのCSSで調整します。「border-color」「background-color」に指定されているカラーコードは同じものにしてください。topの指定は基本-(マイナス)指定にします。マイナスの数値が大きいほど吹き出しは上部に設置されます。leftの指定は設置するメニューによって初期位置が異なってきます。0が初期位置、-(マイナス)指定で左へ、+(プラス)指定で右へ位置が調整されます。※赤字クリックで編集できます。0;}--></style>ogaRia会員なら簡単設定でCSSタグを取得できます!ヤフー店舗も場合もこちらから取得をお願いします。修正したタグ、もしくは簡単設定CSSタグをヘッダーなど共通部分に貼り付けましょう。GOLDサーバーなどにメニューが構築されているヘッダーをiframeなどで呼び出している店舗様の場合はこのヘッダーHTML内へ貼り付けましょう。カウント数HTMLタグの貼り付け下記HTMLタグをヘッダーメニューのHTMLへ追記します。数字は任意で変更してください。※赤字クリックで編集できます。class="balloon-count"><span>30</span></span>追記箇所サンプル1ulタグを使った横並びメニューの場合、aタグ内に入れずliタグの先頭に追記しましょう。href="menu5.html">メニュー5</a></li></ul>追記箇所サンプル2テーブルタグで構成されている場合、こちらもulタグと同じくtdタグの先頭に追記しましょう。</tr></table>追記箇所サンプル3table、ulタグ等を使わず、aタグだけでならべている場合、こちらはaタグ内の先頭に追記しましょう。噴出し自体が表示されない事がございます。特性上、ご了承ください。佐藤ディレクターCSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。32コメント*内容をご確認の上、送信してください。Us[株式会社オーガランド]現在24のネットショップを運営する鹿児島の企業です。販促支援システムを提供する「ogaRia(オガリア)」サービスを運営しています。株式会社オーガランド。