パーツ番号 11-09-08 ・ CSSのみ

検索結果ゼロ件ページ

虫眼鏡アイコンとメッセージを組み合わせた静止デザインで、WordPressの検索結果0件時やフィルター結果なしの表示に利用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-08-wrap">
          <svg class="d11-09-08-glass" width="52" height="52" viewBox="0 0 52 52" fill="none">
            <circle cx="22" cy="22" r="14" stroke="#cbd5e1" stroke-width="3" fill="#f8fafc"/>
            <line x1="32" y1="32" x2="46" y2="46" stroke="#cbd5e1" stroke-width="3.5" stroke-linecap="round"/>
          </svg>
          <div class="d11-09-08-title">見つかりませんでした</div>
          <p class="d11-09-08-text">条件に一致する検索結果はありません</p>
        </div>

CSS

.d11-09-08-wrap{ text-align:center; }
        .d11-09-08-glass{ display:block; margin:0 auto 14px; }
        .d11-09-08-title{ font-size:15px; font-weight:700; color:#374151; }
        .d11-09-08-text{ margin-top:8px; font-size:12px; color:#9ca3af; }

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