WordPressでボタンを設置する方法｜リンク設定・デザイン

WordPressで別ページや申込フォームへ移動するボタンは、標準の「Buttons」ブロックで作成できます。リンク先、色、幅、配置を画面上で設定できるため、一般的なリンクボタンにプラグインは必要ありません。

この記事では、ボタンの作り方とリンク設定、デザイン変更、横並び、ホバー効果、HTMLで作る場合の考え方、「上に戻る」ボタンの設置まで初心者向けに解説します。

WordPressでボタンを作る方法

現在のブロックエディターでは、複数のボタンをまとめる「Buttons」ブロックの中に個別ボタンを追加します。以前の単体Buttonブロックを探すのではなく、ブロック追加で「ボタン」または「Buttons」を検索してください。

1. 投稿または固定ページでボタンを置きたい位置を選ぶ
2. ブロック追加から「ボタン」を選ぶ
3. ボタン内へ「詳しく見る」などの表示文字を入力する
4. ツールバーのリンクアイコンからURLを設定する
5. 右側のブロック設定でスタイル、色、幅、余白を調整する
6. プレビューでクリック先とスマートフォン表示を確認する

ボタン文字は「こちら」だけにせず、クリック後に何が起きるか分かる言葉にします。「料金表を見る」「予約フォームへ進む」「資料をダウンロード」など、行動と遷移先を一致させてください。

ボタンのリンク設定方法

サイト内のページへリンクする

リンク欄へページタイトルを入力すると、サイト内コンテンツを検索できる場合があります。候補から選ぶか、正しいURLを貼り付けます。ページ内の特定箇所へ移動する場合は、リンク先要素にHTMLアンカーを設定し、URL末尾へ #anchor-name を付けます。詳しい設定はリンクの貼り方で確認できます。

外部サイトへリンクする

他サイトへのリンクはURLを正確に貼り付け、必要な場合だけ「新しいタブで開く」を有効にします。すべてを新しいタブにすると操作が統一されず、モバイルでは戻り方が分かりにくくなることがあります。リンク先の安全性と目的で判断してください。

電話・メール・ファイルへリンクする

用途	リンク例	確認点
電話	tel:0123456789	スマートフォンで発信確認、表示番号と一致
メール	mailto:info@example.com	迷惑メール対策と代替フォーム
PDF等のファイル	メディアのファイルURL	容量、ファイル名、更新時のURL
ページ内移動	#contact	リンク先に同じHTMLアンカーを設定

ファイルを差し替えるたびにURLが変わる運用では、過去のボタンが古いファイルを指すことがあります。更新担当者が確認できるよう、ボタンとファイルの設置ページを記録します。

ボタンのデザインを調整する

Buttonsブロックでは、テーマが対応していれば塗りつぶし・輪郭、文字色、背景色、角丸、幅、余白などを設定できます。まず標準機能で整え、実現できない部分だけCSSを追加します。

色とコントラストを決める

背景と文字の明度差が小さいと、ボタンとして認識しにくくなります。通常時だけでなく、マウスを載せた時、キーボードフォーカス時、訪問済みリンクの状態も確認します。サイトのブランド色を使っても、本文リンクとの区別がつく形にしてください。

幅と余白を調整する

「25%」「50%」「75%」「100%」などの幅を選べるテーマでは、ボタン数と本文幅に合わせます。短い文字のボタンを不必要に全幅にすると主張が強すぎる一方、タップ領域が小さすぎるとスマートフォンで押しにくくなります。

ボタン専用クラスを付ける

独自CSSを使う場合は、Buttonsブロックまたは個別ボタンの「追加CSSクラス」に、cta-buttons や download-button など目的が分かる名前を設定します。サイト内のすべての .wp-block-button__link を一括変更するより、影響範囲を限定できます。

ボタンを横並びにする方法

2つ以上のボタンは、同じButtonsブロック内へ追加すると横並びにできます。ブロック全体の配置・両端揃え・中央揃えと、各ボタンの幅を調整してください。

1. 既存のButtonsブロックを選択する
2. ブロック内の「＋」から個別ボタンを追加する
3. 各ボタンへ文字とリンクを設定する
4. Buttonsブロックの配置・方向・折り返しを確認する
5. スマートフォンで縦積みまたは折り返しになるか確認する

「申し込む」と「詳しく見る」のように優先度が違う場合は、主ボタンを塗りつぶし、副ボタンを輪郭にすると役割を区別できます。横幅が足りない画面で文字が2行になりすぎるなら、CSSで無理に横並びを固定せず縦に並べます。

ボタンのホバー効果をCSSでつける

テーマの標準スタイルで不足する場合は、追加CSSで背景色や移動量を調整できます。次は、Buttonsブロックに cta-buttons クラスを付けた場合の例です。

.cta-buttons .wp-block-button__link {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cta-buttons .wp-block-button__link:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.cta-buttons .wp-block-button__link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

ホバーはマウス操作でしか確認できないため、キーボードのフォーカス表示を消さないことが重要です。動きを大きくしすぎると読みづらくなるため、短時間・小さな変化にします。CSSの追加場所と反映されない場合の切り分けは、CSSカスタマイズで確認してください。

HTMLでボタンを作る場合の考え方

別ページへ移動する要素は、見た目がボタンでもHTMLでは通常リンクです。<a href="..."> を使い、CSSでボタンのように装飾します。フォーム送信、ダイアログを開く、JavaScript処理を実行するなど、ページ内の操作には <button> を使います。

<a class="custom-link-button" href="/contact/">
  お問い合わせフォームへ
</a>

.custom-link-button {
  display: inline-block;
  padding: 0.8em 1.4em;
  border-radius: 0.35em;
  text-decoration: none;
  font-weight: 700;
}

ブロックで作れるリンクボタンをHTMLへ置き換える必要は通常ありません。独自HTMLを使う場合は、テーマ変更後のCSS、キーボード操作、フォーカス、リンク先の説明を自分で保守する必要があります。

「上に戻る」ボタンを設置する方法

記事内の最後から先頭へ戻るだけなら、ページ上部のブロックにHTMLアンカーを設定し、#page-top へリンクするボタンを置けます。まず、記事冒頭の最初のブロックを選び、「高度な設定」→「HTMLアンカー」に page-top と入力します。

1. 記事冒頭のブロックへ page-top のHTMLアンカーを設定する
2. 記事末尾などにButtonsブロックを追加する
3. リンク先へ #page-top を入力する
4. 「ページ上部へ戻る」など目的が分かる文字を付ける
5. クリック後の位置とURL末尾をプレビューで確認する

画面右下へ常時固定するボタンは、テーマ機能、プラグイン、CSS・JavaScriptで実装します。テーマに標準機能があるならそれを優先し、同じ機能のプラグインを重ねないでください。固定ボタンがCookie通知、チャット、スマホメニューを隠さないかも確認します。

ボタン用プラグインが必要なケース

標準Buttonsブロックでリンク、色、幅、横並びを設定できるため、一般的なボタンだけを理由にプラグインを増やす必要はありません。次の機能が明確に必要な場合に限定して検討します。

• アイコンやアニメーションを管理画面で細かく設定したい
• クリックでポップアップやモーダルを開きたい
• 条件に応じてボタンの表示・非表示を切り替えたい
• A/Bテストやクリック計測を一体で管理したい
• サイト全体で共通のCTAパーツを集中管理したい

導入前に、停止するとHTMLやショートコードがどう残るか、編集権限ごとの操作、表示速度、アクセシビリティ、最終更新を確認します。機能の多さより、必要なボタンを長期的に編集できることを優先してください。

よくある質問

まとめ

WordPressのリンクボタンは、標準のButtonsブロックで文字、URL、色、幅、配置を設定できます。横並びも同じブロック内で作成し、狭い画面では折り返しや縦積みになるよう確認します。

デザインを追加する場合は専用クラスで影響範囲を限定し、ホバーだけでなくキーボードフォーカスも残してください。ページ移動にはリンク、ページ内操作にはbutton要素を使い分け、高度な機能が必要な場合だけプラグインを導入しましょう。