パーツ番号 09-15-03 ・ CSSのみ

獲得済み・未獲得混在バッジ一覧

獲得済みは彩色、未獲得はグレーアウトで表現したバッジ一覧の静止見本です。WordPress会員サイトの実績・達成条件一覧ページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-03-wrap">
          <div class="d09-15-03-badge d09-15-03-on">
            <span class="d09-15-03-ico">★</span>
            <span>初投稿</span>
          </div>
          <div class="d09-15-03-badge d09-15-03-on">
            <span class="d09-15-03-ico">★</span>
            <span>7日連続</span>
          </div>
          <div class="d09-15-03-badge d09-15-03-off">
            <span class="d09-15-03-ico">★</span>
            <span>100件達成</span>
          </div>
          <div class="d09-15-03-badge d09-15-03-off">
            <span class="d09-15-03-ico">★</span>
            <span>殿堂入り</span>
          </div>
        </div>

CSS

.d09-15-03-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
        .d09-15-03-badge{display:flex;flex-direction:column;align-items:center;gap:4px;width:90px;padding:10px 6px;border-radius:10px;font-size:11px;font-weight:700}
        .d09-15-03-ico{font-size:20px;line-height:1}
        .d09-15-03-on{background:#fffbeb;color:#92400e}
        .d09-15-03-on .d09-15-03-ico{color:#f59e0b}
        .d09-15-03-off{background:#f1f5f9;color:#94a3b8;filter:grayscale(1);opacity:.65}
        .d09-15-03-off .d09-15-03-ico{color:#94a3b8}

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