背景画像の上にタイトルとボタンを重ねたセクションを設置する方法

この記事では、ペットサイトなどで使える「背景＋タイトル＋3ボタン」のセクションデザインを紹介します。
背景画像の上にタイトルとボタンを重ねることで、印象的で洗練されたセクションを簡単に作成できます。

1 HTML構造

<section class="fullwidth-section">
  <div class="overlay">
    <div class="section-content">
        <p>あなたとペットが安心して過ごせるように、心をこめたサポートを提供します。</p>
      <div class="button-area">
        <a href="#" class="btn">ペットケアの基本</a>
        <a href="#" class="btn">おすすめグッズ</a>
        <a href="#" class="btn">獣医師に相談</a>
      </div>
    </div>
  </div>
</section>

2 汎用CSS

/* -------------------------------------------
 * ペット向け全幅セクションデザインCSS
 * ----------------------------------------- */

/* --- 全幅背景セクション --- */
.fullwidth-section {
  position: relative; /* 子要素の位置指定に必要 */
  width: 100%; /* 全幅 */
  background-image: url('https://example.com/wp-content/uploads/20××/××/sample.jpg'); /* 背景画像（ペット写真など） */
  background-size: cover; /* 画像を全体にフィット */
  background-position: center; /* 画像を中央寄せ */
  background-repeat: no-repeat; /* 繰り返しなし */
  color: #fff; /* 白文字 */
  text-align: center; /* テキスト中央 */
}

/* --- 半透明のオーバーレイ --- */
.overlay {
  background: rgba(0, 0, 0, 0.4); /* 黒透明レイヤー */
  padding: 80px 20px; /* 上下の余白 */
}

/* --- コンテンツ --- */
.section-content h2 {
  font-size: 28px; /* タイトル文字サイズ */
  font-weight: bold; /* 太字 */
  margin-bottom: 15px; /* 下余白 */
  border-left: 4px solid #ff6f61; /* ピンク系ライン（ペットらしく柔らかい色） */
  display: inline-block; /* ラインをタイトル左に表示 */
  padding-left: 10px; /* ラインと文字の間隔 */
  background: transparent; /* 背景透明 */
}

.section-content p {
  font-size: 16px; /* 説明文の文字サイズ */
  margin-bottom: 40px; /* 下余白 */
}

/* --- ボタンエリア --- */
.button-area {
  display: flex; /* 横並び配置 */
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap; /* 折り返し可能 */
  gap: 20px; /* ボタン間の余白 */
}

.button-area .btn {
  display: inline-block; /* インラインブロックで横並び */
  background: #fff; /* 白背景 */
  color: #005b96; /* 水色系文字（優しい印象） */
  font-weight: bold; /* 太字 */
  text-decoration: none; /* 下線なし */
  padding: 14px 30px; /* 内側余白 */
  border-radius: 6px; /* 丸みをつける */
  transition: 0.3s; /* ホバー時のアニメーション */
}

.button-area .btn:hover {
  background: #ff6f61; /* ホバー時ピンク系背景 */
  color: #fff; /* 白文字に反転 */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .overlay {
    padding: 60px 15px; /* 余白を減らす */
  }
  .section-content h2 {
    font-size: 22px; /* タイトルを小さく */
  }
  .button-area {
    flex-direction: column; /* 縦並びに変更 */
    gap: 15px; /* ボタン間の余白を狭く */
  }
}

3 実装のポイント

このセクションは、背景画像の上に半透明レイヤー（.overlay）を重ねてテキストとボタンを見やすくしています。
Flexboxを使ってボタンを横並びに配置し、スマホ時には自動で縦並びに切り替わるレスポンシブ対応です。

4 完成イメージ

5 代用プラグイン

ブロックエディタでも再現したい場合は、以下のようなプラグインを使うと便利です：

• Elementor：背景画像＋ボタン配置がGUIで簡単に可能。
• Kadence Blocks：無料で全幅セクションを再現可能。

6 まとめ

このデザインは、ペット系サイト・動物病院・保護団体・トリミングサロンなどの「紹介セクション」や「理念紹介」にぴったりです。
全幅背景と柔らかなボタンカラーで、優しさと清潔感を演出できます。