ワイドCTAの作り方｜WordPressで反応率が上がるデザイン手順

この記事では、PC と スマホで異なるレイアウトを切り替えて表示できる「ワイドCTA」の実装方法を解説します。WordPress のテーマ編集やオリジナルデザインを導入したい方に役立つコードを、HTML・CSSをまとめて紹介します。

1 実装のポイント

今回のアイキャッチは、以下の仕組みで構成されています。

• 全幅背景を作るための .wide-wrap を使用
• PC は横並び2カラム、SP は縦並びレイアウトへ切り替え
• クラシックエディタでも問題なく編集できる構造

2 実装HTML

<div class="wide-wrap">
    <div class="sticky-title">
        <div class="eyecatch">
            <div class="eyecatch-left">
                <h2 class="eyecatch-title">無料相談受付中！</h2>
                <p>ペット飼育に関する知識や判断に不安を感じているなら、無料診断でペットのより良い環境を。<br>不安を解消し、安心してペット飼育に取り組みましょう。</p>
            </div>

            <div class="eyecatch-right">
                <div class="cta-label">お申し込みは今すぐこちらへ</div>
                <a href="#" class="cta-btn">今すぐ無料相談に申し込む</a>
            </div>
        </div>
    </div>
</div>

3 汎用CSS

/* ------------------------------------------- 
 * ワイドCTA
 * ----------------------------------------- */

.wide-wrap{ /* 全幅表示のための外枠 */
	position:relative; /* 相対位置指定 */
	padding: 30px; /* 内側の余白 */
	margin:0 calc(50% - 50vw) !important; /* ブラウザ幅全体に広げる計算式 */
	overflow:hidden; /* はみ出し防止 */
}

.sticky-title { /* 背景画像つきの横幅いっぱいタイトルブロック */
    padding: 40px 0 40px; /* 上下余白 */
	width: 100%; /* ブロック幅100％ */
	margin:30px; /* 外側余白 */
	justify-content: center; /* 中身の中央寄せ */
	overflow: hidden; /* はみ出し防止 */
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向中央寄せ */
    background-image: url("https://example.com/wp-content/uploads/20××/××/sample.jpg"); /* 背景画像 */
    background-size: cover; /* 全体を覆う */
    background-position: center; /* 画像中央配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
}

.eyecatch { /* 左右2カラムの中身コンテナ */
    display: flex; /* 横並び */
    justify-content: space-between; /* 左右に配置 */
    align-items: center; /* 縦中央 */
    width: 100%; /* 幅100% */
    max-width: 960px; /* 最大幅を制限 */
    margin: 0 auto; /* 中央に */
    color: #fff; /* 文字色白 */
}

.eyecatch-left { /* 左側カラム */
    width: 50%; /* 幅50% */
}

.eyecatch-title { /* タイトル文字 */
    font-size: 1.8em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    margin-bottom: 20px; /* 下余白 */
	color:#111; /* 文字色 */
    line-height: 1.3; /* 行間 */
}

.eyecatch-left p { /* 左カラムの本文 */
    line-height: 1.7; /* 行間 */
    font-size: 1em; /* フォントサイズ */
	color:#111; /* 文字色 */
}

.eyecatch-right { /* 右側のCTAブロック */
    width: 40%; /* 幅40% */
    text-align: center; /* 中央寄せ */
	background: #033B86; /* 背景色 */
    padding: 25px 20px; /* 内側余白 */
    border-radius: 10px; /* 角丸 */
}

.cta-label { /* CTA上部ラベル */
    font-size: 1.2em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    margin-bottom: 20px; /* 下余白 */
}

.cta-btn { /* CTAボタン */
    display: inline-block; /* インラインブロック */
    padding: 15px 25px; /* 余白 */
    font-size: 1.2em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    background: #ff9800; /* ボタン色 */
    color: #fff; /* 文字白 */
    text-decoration: none; /* 下線なし */
    border-radius: 8px; /* 角丸 */
    box-shadow: 2px 2px 7px rgba(0,0,0,0.4); /* 影 */
}

.cta-btn:hover { /* ホバー時 */
    opacity: 0.9; /* 少し透明に */
}

@media screen and (max-width: 1050px) { /* 1050px以下のスマホ・タブレット向け */
    .wide-wrap { /* 外枠調整 */
        margin: 0;            /* 全幅解除 */ 
        padding: 20px;        /* 左右余白 */ 
    }

    .sticky-title { /* 背景ブロックの余白調整 */
        margin: 0; /* 外側ゼロ */
        padding: 30px 20px; /* 内側余白調整 */
    }

    .eyecatch { /* カラムを縦並びに変更 */
        flex-direction: column; /* 縦並び */
        gap: 30px; /* 上下の隙間 */
        align-items: center; /* 中央寄せ */
        text-align: center;  /* テキスト中央 */
        width: 100%; /* 幅100% */
        padding: 0 20px; /* 左右余白 */
        box-sizing: border-box; /* 余白を含めて幅計算 */
    }

    .eyecatch-title { /* タイトル文字 */
        font-size: 1.4em; /* フォントサイズ */
        font-weight: bold; /* 太字 */
        margin-bottom: 20px; /* 下余白 */
        color:#111; /* 文字色 */
        line-height: 1.3; /* 行間 */
    }

    .eyecatch-left,
    .eyecatch-right { /* 2つのカラムを100%幅に */
        width: 100%; /* 全幅 */
    }
}

4 完成イメージ

▶ ワイドCTA

5 代用プラグイン

HTML コードより簡単に同様のブロックを作りたい場合、以下のプラグインが便利です：

• Snow Monkey Blocks — レイアウト構築が簡単
• VK Blocks（Lightning）— ヒーローブロックが豊富
• Blockons — CTA ボックス・背景セクションが豊富

6 まとめ

PC とスマホで別デザインを用意することで、より読みやすく、CV を高めるアイキャッチが簡単に実装できます。この記事の HTML・CSS をそのままテーマにコピペするだけで動作しますので、ぜひ活用してみてください。