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

WordPressのページ内に、画面幅いっぱいに広がるCTA（Call To Action）を設置したいことがあります。

たとえば、PCでは「説明文」と「お問い合わせボタン」を横並びにし、スマホでは上下に並べる形です。

この記事では、PCでは2カラム、スマホでは縦並びに自動で切り替わるワイドCTAを、HTMLとCSSだけで作る方法を紹介します。

JavaScriptは使用しません。クラシックエディタを使っている場合も、HTMLを「テキスト」モードに貼り付けて利用できます。

1 今回作るワイドCTA

完成すると、PCでは左側に案内文、右側に申込みボタンが表示されます。

スマホやタブレットでは、自動的に「案内文 → 申込みボタン」の順で縦並びになります。

PC用とスマホ用のHTMLを別々に作る必要はありません。同じHTMLを使い、CSSでレイアウトだけを切り替えます。

2 HTMLを設置する

まず、CTAを表示したい場所へ次のHTMLを設置します。

クラシックエディタの場合は、「テキスト」モードに切り替えてから貼り付けてください。

<div class="wcta-wrap">

    <section class="wcta-box" aria-label="無料相談のご案内">

        <div class="wcta-inner">

            <div class="wcta-copy">

                <h2 class="wcta-title">無料相談受付中！</h2>

                <p>
                    ペット飼育に関する知識や判断に不安を感じているなら、
                    無料相談をご利用ください。
                    <br class="wcta-pc-only">
                    不安を解消し、安心してペット飼育に取り組みましょう。
                </p>

            </div>


            <div class="wcta-action">

                <p class="wcta-label">
                    お申し込みは今すぐこちらへ
                </p>

                <a class="wcta-button" href="/contact/">
                    今すぐ無料相談に申し込む
                </a>

            </div>

        </div>

    </section>

</div>

このHTMLの中で、まず変更するのは文章とリンク先です。

ボタンのリンク先は、次の部分です。

href="/contact/"

実際のお問い合わせページや予約ページのURLに変更してください。

3 CSSを追加する

次にCSSを追加します。

子テーマを使っている場合は子テーマの style.css、またはテーマで利用できる追加CSS欄などへ記述してください。

コード内のコメントは、あとから見返したときに場所が分かる程度にしています。

/* ワイドCTA */
.wcta-wrap,
.wcta-wrap * {
    box-sizing: border-box;
}

.wcta-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 24px;
}


/* 背景部分 */
.wcta-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 48px 32px;
    background:
        url("https://example.com/wp-content/uploads/sample.jpg")
        center / cover no-repeat;
}


/* 背景画像を少し薄くする */
.wcta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
}


/* CTAの中身 */
.wcta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}


/* 左側の文章 */
.wcta-copy {
    flex: 1 1 0;
    min-width: 0;
}

.wcta-box .wcta-title {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.4;
}

.wcta-copy p {
    margin: 0;
    color: #222;
    font-size: 1rem;
    line-height: 1.8;
}


/* 右側の申込み部分 */
.wcta-action {
    flex: 0 1 380px;
    width: 100%;
    max-width: 380px;
    padding: 28px 24px;
    background: #033b86;
    border-radius: 12px;
    text-align: center;
}

.wcta-label {
    margin: 0 0 18px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
}


/* CTAボタン */
.wcta-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: #f57c00;
    border-radius: 8px;
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.wcta-button:hover {
    opacity: 0.9;
}


/* タブレット・スマホ */
@media screen and (max-width: 900px) {

    .wcta-wrap {
        padding: 0 16px;
    }

    .wcta-box {
        padding: 36px 24px;
    }

    .wcta-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .wcta-copy {
        width: 100%;
        text-align: left;
    }

    .wcta-action {
        width: 100%;
        max-width: none;
    }

    .wcta-box .wcta-title {
        font-size: 1.6rem;
    }

    .wcta-pc-only {
        display: none;
    }
}


/* 小さいスマホ */
@media screen and (max-width: 600px) {

    .wcta-wrap {
        padding: 0 12px;
    }

    .wcta-box {
        padding: 30px 18px;
    }

    .wcta-box .wcta-title {
        font-size: 1.45rem;
    }

    .wcta-copy p {
        font-size: 0.95rem;
    }

    .wcta-action {
        padding: 24px 18px;
    }

    .wcta-label {
        font-size: 1rem;
    }

    .wcta-button {
        padding: 14px 15px;
        font-size: 1rem;
    }

}

4 背景画像を変更する

背景画像は、CSSの次の部分で指定しています。

background:
    url("https://example.com/wp-content/uploads/sample.jpg")
    center / cover no-repeat;

sample.jpg のURLを、WordPressのメディアライブラリへアップロードした画像のURLに変更します。

たとえば、画像URLが次の場合、

https://example.com/wp-content/uploads/2026/08/pet.jpg

CSSは次のようになります。

background:
    url("https://example.com/wp-content/uploads/2026/08/pet.jpg")
    center / cover no-repeat;

5 背景画像の上でも文字を読みやすくする

写真を背景にすると、写真の色によっては文字が読みにくくなります。

そこで今回のCSSでは、背景画像の上に薄い白色を重ねています。

.wcta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
}

最後の 0.78 が透明度です。

背景画像をもっと薄くしたい場合は、数字を大きくします。

background: rgba(255, 255, 255, 0.9);

逆に、背景写真をもっと見せたい場合は数字を小さくします。

background: rgba(255, 255, 255, 0.6);

写真によって読みやすさが変わるため、実際の画像を見ながら調整してください。

6 画面幅いっぱいに広げる仕組み

WordPressの記事本文は、多くのテーマで横幅が制限されています。

そのため、普通にCTAを設置すると記事本文と同じ幅になります。

今回のCSSでは、次の指定を使って本文幅の外側まで広げています。

.wcta-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

100vw は、ブラウザの表示幅と同じ横幅を意味します。

さらに、

margin-left: calc(50% - 50vw);

を指定することで、記事本文の中央位置を基準に、CTAを画面の左端まで移動しています。

これによって、記事本文の幅に関係なく、画面幅いっぱいに広がるデザインを作れます。

ただし、テーマ側の親要素に特殊な幅指定や overflow の設定がある場合は、サイトに合わせた調整が必要になることがあります。

7 PCでは左右2カラムで表示する

PCでは、案内文と申込み部分を横並びにします。

その役割をしているのが、次の部分です。

.wcta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

左側には説明文、右側には申込みボタンが表示されます。

左右の間には gap: 40px; を指定しているため、窮屈にならず、適度な間隔ができます。

8 スマホでは縦並びに切り替える

画面幅が900px以下になると、左右2カラムから縦並びへ切り替えます。

@media screen and (max-width: 900px) {

    .wcta-inner {
        flex-direction: column;
    }

}

スマホでは、説明文の下に申込みボタンが表示されます。

PC用とスマホ用のHTMLを2つ作っているわけではないため、文章やリンクを修正するときも1か所だけ変更すれば済みます。

9 スマホの文章は左寄せにする

スマホでは長い文章を中央寄せにすると、行の始まる位置が揃わず読みにくくなることがあります。

そのため、説明文は左寄せにしています。

.wcta-copy {
    width: 100%;
    text-align: left;
}

申込み部分は中央寄せのままなので、説明文の読みやすさを保ちながら、CTAボタンもしっかり目立たせることができます。

10 PCだけ文章を改行する

PCでは、文章を読みやすい位置で改行したいことがあります。

しかし、その改行をスマホにも残すと、画面幅が狭いため不自然な位置で文章が折り返されることがあります。

そこで、HTMLでは次のようにしています。

<br class="wcta-pc-only">

そして900px以下では、この改行を非表示にします。

.wcta-pc-only {
    display: none;
}

これで、PCでは指定した場所で改行し、スマホでは画面幅に合わせて自然に文章が折り返されます。

11 申込みボタンの色を変更する

今回のボタンはオレンジ色にしています。

background: #f57c00;

サイトのイメージに合わせて、この色を変更してください。

右側の申込みボックスは青色です。

background: #033b86;

こちらもサイトのブランドカラーなどに変更できます。

12 クラス名を専用にしている理由

今回のコードでは、
.wcta-wrap、
.wcta-inner、
.wcta-button
のように、すべて wcta から始まるクラス名にしています。

WordPressのテーマやプラグインでは、.button や .eyecatch などの一般的なクラス名がすでに使われていることがあります。

同じクラス名を使うと、テーマ側のCSSが影響してデザインが崩れる場合があります。

そこで、今回のCTA専用の名前を付けることで、他のデザインと干渉しにくくしています。

13 クラシックエディタで使う場合

クラシックエディタを使用している場合は、HTMLを「テキスト」モードへ貼り付けます。

CSSは記事本文の中に直接書くのではなく、子テーマの style.css や、テーマ側の追加CSS機能などへ記述する方が管理しやすくなります。

また、親テーマの style.css を直接編集すると、テーマを更新したときに変更内容が消える可能性があります。

子テーマを使用している場合は、子テーマ側へCSSを追加しておくと管理しやすくなります。

14 うまく全幅表示にならない場合

今回のコードは一般的なWordPressテーマで使える形ですが、テーマによってページの構造は異なります。

コードを追加しても画面幅いっぱいにならない場合は、CTAの外側にある親要素のCSSを確認してください。

特に、親要素に overflow: hidden; や overflow: clip; が指定されている場合、外側へ広げた部分が切れてしまうことがあります。

また、テーマ独自の余白や最大幅が指定されている場合も、少し調整が必要です。

15 完成イメージ

16 まとめ

今回の方法を使うと、HTMLとCSSだけで、PCとスマホの両方に対応したワイドCTAを作ることができます。

PCでは案内文と申込みボタンを左右に配置し、スマホでは縦並びに変更するため、画面サイズに合わせて読みやすいレイアウトになります。

また、HTMLは1つだけなので、PC用とスマホ用に同じ文章を二重管理する必要もありません。

背景画像、文章、ボタンのリンク先、色を変更すれば、お問い合わせ、無料相談、予約、資料請求、見積り依頼など、さまざまな用途に応用できます。

WordPressの記事本文より大きく見せたいCTAを作りたい場合は、サイトのデザインに合わせて調整して使ってみてください。