パーツ番号 03-10-06 ・ CSSのみ

タグクラウド型サイドウィジェット

使用頻度に応じて文字サイズを変えたタグを並べる静止したタグクラウドです。WordPressのブログサイドバーで人気トピックを直感的に見せる用途に向いています。

staticcss

プレビュー

ソースコード

HTML

<aside class="d03-10-06-widget">
          <h4 class="d03-10-06-heading">タグ</h4>
          <div class="d03-10-06-cloud">
            <span class="d03-10-06-tag" style="font-size:11px;color:#94a3b8">写真</span>
            <span class="d03-10-06-tag" style="font-size:17px;color:#2563eb;font-weight:700">デザイン</span>
            <span class="d03-10-06-tag" style="font-size:12px;color:#64748b">旅行</span>
            <span class="d03-10-06-tag" style="font-size:15px;color:#334155;font-weight:600">開発</span>
            <span class="d03-10-06-tag" style="font-size:11px;color:#94a3b8">レビュー</span>
            <span class="d03-10-06-tag" style="font-size:14px;color:#475569">ライフスタイル</span>
            <span class="d03-10-06-tag" style="font-size:19px;color:#2563eb;font-weight:700">WordPress</span>
            <span class="d03-10-06-tag" style="font-size:12px;color:#64748b">ガジェット</span>
            <span class="d03-10-06-tag" style="font-size:13px;color:#475569">グルメ</span>
            <span class="d03-10-06-tag" style="font-size:11px;color:#94a3b8">コラム</span>
          </div>
        </aside>

CSS

.d03-10-06-widget{width:100%}
        .d03-10-06-heading{
          font-size:13px;font-weight:800;color:#0f172a;margin:0 0 14px;
          padding-bottom:8px;border-bottom:2px solid #f1f5f9;
        }
        .d03-10-06-cloud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline}
        .d03-10-06-tag{line-height:1.2}

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