CTA Box Builder

記事に貼れるCTAボックスを作成する。

記事下や本文中に置けるCTAボックスを、ブラウザ上で編集できます。内部リンクと外部リンクを切り替えながら、HTMLをコピーして小さく試せる形にします。

What you can do

・タイトル、説明文、ボタン文言を編集
・内部リンク / 外部リンクを切り替え
・HTML + CSSをまとめてコピー

Edit

入力内容

TitleDescription

Button TextLink URL

Link Type

内部リンク/contact や /services など、同じサイト内の導線。外部リンク別サイト、LP、外部サービスへの導線。

内部リンクは /contact のように入力します。先頭の / がない場合は自動で補います。

Note

Preset

Standard記事下CTAとして使いやすい基本形。Soft本文中にも置きやすい、やわらかい見た目。Minimal装飾を控えた、シンプルな導線。Notice補足案内や軽いお知らせにも使いやすい形。

ボタンを別タブで開く同じサイト内のリンクでは、通常は同じタブのままでも使いやすいです。

Preview

表示イメージ

Next Step

記事の導線を、必要なところから整える

記事下や本文中に置けるCTAボックスです。読者が次に進みやすい案内を、小さく試せる形で作成できます。

詳しく見る

リンク先の内容を確認してから設置してください。

現在のリンク設定

リンク種別: 内部リンク
出力URL: /contact
別タブ: OFF

設置前の確認ポイント

・リンク先URLに誤りがないか確認する
・記事内容とCTAの案内がずれていないか確認する
・WordPressでは下書きで表示を確認してから公開する

HTML

生成されたHTML

HTMLとCSSをまとめてコピーできます。WordPressの場合は、カスタムHTMLブロックで試してください。

<style>
.pkz-cta-box {
  box-sizing: border-box;
  max-width: 760px;
  margin: 32px auto;
  padding: 28px;
  border: 1px solid #7c9a92;
  border-radius: 14px;
  background: #f4f3ef;
  color: #1c1917;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pkz-cta-box__label {
  margin: 0 0 10px;
  color: #7c9a92;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pkz-cta-box__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
}

.pkz-cta-box__description {
  margin: 14px 0 0;
  color: #57534e;
  font-size: 15px;
  line-height: 1.8;
}

.pkz-cta-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #7c9a92;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.pkz-cta-box__note {
  margin: 14px 0 0;
  color: #78716c;
  font-size: 12px;
  line-height: 1.7;
}
</style>

<section class="pkz-cta-box" aria-label="CTA">
  <p class="pkz-cta-box__label">Next Step</p>
  <h2 class="pkz-cta-box__title">記事の導線を、必要なところから整える</h2>
  <p class="pkz-cta-box__description">記事下や本文中に置けるCTAボックスです。読者が次に進みやすい案内を、小さく試せる形で作成できます。</p>
  <a class="pkz-cta-box__button" href="/contact">詳しく見る</a>
  <p class="pkz-cta-box__note">リンク先の内容を確認してから設置してください。</p>
</section>

Guide

CTAの書き方を見る

記事下CTAの考え方、内部リンクと外部リンクの使い分け、設置前の確認ポイントをまとめています。

Read Article

Templates

型から考える

CTAパーツや診断コンテンツなど、記事改善や導線設計に使える小さな型を確認できます。

View Templates

Contact

導線を見直す

CTAだけでなく、記事・内部リンク・問い合わせまでの流れを見直したい場合は、概要をお送りください。