WordPressのボタンブロックを使うと、「詳しく見る」「申込みページへ」など、読者に押してほしいリンクを分かりやすく表示できます。作成はボタンを追加してURLを設定するだけですが、文字だけ変えてリンク先を確認しないと誤誘導になります。この記事では追加、リンク設定、別タブ、配置、スマホ確認、削除まで順番に説明します。
ボタンブロックでできること
ボタンブロックは、リンクをボタンの形で表示するブロックです。記事内の別ページ、問い合わせフォーム、資料ページ、外部の公式サイトなどへ案内できます。通常の文章リンクより目に入りやすいため、次の行動を一つ明確に示したい場所に向いています。
WordPressでは、外側に複数ボタンを管理する「ボタン」ブロック、その中に一つずつの「ボタン」ブロックがあります。配置や間隔を変えるときは外側、文字・リンク・色を変えるときは内側を選びます。リスト表示で階層を確かめられます。
ボタンを追加する手順
- 投稿または固定ページの編集画面を開きます。
- ボタンを置きたい場所の「＋」を押します。
- 検索欄へ「ボタン」と入力します。
- 表示された「ボタン」ブロックを選びます。
- ボタン内の「テキストを追加」を押します。
- 「料金を確認する」など、押した後が分かる文言を入力します。
- 右上の「下書き保存」を押します。
「こちら」「詳細」のような文言だけでは、画面読み上げを使う人や流し読みする人にリンク先が伝わりません。「WordPressの始め方を見る」のように、目的を単独で理解できる言葉にします。
ボタンへリンクを設定する手順
- 内側のボタンをクリックします。
- ツールバーの鎖の形をした「リンク」アイコンを押します。
- サイト内ページならタイトルを入力して候補から選びます。
- URLを直接使う場合は、先頭から末尾まで貼り付けます。
- Enterキーまたは確定ボタンを押します。
- リンクアイコンを再度開き、保存されたURLを読み直します。
サイト内の記事は検索候補から選ぶと入力間違いを減らせます。外部URLを貼る場合は、似たドメインや余分な文字が入っていないか確認します。公開前プレビューでボタンを押し、意図したページのタイトルとURLになったことを確かめます。
同じタブと新しいタブの使い分け
サイト内の関連記事へ移動するボタンは、基本的に同じタブで開きます。読者はブラウザの戻る操作で記事へ戻れます。別タブを増やしすぎると、スマートフォンで現在位置を見失いやすくなります。
外部サイトや入力途中の作業を残したいページでは、新しいタブを検討できます。リンク設定を開き、「新しいタブで開く」を有効にします。新しいタブを使う場合も、ボタン文言や前後の説明から外部ページへ移動することが分かるようにします。
サイト内のページも全部、新しいタブにした方が親切だと思っていました。
スマホだとタブが増えて、かえって戻りにくくなることもあるんですね。
はい。
内部ページは同じタブを基本にし、外部ページなど必要なときだけ別タブにすると迷いにくいです。
リンク先によって使い分ければいいんですね。
ボタンの前にも「公式ページへ移動します」と書けば、押す前に分かって安心です！
とても良い考えです。
見た目だけでなく、押した後の動きを予告することが親切な導線になります。
ボタンの色とスタイルを変える
内側のボタンを選び、右側の「スタイル」や「色」から背景色と文字色を変更します。背景と文字の明るさが近いと読みにくいため、十分な差を付けます。サイトの主要ボタンは同じ色にそろえると、読者が役割を覚えやすくなります。
「塗りつぶし」と「枠線」などのスタイルがある場合、最も重要な行動を塗りつぶし、補助的な行動を枠線にすると優先順位を示せます。色を増やしすぎず、テーマに登録された色を使うと統一感を保てます。
ボタンの位置と幅を調整する
複数ボタンを包む外側の「ボタン」ブロックを選ぶと、左寄せ、中央、右寄せ、ボタン同士の配置を変更できます。内側のボタンを選ぶと、幅を25％、50％、75％、100％などへ変更できる環境があります。
本文中のボタンは、前後の文章と流れが合う位置へ置きます。画面いっぱいの100％幅はスマホで押しやすい一方、パソコンでは強く見えすぎることがあります。プレビューで両方の幅を見て決めます。
ボタンを2つ並べる方法
- 既存の内側ボタンを選びます。
- 外側のボタンブロック内に表示される「＋」を押します。
- 2つ目の文言を入力します。
- 2つ目専用のリンクを設定します。
- 外側のボタンを選び、配置と間隔を調整します。
2つのボタンが同じ強さに見えると、どちらを押すべきか迷います。「申込み」と「詳しい条件」のように役割が違うなら、主要ボタンを塗りつぶし、補助ボタンを枠線にします。選択肢が3つ以上なら、比較表や通常のリンク一覧の方が読みやすい場合があります。
スマートフォンで確認する項目
プレビューのモバイル表示で、ボタン文字が不自然に3行以上へ折り返していないか、画面の外へ出ていないか確認します。2つを横並びにした場合は幅が狭くなるため、縦並びにした方が押しやすいことがあります。
ボタン同士や周囲のリンクが近すぎると、違う場所を押す原因になります。上下に適度な間隔を取り、実際のスマートフォンで親指を使って押せるか試します。横方向へページが動く場合は、固定幅や長すぎる英数字を確認します。
リンク先を変更する方法
- 変更する内側のボタンを選びます。
- リンクアイコンを押します。
- 表示されたURLの編集ボタンを押します。
- 新しいURLまたは記事タイトルを入力します。
- 確定後、プレビューで実際に押します。
文言だけを変更してもリンク先は自動で変わりません。「無料相談」から「料金表を見る」へ文言を変えた場合は、URLも料金表になっているか必ず確認します。
ボタンを削除・元に戻す方法
内側のボタンだけを削除するときは、対象を選び、三点メニューから「削除」を選びます。複数ボタンをまとめて消すときは外側を選びます。青い枠の範囲を見て、必要なボタンまで消さないようにしてください。
誤って削除した直後は、編集画面上部の「元に戻す」を押します。保存後に気づいた場合は、リビジョンから以前の状態を比較できますが、ほかの修正も戻る可能性があります。まず直前の操作と下書き状態を確認します。
ボタンが押せない・違う場所へ行くとき
URLが保存されていない
入力後にEnterまたは確定操作をしていない可能性があります。リンク設定を再度開き、URLが表示されるか確認します。
編集画面で押している
編集画面では選択操作が優先されます。新しいタブのプレビューまたは公開ページでクリックを確認してください。
古いリンク先が開く
更新ボタンを押したか確認し、公開URLを再読み込みします。キャッシュの影響を切り分けるため、別ブラウザでも試します。
ボタンが画面からはみ出す
幅を初期値へ戻し、長い文言を短く具体的にします。独自CSSを一度に追加せず、ブロック設定から原因を切り分けます。
ボタンを作ることより、押した後を確認する方が大事だと分かりました。
文言とURLを一組にして見直せば、間違いを減らせそうです！
そのとおりです。
公開前にはボタンごとに文言、URL、開き方、スマホでの押しやすさを確認しましょう。
内部ページは同じタブを基本にして、外部ページだけ必要なら別タブにします。
間違えて消しても、すぐなら元に戻せるので落ち着いて作れそうです！
大丈夫ですよ。
読者が次の行動を理解できる、少数の分かりやすいボタンを目指してください。
WordPressをこれから始める方へ
ボタンブロックを使って記事を作るには、WordPressを動かす環境が必要です。これからサイトを新しく用意する方や、現在の管理環境を見直したい方は、WordPressの導入機能があるサーバーを候補にできます。すでに不満なく運用できている方は、この記事を理由に乗り換える必要はありません。
エックスサーバー
WordPressクイックスタートに対応し、契約とWordPress設定をまとめて進められます。料金、期間、キャンペーンの適用条件は公式ページで最新情報を確認してください。
エックスサーバーの公式ページを確認するまとめ
ボタンブロックは、読者の次の行動を分かりやすく示すリンクです。ボタンを追加して目的が伝わる文言を入力し、正しいURLを確定します。内部リンクは同じタブを基本にし、必要な外部ページだけ別タブを検討します。公開前には実際に押し、リンク先、スマホ幅、押しやすさを確認してください。
よくある質問
ボタンの文字だけ変えればリンク先も変わりますか？
変わりません。文言を変更したときは、リンク設定を開き、URLも目的と一致するか確認します。
ボタンは記事内に何個置いてもよいですか？
置けますが、多すぎると優先する行動が分かりません。節ごとの目的を決め、必要な場所だけに置きます。
外部リンクは必ず新しいタブですか？
必須ではありません。読者の作業を残す必要やサイトの方針を考え、別タブにする場合は移動先が分かる説明を添えます。