2カラムのカードで並べる「デモ体験」と「資料請求」ボタンを設置する方法

この記事では、CTA（行動喚起）を2カラムのカードで並べる「デモ体験」と「資料請求」ボタンのセクションを、ショートコードで簡単に挿入できるように実装します。
クラシックエディタに貼るだけでOK。HTMLテンプレート／functions.php（ショートコード）／汎用CSSを一式掲載します。

1 実装のポイント

• [cta_dual] のショートコードでどこでも挿入
• 画像・文言・リンク先はHTML内を差し替えるだけ

2 functions.php にコードを追加

//----------------------------------------------------
// ショートコード [cta_dual]：2カラムCTAセクション
//----------------------------------------------------
function wp_tips_cta_dual_shortcode() {

    ob_start();
    ?>
    <div class="cta-section">
      <div class="cta-container">

        <!-- 左側：デモ体験 -->
        <div class="cta-box">
          <img src="https://sample.com/wp-content/uploads/20××/××/sample1.jpg" alt="デモ画面イメージ">
          <p class="cta-text">デモ画面を触ってみたい</p>
          <a href="https://sample.com/demo" class="cta-btn cta-orange">無料で試してみる</a>
        </div>

        <!-- 右側：資料請求 -->
        <div class="cta-box">
          <img src="https://sample.com/wp-content/uploads/20××/××/sample2.jpg" alt="資料請求イメージ">
          <p class="cta-text">操作内容や費用体系を詳しく知りたい</p>
          <a href="https://sample.com/contact" class="cta-btn cta-blue">詳しい資料請求</a>
        </div>

      </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('cta_dual', 'wp_tips_cta_dual_shortcode');
    

ウィジェット、記事内で表示する場合：

[cta_dual]
  

3 汎用CSS

/* ------------------------------------
 * 2カラムCTAセクション
 * ------------------------------------ */

/* CTAセクション全体 */
.cta-section { /* セクション全体の設定 */
  /* 背景を上下グラデーションに設定 */
  background: linear-gradient(180deg, #ffe5c3 0%, #fff1e0 100%);
  /* セクション内の余白を確保 */
  padding: 50px 20px;
  /* テキストを中央寄せに */
  text-align: center;
}

/* コンテナ：PCで横並び */
.cta-container { /* CTAボックスを横並びに配置 */
  display: flex; /* 横方向レイアウト */
  justify-content: center; /* 中央寄せ配置 */
  align-items: stretch; /* 高さを揃える */
  flex-wrap: wrap; /* 幅が狭いときは折り返す */
  gap: 40px; /* ボックス間の間隔を設定 */
  max-width: 960px; /* 最大幅を指定 */
  margin: 0 auto; /* 中央寄せ配置 */
}

/* 各ボックス */
.cta-box { /* 各CTAカード全体 */
  background: #fff; /* 白背景 */
  border-radius: 12px; /* 角を丸くする */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 柔らかい影を付与 */
  padding: 30px 20px; /* 内側の余白を設定 */
  width: 420px; /* 各カードの幅 */
  box-sizing: border-box; /* 幅計算にpaddingを含める */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーションを設定 */
}

/* ホバー時の浮き上がり効果 */
.cta-box:hover {
  transform: translateY(-4px); /* 少し上に浮かせる */
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 影を強調 */
}

/* 画像 */
.cta-box img {
  display: block;                /* ブロック要素化 */
  margin: 0 auto 15px;           /* 左右中央寄せ＋下余白 */
  max-width: 100%;               /* 幅いっぱいまで許可 */
  height: auto;                  /* 縦横比を維持 */
  border-radius: 8px;            /* 角丸 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 軽い影 */
}

/* テキスト */
.cta-text {
  font-size: 1.1rem; /* 少し大きめの文字サイズ */
  font-weight: 600; /* 太字 */
  color: #444; /* ダークグレー文字 */
  margin-bottom: 20px; /* 下余白 */
}

/* ボタン共通 */
.cta-btn {
  display: inline-block; /* インラインブロックで配置 */
  padding: 12px 28px; /* 内側余白 */
  border-radius: 40px; /* 丸みを帯びたボタン */
  font-weight: 700; /* 太字 */
  font-size: 1rem; /* 標準的なサイズ */
  text-decoration: none; /* 下線を消す */
  transition: background 0.3s ease, transform 0.2s ease; /* ホバー時の動きを滑らかに */
}

/* オレンジボタン */
.cta-orange {
  background: #ff8c42 !important; /* 濃いオレンジ背景 */
  color: #fff; /* 白文字 */
}
.cta-orange:hover {
  background: #ff9f66; /* 少し明るいオレンジに変化 */
  transform: scale(1.05); /* 拡大してクリック感を演出 */
}

/* 青ボタン */
.cta-blue {
  background: #2a7de1 !important; /* 鮮やかなブルー背景 */
  color: #fff; /* 白文字 */
}
.cta-blue:hover {
  background: #4999f0; /* 明るいブルーに変化 */
  color: #003366; /* 文字色を濃い青に変更してコントラストUP */
  transform: scale(1.05); /* 拡大して動きを出す */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .cta-container {
    flex-direction: column; /* 縦方向に並べる */
    align-items: center; /* 中央寄せ */
  }
  .cta-box {
    width: 100%; /* 幅を全体に広げる */
    max-width: 420px; /* 最大幅を維持 */
  }
}
    

4 HTMLテンプレート（ショートコード不使用・そのまま貼る版）

ショートコードを使わず、本文に直接貼りたい場合はこちらを使用してください。

<div class="cta-section">
  <div class="cta-container">

    <!-- 左側：デモ体験 -->
    <div class="cta-box">
      <img src="https://sample.com/wp-content/uploads/20××/××/sample1.jpg" alt="デモ画面イメージ">
      <p class="cta-text">デモ画面を触ってみたい</p>
      <a href="https://sample.com/demo" class="cta-btn cta-orange">無料で試してみる</a>
    </div>

    <!-- 右側：資料請求 -->
    <div class="cta-box">
      <img src="https://sample.com/wp-content/uploads/20××/××/sample2.jpg" alt="資料請求イメージ">
      <p class="cta-text">操作内容や費用体系を詳しく知りたい</p>
      <a href="https://sample.com/contact" class="cta-btn cta-blue">詳しい資料請求</a>
    </div>

  </div>
</div>
    

5 完成イメージ

▶ 「デモ体験」と「資料請求」ボタン

6 代用プラグイン

プラグインで類似UIを作る場合は、Reusable Blocks（再利用ブロック） や ショートコード作成系 が候補ですが、本記事のショートコード実装は軽量で高速です。

7 まとめ

• [cta_dual] で2カラムCTAをどこでも挿入
• 画像・文言・リンクを差し替えるだけで使い回し可能
• CSSは全行コメント付きで管理性◎