パーツ番号 10-12-12 ・ CSSのみ

連続ログイン日数ウィジェット(ストリーク表示)

会員の連続ログイン日数を固定値で示すウィジェットです。継続利用を促す会員マイページのモチベーション表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-12-widget">
          <span class="d10-12-12-flame">🔥</span>
          <span class="d10-12-12-num">21<small>日</small></span>
          <span class="d10-12-12-label">連続ログイン中</span>
        </div>

CSS

.d10-12-12-widget{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 26px; border-radius:12px; background:#fff1e8; border:1px solid #fdd8b8; }
        .d10-12-12-flame{ font-size:26px; }
        .d10-12-12-num{ font-size:26px; font-weight:800; color:#c2410c; }
        .d10-12-12-num small{ font-size:13px; margin-left:2px; }
        .d10-12-12-label{ font-size:11px; color:#9a3412; font-weight:700; }

クラス名 .d10-12-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。