パーツ番号 03-15-05 ・ JavaScript使用

人気検索タグクラウド付き

検索欄の下に検索頻度に応じたサイズのタグクラウドを表示。クリックでそのキーワードが入力されます。WordPressのアーカイブ検索の入り口として活用できます。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d03-15-05-search">
          <input type="text" class="d03-15-05-input" placeholder="人気キーワードから探す" aria-label="検索">
          <div class="d03-15-05-tags">
            <a href="#" style="--w:5">ホームページ制作</a>
            <a href="#" style="--w:3">SEO</a>
            <a href="#" style="--w:4">ロゴデザイン</a>
            <a href="#" style="--w:2">EC構築</a>
            <a href="#" style="--w:3">保守契約</a>
          </div>
        </div>

CSS

.prev.d03-15-05{align-items:flex-start}
        .d03-15-05-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-05-input{width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:11px;font-size:13.5px;color:#1f2937;outline:none}
        .d03-15-05-input:focus{border-color:#a5b4fc}
        .d03-15-05-tags{display:flex;flex-wrap:wrap;gap:7px 10px;margin-top:10px}
        .d03-15-05-tags a{--w:3;text-decoration:none;color:#64748b;font-weight:600;font-size:calc(10px + var(--w) * 1.6px);transition:color .2s}
        .d03-15-05-tags a:hover{color:#4f46e5}

JavaScript

(function(){
        var root=document.querySelector('.d03-15-05');if(!root)return;
        var input=root.querySelector('.d03-15-05-input');
        root.querySelector('.d03-15-05-tags').addEventListener('click',function(e){
          var a=e.target.closest('a');
          if(a){e.preventDefault();input.value=a.textContent;input.focus();}
        });
      })();

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