パーツ番号 03-02-05 ・ CSSのみ

タグクラウド

投稿数などの重みに応じて文字サイズが変わるタグ群。ホバーすると色付きで拡大します。WordPressのタグ・カテゴリークラウドウィジェットに最適。

hovercss

プレビュー

ソースコード

HTML

<div class="d03-02-05-cloud">
          <a href="#" style="--w:5">WordPress</a>
          <a href="#" style="--w:2">CSS</a>
          <a href="#" style="--w:4">SEO</a>
          <a href="#" style="--w:1">jQuery</a>
          <a href="#" style="--w:3">デザイン</a>
          <a href="#" style="--w:5">ブログ</a>
          <a href="#" style="--w:2">高速化</a>
          <a href="#" style="--w:4">レスポンシブ</a>
          <a href="#" style="--w:1">保守</a>
          <a href="#" style="--w:3">アニメーション</a>
          <a href="#" style="--w:2">プラグイン</a>
          <a href="#" style="--w:4">マーケティング</a>
        </div>

CSS

.d03-02-05-cloud{display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;justify-content:center;line-height:1}
        .d03-02-05-cloud a{--w:3;text-decoration:none;color:#64748b;font-weight:600;font-size:calc(11px + var(--w) * 3px);transition:color .2s,transform .2s;transform-origin:center}
        .d03-02-05-cloud a:nth-child(3n) {color:#7c83a3}
        .d03-02-05-cloud a:hover{color:#4f46e5;transform:scale(1.22)}
        .d03-02-05-cloud a:nth-child(3n):hover{color:#db2777}
        .d03-02-05-cloud a:nth-child(3n+1):hover{color:#0891b2}

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