通知風CSSバッジ

2023/05/24 投稿

2023/09/25 更新

各カテゴリーの記事件数をそのまま [3] と数字で表示していましたが、つまらないので少し手を加えてみました。イメージはスマホの「通知バッジ」です。

あくまでも「通知バッジ風」なので、記事の未読数ではありませんので悪しからず。記事を読んでも数は減りません。

コードは今使っているBloggerのテンプレート：JetThemeでのカスタマイズになります。

他のテンプレートの場合は、バッジをつける本体（ボタンなど）に「position: relative」、バッジ（記事件数をカウントしている数字）に「position: absolute、位置調整、デザイン」が、ざっくりとした基本設定になります。

HTMLの追記

まず widget-content categories を検索。その <div> の数行下から始まる <a> ～ </a> 下のコードを探してください。

<a class='text-reset fw-bold hover-text-primary' expr:href='data:label.url + &quot;?max-results=10&quot;'>
  <span class='align-middle'><data:label.name/></span>
  <b:if cond='data:showFreqNumbers'>
  <span class='ms-1 fw-light fs-9'>[ <data:label.count/> ]</span>
  </b:if>
</a>

1行目の a に class="cate" を追記。既に「text-reset fw-bold hover-text-primary」のクラスが入っているので、1番最後にcate（適当なクラス名をつけてください）を入れるだけでOK。
<b:if cond='data:showFreqNumbers'> の下の <span> に class="count-badge" を追記。もともとのclassは全部削除。
<data:label.count/> を囲む前後のカッコ [ ] を削除。

すると、HTMLがこうなります。

<a class='text-reset fw-bold hover-text-primary cate' expr:href='data:label.url + &quot;?max-results=10&quot;'>
  <span class='align-middle'><data:label.name/></span>
  <b:if cond='data:showFreqNumbers'>
  <span class='count-badge'><data:label.count/></span>
  </b:if>
</a>

CSSの追加

HTMLの書き換えが終わったら、CSSを追加します。まるごとコピペで。

/*-- カウントバッジ --*/
.cate {
    position: relative;
}
.count-badge {
    position: absolute;
    top: -.6rem;  /* 上方向に-.6rem*/
    left: calc(100% -8px);  /* 内側に-8px */
    line-height: 20px;
    border-radius: 10px;  /* line-heightの半分の角丸を指定 */
    color: #ffffff;
    font-size: .8rem;
    text-align: center;
    background-color: #0d6efd;
    padding: 0 3px;  /* 3桁以上用に左右に余白 */
    min-width: 20px;  /* 最低幅を指定 */
}

1つのカテゴリーが99件以上になると、丸付き数字では中が「きゅうくつ」なイメージになるので、余白を少しとって3桁になった時に長丸に数字になるイメージでCSSを設定しています。

そんなに偏って件数が多くなることは少ないと思いますが、念のための設定です。

初期設定との兼ね合い

showFreqNumbers の <span> に最初に設定されていた、Bootstrapのスタイルタグについて、

マージン（ms-1）は、バッジの位置決めの時に横方向の位置調整が重複するので削除して問題なし。
フォントが細く設定（fw-light）されていますが、小さな色付き丸数字にすると見づらくなるので、こちらも削除して問題なし。
フォントサイズ（fs-9）はこちらで他のCSSと合わせて設定したほうが、後からも調整しやすいので削除して問題なし。

と判断しています。

後は色とか数字の大きさ、バッジの位置、バッジが付いた状態でのカテゴリーのマージンの微調整などお好みで。

【初心者でもわかる】お知らせマークや未読件数をつける方法2選

バッジ繋がりで記事を1つご紹介。こちらはすぐ上のような「記事を書くときに参考したリンク先」の紹介の時につけるバッジの設定についてです。

Bootstrapでのバッジ　※採用

ひと通り試行錯誤が終わった後に、Bootstrapにもバッジのコンポーネントがあることを知りました。（当ブログでは v5.3 利用）

Badges （バッジ）Bootstrap5

バッジ（Badges）Bootstrap5設置ガイド

まずは勉強がてらサンプルを作ります。

<button type="button" class="btn position-relative bg-test">
  サンプルボタン
  <span class="badge rounded-pill position-absolute top-0 start-100 translate-middle bg-primary">
  8
  </span>
</button>

あれ。こっちのほうが設置簡単だった。

ちなみに上のサンプルは当ブログでの設置イメージで、ボタンには別途 bg-test のclassを設けてCSSで背景と文字の色を変えています。通知バッジは何もいじっていません。

Bootstrapを既に導入しているなら、こちらの方が楽に設定できますね。

HTMLコードの修正場所

HTMLは上と同じ場所（widget-content categories の <div> の数行下から始まる <a> ～ </a> 部分）ですが、黄色いラインの部分の2か所の追記のみで表示可能です。

<a class='text-reset fw-bold hover-text-primary position-relative' expr:href='data:label.url + &quot;?max-results=10&quot;'>
  <span class='align-middle'><data:label.name/></span>
  <b:if cond='data:showFreqNumbers'>
  <span class='badge rounded-pill position-absolute top-0 start-100 translate-middle bg-primary'><data:label.count/></span>
  </b:if>
</a>

1行目の a に class="position-relative" を追記
<b:if cond='data:showFreqNumbers'> の下の <span> に class="badge rounded-pill position-absolute top-0 start-100 translate-middle bg-primary" を追記。もともとのclassは全部削除。

rounded-pill で桁数が増えた時の長丸対応済み。

1桁でもちょっと上下が潰れてる？って感じの丸ですが、気になる様であれば、丸の色なども変更したい場合などと合わせて、ボタン本体と通知バッジ部分にclassを何か設定してあげれば調整できそうです。