カードリンクデザインを作る方法

この記事では、ペット紹介カードデザインをWordPress固定ページなどに設置する方法を解説します。
グリッドレイアウトを用いて、画像＋タイトル＋矢印アイコンの美しいカードを2列×2段で配置できます。
クリックでリンク先に遷移する構造のため、サイト案内・カテゴリ誘導・サービス紹介などにも活用できます。

1 実装のポイント

• グリッドで自動2列（スマホでは縦並び）
• ホバー時にふわっと浮き上がるアニメーション付き
• シンプルで柔らかいペット系サイトにも合うデザイン

2 HTML構造

<section class="pet-grid">
  <div class="pet-card">
    <a href="#">
      <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="ペットと暮らす幸せ">
      <div class="pet-info">
        <h3>ペットと暮らす幸せ</h3>
        <span class="arrow"><i class="fa-solid fa-angle-right"></i></span>
      </div>
    </a>
  </div>

  <div class="pet-card">
    <a href="#">
      <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="ペットケアのあゆみ">
      <div class="pet-info">
        <h3>ペットケアのあゆみ</h3>
        <span class="arrow"><i class="fa-solid fa-angle-right"></i></span>
      </div>
    </a>
  </div>

  <div class="pet-card">
    <a href="#">
      <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="保護活動・譲渡会">
      <div class="pet-info">
        <h3>保護活動・譲渡会</h3>
        <span class="arrow"><i class="fa-solid fa-angle-right"></i></span>
      </div>
    </a>
  </div>

  <div class="pet-card">
    <a href="#">
      <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="ペットと森の仲間たち">
      <div class="pet-info">
        <h3>ペットと森の仲間たち</h3>
        <span class="arrow"><i class="fa-solid fa-angle-right"></i></span>
      </div>
    </a>
  </div>
</section>

3 汎用CSS

/* ---------------------------------------------
 * ペット紹介カード（2列グリッドデザイン）
 * ------------------------------------------- */

/* グリッド全体設定 */
.pet-grid {
  display: grid; /* グリッドレイアウトに設定 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動で2列（幅300px以下で1列） */
  gap: 20px; /* 各カードの間に余白 */
  margin: 40px 0; /* 上下に余白を設定 */
}

/* --- カード内の画像上部にできる白い余白を完全除去 --- */
.pet-card {
  line-height: 0; /* aタグ内の行間余白をリセット */
}

/* カード全体リンク部分 */
.pet-card a {
  display: block; /* ブロック化して全体をクリック可能に */
  background: #fff; /* 背景を白に */
  border-radius: 8px; /* カード角を丸く */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 影をつける */
  line-height: 0; /* 画像の上に出るわずかな行間を消す */
  overflow: hidden; /* 枠外の画像を非表示 */
  text-decoration: none; /* リンクの下線を消す */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時の浮き上がりエフェクト */
.pet-card a:hover {
  transform: translateY(-4px); /* 上に少し持ち上げる */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 濃い影を出す */
}

/* 画像設定 */
.pet-card img {
  display: block; /** inline画像による余白を防止 **/
  margin: 0; /** 外側の余白を削除 **/
  padding: 0; /** 内側の余白を削除 **/
  border: none; /** 不要な境界線を削除 **/
}

/* テキストエリア全体 */
.pet-info {
  display: flex; /* 横並び配置 */
  justify-content: space-between; /* タイトルと矢印を両端に配置 */
  align-items: center; /* 垂直方向に中央揃え */
  padding: 16px 20px; /* 内側の余白 */
}

/* タイトル文字 */
.pet-info h3 {
  font-size: 18px; /* 標準よりやや大きめ */
  font-weight: bold; /* 太字で強調 */
  color: #333; /* 濃いグレー文字 */
  margin: 0; /* 余白をなくす */
}

/* 矢印アイコン */
.pet-info .arrow {
  font-size: 24px; /* 大きめの矢印 */
  color: #2e7d32; /* 緑系カラーで安心感を演出 */
  font-weight: bold; /* 太字にして視認性UP */
}

/* --- 画像の上や下にできる余白を削除 --- */
img {
  display: block; /** インライン要素の余白を消す **/
  vertical-align: bottom; /** ベースライン揃えを無効化 **/
}

/* --- カード全体をフラットに揃える（Lightning用） --- */
.card img,
.media img,
.wp-block-image img {
  margin: 0; /** 余白削除 **/
  padding: 0; /** パディング削除 **/
  border: none; /** 不要な枠消す **/
}

/* スマホ対応 */
@media (max-width: 768px) {
  .pet-info h3 {
    font-size: 16px; /* 小さめの文字に調整 */
  }
}

4 完成イメージ

4.1 ペットと暮らす幸せ

4.2 ペットケアのあゆみ

4.3 保護活動・譲渡会

4.4 ペットと森の仲間たち

5 代用プラグイン

もしHTMLやCSSの直接編集が不安な場合は、HTMLブロックやInsert HTML Snippetプラグインを利用すると安全に設置できます。
コードをそのままブロック内に貼るだけで、同じレイアウトが再現されます。

6 まとめ

• カード型リンクで見やすくナビゲーションを強化
• ペット関連サイトに自然に馴染む柔らかいデザイン
• テーマを問わず設置でき、Cocoon・Lightningにも対応