PCのヘッダ画像の下部に少し重なる「白背景＋3列カードレイアウト」の設置方法

この記事では、トップページや固定ページなどで使える「白背景＋3列カードレイアウト」の実装方法を紹介します。
LightningやCocoonテーマにも対応し、スマホでは重なりが解除され、自動的に1列表示になります。

1 実装のポイント

• Flexboxを使ってPCで3列、スマホでは重なりが解除され、1列に自動調整
• カードには画像＋キャプションを配置し、マウスホバー時にふわっと浮き上がる演出
• 背景は白、角丸とシャドウを加えて上品に仕上げる

2 HTML構造

<div class="image-menu">
  <div class="menu-card">
    <a href="https://sample1.com/">
      <img src="https://example.com/image1.jpg" alt="電話無料相談">
      <p>電話無料相談</p>
    </a>
  </div>

  <div class="menu-card">
    <a href="https://sample2.com/">
      <img src="https://example.com/image2.jpg" alt="資料請求">
      <p>資料請求</p>
    </a>
  </div>

  <div class="menu-card">
    <a href="https://sample3.com/">
      <img src="https://example.com/image3.jpg" alt="面談">
      <p>面談</p>
    </a>
  </div>
</div>
    

3 汎用CSS

/*----------------------------------------
  相談カード（白背景・3列固定 → スマホ1列）
----------------------------------------*/

/* コンテナ全体（.image-menu） */
.image-menu {
  position: relative;                 /* 配置基準を作る */
  top: -80px;                         /* 背景との重なりを微調整 */
  z-index: 2;                         /* 背景より前に出す */
  max-width: 1280px;                  /* 横幅の最大値を制限 */
  margin: 0 auto;                     /* 中央寄せ */
  padding: 40px 20px 60px;            /* 内側余白（上・横・下） */
  display: flex;                      /* 横並び配置 */
  flex-wrap: wrap;                    /* 折り返しを許可 */
  justify-content: center;            /* 中央寄せ配置 */
  gap: 20px;                          /* 各カード間の間隔 */
  background: #fff;                   /* 背景を白に設定 */
  border-radius: 20px;                /* 角を丸める */
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08); /* 柔らかい影 */
}

/* 各カード（.menu-card） */
.menu-card {
  background: #fff;                   /* 背景色（白） */
  border-radius: 10px;                /* 角を丸くする */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* 薄い影で浮かせる */
  overflow: hidden;                   /* 枠外は非表示 */
  width: calc(33.333% - 20px);        /* 3列固定配置 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時アニメーション */
}

/* ホバー時の効果 */
.menu-card:hover {
  transform: translateY(-5px);        /* 少し上に持ち上げる */
  box-shadow: 0 10px 24px rgba(0,0,0,0.18); /* 浮き上がり感を強調 */
}

/* カード内の画像設定 */
.menu-card img {
  display: block !important;          /* 行間の隙間を防止 */
  width: 100% !important;             /* 横幅いっぱいに表示 */
  height: 200px !important;           /* 高さ固定で均一に */
  object-fit: cover;                  /* トリミングして自然表示 */
  margin: 0 !important;               /* 外側余白をリセット */
  padding: 0 !important;              /* 内側余白をリセット */
  border: none !important;            /* 余分な線を削除 */
  vertical-align: bottom !important;  /* 下揃えでズレ防止 */
}

/* カード全体をクリック可能にする（aタグ） */
.menu-card a {
  display: block;                     /* カード全体をクリック可能に */
  margin: 0 !important;               /* 余白リセット */
  padding: 0 !important;
  line-height: 0 !important;          /* 行間による空白を完全除去 */
  border: none !important;
  text-decoration: none !important;   /* 下線を削除 */
  outline: none !important;           /* フォーカス枠削除 */
  color: inherit !important;          /* 文字色を継承 */
}

/* hover時も装飾を出さない */
.menu-card a:hover {
  text-decoration: none !important;   /* 下線を出さない */
  border: none !important;            /* 枠を出さない */
  outline: none !important;           /* フォーカス枠を出さない */
}

/* カード下部テキスト（pタグ） */
.menu-card p {
  margin: 0 !important;               /* デフォルトの上下余白削除 */
  padding: 12px 0 !important;         /* テキスト内の余白 */
  background: #6cf;                   /* 背景色（明るい青） */
  color: #fff;                        /* テキスト白 */
  text-align: center;                 /* 中央揃え */
  font-weight: bold;                  /* 太字 */
  font-size: 1em;                     /* 標準文字サイズ */
  line-height: 1.6;                   /* 読みやすい行間 */
}

/* 3列維持の微調整（画面幅1054px以下） */
@media (max-width: 1054px) {
  .menu-card {
    width: calc(33.333% - 15px);      /* わずかに縮小して3列維持 */
  }
}

/* スマホ対応（768px以下：1列表示） */
@media (max-width: 768px) {
  .image-menu {
    flex-direction: column;           /* 縦並びに変更 */
    max-width: 95%;                   /* 横幅の最大値を制限 */
    align-items: center;              /* 中央寄せ */
    margin: 80px 25px 60px;           /* 上下左右の重なり解除 */
    padding: 30px 10px 40px;          /* 余白を調整してコンパクトに */
  }

  .menu-card {
    width: 90%;                       /* 1列レイアウト用に拡張 */
    max-width: 360px;                 /* 横幅の上限を設定 */
  }

  .menu-card img {
    height: auto;                     /* 高さ自動調整 */
    aspect-ratio: 16 / 9;             /* 縦横比固定（16:9） */
    object-fit: cover;                /* トリミング表示 */
  }
}

4 トップページ（HOME）のみパンくずを非表示

/* ----------------------------------------
   トップページ（HOME）のみパンくずを非表示
---------------------------------------- */

body.home .breadcrumb, 
body.home .vk_breadcrumb {
  display: none !important; /* HOMEのみ非表示にする */
}

5 完成イメージ

▶ 白背景＋3列カードレイアウト

6 代用プラグイン

このレイアウトは純粋なHTML＋CSSで実装しているため、プラグインは不要です。
ただし、同様のカードデザインをビジュアルエディタで作成したい場合は、以下のプラグインが代用できます：

• Elementor（無料版でもカードブロック作成可能）
• Snow Monkey Blocks（ブロックエディタ用カードあり）

7 まとめ

このコードを使えば、どんなテーマでも「白背景＋3列カード」デザインを簡単に実装できます。
LightningやCocoonでも動作確認済みで、スマホでは重なりが解除され、自動的に1列化します。