パーツ番号 11-05-04 ・ CSSのみ

結果件数+検索条件サマリー

ヒット件数と現在の検索条件を要約表示するヘッダー部分。WordPressの検索結果ページ冒頭で状況を一目で把握できるようにします。

css

プレビュー

ソースコード

HTML

<div class="d11-05-04-wrap">
          <p class="d11-05-04-num"><strong>123</strong>件が見つかりました</p>
          <p class="d11-05-04-cond">条件: <span>デスク</span> / <span>木製</span> / <span>&yen;1,000〜&yen;3,000</span></p>
          <p class="d11-05-04-time">検索時間: 0.08秒</p>
        </div>

CSS

.prev.d11-05-04{align-items:flex-start;justify-content:flex-start}
        .d11-05-04-wrap{width:100%}
        .d11-05-04-num{font-size:16px;color:#1f2937;margin:0 0 8px}
        .d11-05-04-num strong{color:#4f46e5;font-size:22px;margin-right:2px}
        .d11-05-04-cond{font-size:12.5px;color:#6b7280;margin:0 0 6px}
        .d11-05-04-cond span{background:#eef2ff;color:#4338ca;padding:2px 8px;border-radius:6px;font-weight:600;margin:0 2px}
        .d11-05-04-time{font-size:11px;color:#9ca3af;margin:0}

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