検索窓風デザインでカテゴリリストをおしゃれに作る方法

この記事では、「犬と暮らす」「猫と暮らす」「小動物を飼いたい」など、ペットとの暮らし方に合わせたカテゴリ例を一覧にして紹介します。検索窓のような横長ボックスで、丸いサムネイルと虫眼鏡アイコンを組み合わせたおしゃれなリストを実装します。

1 実装のポイント

各項目をクリックすると、対応するペットカテゴリのページへ移動します。Font Awesome の虫眼鏡アイコンを使い、テキストとの間に細い縦線を入れて、検索ボックスのような区切りデザインを再現しています。

2 functions.php にコードを追加

<div class="pet-list">

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample01.jpg" alt="犬と暮らす">
    <div class="pet-text-area">
      <a href="/category/dog-life/">犬と暮らす</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample02.jpg" alt="猫と暮らす">
    <div class="pet-text-area">
      <a href="/category/cat-life/">猫と暮らす</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample03.jpg" alt="小動物を飼いたい">
    <div class="pet-text-area">
      <a href="/category/small-animal/">小動物を飼いたい</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample04.jpg" alt="鳥と暮らす">
    <div class="pet-text-area">
      <a href="/category/bird-life/">鳥と暮らす</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample05.jpg" alt="爬虫類と暮らす">
    <div class="pet-text-area">
      <a href="/category/reptile-life/">爬虫類と暮らす</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample06.jpg" alt="魚を飼いたい">
    <div class="pet-text-area">
      <a href="/category/fish-life/">魚を飼いたい</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample07.jpg" alt="多頭飼いの工夫">
    <div class="pet-text-area">
      <a href="/category/multi-pet/">多頭飼いの工夫</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

  <div class="pet-item">
    <img src="https://example.com/wp-content/uploads/sample08.jpg" alt="ペットの健康管理">
    <div class="pet-text-area">
      <a href="/category/pet-health/">ペットの健康管理</a>
    </div>
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>

</div>

3 汎用CSS

/* ------------------------------------------------
 * 検索窓風デザインでカテゴリリストをおしゃれに作る方法
 * ---------------------------------------------- */

/* --- 全体リスト --- */
.pet-list {
  display: flex; /* 横並び */
  flex-wrap: wrap; /* 折り返し */
  gap: 20px; /* 間隔 */
  justify-content: space-between; /* 均等配置 */
}

/* --- 各カード --- */
.pet-item {
  display: flex; /* 中身を横並び */
  align-items: center; /* 縦中央揃え */
  justify-content: space-between; /* 両端配置 */
  width: 48%; /* 2列表示 */
  background: #fff; /* 白背景 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 影 */
  padding: 10px 15px; /* 内側余白 */
  transition: all .3s ease; /* アニメーション */
}

/* --- ホバー時 --- */
.pet-item:hover {
  transform: translateY(-3px); /* 少し浮く */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影強調 */
}

/* --- 丸画像 --- */
.pet-item img {
  width: 50px; /* 幅 */
  height: 50px; /* 高さ */
  border-radius: 50%; /* 丸形 */
  object-fit: cover; /* トリミング */
  margin-right: 12px; /* テキストとの間隔 */
}

/* --- テキスト＋線エリア --- */
.pet-text-area {
  flex: 1; /* 残り幅を使用 */
  display: flex; /* 横並び */
  align-items: center; /* 中央揃え */
  justify-content: space-between; /* 両端配置 */
  border-right: 1px solid #ddd; /* 右側に縦線 */
  padding-right: 12px; /* 線とテキストの間隔 */
  margin-right: 12px; /* アイコンとの距離 */
}

/* --- テキストリンク --- */
.pet-text-area a {
  font-weight: bold; /* 太字 */
  color: #333; /* テキスト色 */
  text-decoration: none; /* 下線削除 */
}

/* --- テキストホバー --- */
.pet-text-area a:hover {
  color: #e67e22; /* オレンジに変化 */
}

/* --- 虫眼鏡アイコン --- */
.pet-item i {
  font-size: 18px; /* サイズ */
  color: #333; /* 通常色 */
  transition: color .3s ease; /* 色変化 */
  line-height: 1; /* アイコンの高さを安定させる */
  vertical-align: middle; /* テキストと垂直位置を合わせる */
  position: relative; /* 微調整のため */
  top: 10px; /* わずかに下げる（中央補正） */
}

/* --- ホバー時の色 --- */
.pet-item:hover i {
  color: #e67e22; /* オレンジ色 */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .pet-item {
    width: 100%; /* 縦1列表示 */
  }
}

4 完成イメージ

犬と暮らす

猫と暮らす

小動物を飼いたい

鳥と暮らす

爬虫類と暮らす

魚を飼いたい

多頭飼いの工夫

ペットの健康管理

5 まとめ

検索窓風デザインのカテゴリリストを使うことで、ユーザーが直感的にテーマを選びやすくなります。
柔らかいカードデザインで、動物カテゴリにぴったりな親しみやすい印象を演出できます。