リンクを全部ボタンにしていませんか

ページ内のリンクは、まず進んでほしい行き先をボタンで目立たせ、補足情報は文字のリンクで案内すると整理しやすくなります。必要なリンクを残しながら、目立ち方に差をつけてみましょう。

「料金も、よくある質問も見てほしい」と、全部を大きなボタンにしたくなることがあります。スマホで開くとボタンが次々に並び、どれを先に押してほしいのか迷う。そんなときは、リンクの役割を見直してみましょう。

表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。

この場所で、次に何をしてほしいか決める

例えば、個人向けの相談サービスの案内ページに、次の行き先があるとします。

・相談フォームを開く

・料金を確認する

・よくある質問を読む

どれも必要な情報ですが、ページの最後まで読んだ人へ一番案内したいのが相談フォームなら、そこを主なボタンにします。料金とよくある質問は、近くに文字のリンクとして残せます。

行き先を減らさず、相談フォームへの案内を一番目立つ形にした架空の例です。

目立つボタンを選ぶ前に、その場所まで読んだ人の目的を考えます。 まだ内容を比べている段階なら、いきなり相談を促すより、料金やサービス内容へ案内する方が自然な場合もあります。

「1ページにボタンは必ず1個」という決まりではありません。長いページの最後に同じ申込先をもう一度置くこともあります。まずは、ひとまとまりの案内の中で、同じ強さのボタンを並べすぎていないか見てください。

文章の途中では、文字のリンクが使える

文字のリンクは、押すと別のページや同じページ内の場所へ移動できる文章です。説明を読みながら追加の情報を確かめてもらうときに向いています。

例えば、本文に「相談時間と費用は、料金案内でご確認いただけます」と書き、「料金案内」の文字にリンクを設定します。前後の文章と一緒に、何のためのリンクか伝えられます。

一方、サービス内容を読んだあとの「相談フォームを開く」は、次の手順を案内する目立つボタンとして置く。このように、同じページでも置き場所によって使い分けられます。

説明を補うリンクは文章の近くに、次の手順への案内は説明のあとに配置しています。

文字リンクにすると見つからないか心配な場合は、サイトの見た目の土台になる「テーマ」で用意された、下線などの表示を生かしましょう。普通の文章と区別できないほど薄い色にしたり、リンクだと分かる下線を見た目だけの理由で消したりしない方が安心です。

利用条件やキャンセル方法など、判断に必要な案内も残してください。見た目をすっきりさせるために、読者が確かめたい行き先までなくす必要はありません。

WordPressでは、本文の一か所から直す

ここでは「相談フォームを開く」のボタンを残し、サービスの内容や料金へ進む「詳しく見る」のボタンを、文字リンクにする例で進めます。今日は、1ページの本文内にある1組だけで十分です。

始める前に、その部分の画面と、変えるボタンの文字・行き先URLを控えます。ブロックとは、段落や画像、ボタンなど、記事を組み立てる部品です。「同期パターン」など複数のページで共通の部品や、その中のブロックの場合や、共通の部品か判断できない場合は、ここでは編集を止めてください。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。全サイトのメニューやフォームの送信ボタンも今回の対象には含めません。

元のボタンを消す前に、戻し方も見ておきましょう。直前の操作は、画面左上の左向きに曲がった矢印「元に戻す」で取り消せます。間違ってほかのボタンまで消えたら、次の操作をせずにすぐ戻し、元の案内が残っているか確かめます。

以下は標準のブロックエディターの手順です。画面例はWordPress 7.1.2／Twenty Twenty-Fiveの下書きで確認しています。画面の「公開」は、今回の確認のために押しません。

手順1：元のボタンの文字とURLを控える

管理画面の「投稿」（固定ページなら「固定ページ」）から一覧を開き、対象の題名をクリックします。

本文をクリックし、右上の「設定」を開きます。右側に「投稿」または「固定ページ」と「ブロック」のタブがあり、「ブロック」を選ぶと「段落」など部品の名前が出ることが、この手順に近い画面の目安です。「テンプレート」など別の編集画面が出る場合や、この目安が見当たらない場合は、ここで止めて使用中のツールの案内を確認してください。

文字リンクへ変えたいボタンの文字をクリックします。近くに出る操作バーの鎖の形の「リンク」をクリックし、現在のURLを確認します。必要なら鉛筆の形の編集ボタンを押して「リンク」欄を開き、URLをメモにコピーします。変更せず「キャンセル」か枠の外をクリックして閉じます。

本文の操作バーは、選んだブロックの近く、または画面上部に出ます。WordPress全体の右上の三点メニューとは別です。

手順2：近くに「段落」を作り、案内を書く

ボタンの近くにある通常の本文をクリックし、その文章の末尾にカーソルを置いてEnterキーを1回押します。新しい段落に「サービスの内容や料金を、こちらからご覧いただけます。」と入力します。ご自分のページでは、行き先に合った文章にしてください。

段落になっているか迷ったら、右上の「設定」を開き、「ブロック」タブに「段落」と出るか確認します。実画面の「設定」は、左右に分かれた長方形のアイコンです。見出しやボタンの中に文章を入れてしまった場合は、「元に戻す」で戻って、通常の本文からやり直します。

手順3：文字を選び、URLを設定する

入力した文のうち「サービスの内容や料金」だけをドラッグして選びます。操作バーの鎖の形の「リンク」をクリックし、手順1で控えたURLを入力してEnterキーで確定します。文字を選んだ状態で、WindowsならCtrl＋K、MacならCommand＋Kでもリンク入力を開けます。

リンクを付けた文字をもう一度クリックし、鉛筆の編集ボタンを開きます。「テキスト」が選んだ言葉、「リンク」が目的のURLになっているか確認してください。直した場合は「適用」をクリックします。画面例のexample.comは説明用なので、実際には控えたご自分のURLを使います。

手順3：「テキスト」と「リンク」を確認する編集画面です。「適用」は右下。example.comは説明用URLです。検証環境はWordPress 7.1.2／Twenty Twenty-Five。

手順4：元のボタンを1個だけ削除する

文字リンクを先に作ると、行き先をなくす不安を減らせます。手順3の文字とURLを確認できたら、画面左上の三本線の「ドキュメント概観」をクリックし、「リストビュー」を開きます。ここには本文の部品が順に並びます。

一覧の「ボタン」の左にある小さな矢印をクリックし、内側の行を表示します。すでに見えていればそのままで大丈夫です。一段内側にある、消したいボタンの文言をクリックします。今回なら、元のボタンの文言「詳しく見る」の行です。外側の「ボタン」の行は、複数のボタンをまとめる部品なので選びません。親と子がどちらも「ボタン」と表示される場合もあるため、名前だけでなく、内側の文言の行を選んだか確認してください。

手順4：削除前の実画面です。「相談フォームを開く」と文字リンクを残し、内側の「詳しく見る」だけを選んでいます。WordPress 7.1.2／Twenty Twenty-Five。

選ぶ行を判断できない、削除が選べない場合は、元のボタンを残したままここで止めます。ロック解除は行いません。

選んだ文言の行の右端にある三点メニューを開き、メニュー下部の「削除」をクリックします。近くの「ロック」「非表示」は選びません。

手順4：同じ「詳しく見る」のメニュー下部を撮影した実画面の切り抜きです。「削除」の位置を確認します。

消えるのがその1個だけかを確認し、主な案内と文字リンクが残っているか見ます。

手順4：削除後、文字リンクと「相談フォームを開く」だけが残った同じ下書きの編集画面です。次の手順5でプレビューを開き、ページでの見え方を確かめます。

手順5：プレビューで、残したボタンと文字リンクを確認する

右上のモニター形の「表示」のメニューから「新しいタブでプレビュー」を開きます。残すボタンと文字リンクが両方あるか、文字リンクを押すと予定したページが開くかを確認します。元のボタンが消えても同じ行き先へ進めれば、案内を残せています。

編集画面に戻り、「表示」→「モバイル」でも幅を確かめます。お使いの画面が「プレビュー」という名前なら、そのメニューを確認してください。まだ公開・更新せず、続けて下の確認項目を見てみましょう。

「表示」で確認に使うのは「モバイル」「新しいタブでプレビュー」だけです。確認後は「デスクトップ」へ戻してから設定を編集します。「レスポンシブスタイル」「テンプレートを表示」や、ほかの設定は一緒に変更しません。

ボタンを新しく増やす必要はありません。主な案内として今あるボタンを残し、補足の1個を変えるところまでを今回の作業にします。

見た目がボタンでも、中身はリンクの場合がある

ここでいう「ボタン」は、ページ内で目立たせる見た目の話です。WordPressのボタンブロックにURLを設定して別のページへ案内するものは、通常はリンクとして作られます。

フォームを送信したり、画面内の操作を実行したりするボタンとは、仕組みが異なります。「相談フォームを開く」と「相談内容を送信する」を混同しないようにしましょう。

標準の段落やボタンのブロックを使い、画像だけの独自ボタンで置き換えるのは避けます。フォームの送信ボタンは、今回の整理では触らなくて大丈夫です。

スマホで押しやすさと行き先を確かめる

変更後はプレビューを開き、可能なら実際のスマートフォンでも確認します。拡大しない普段の大きさで、次の点を見てください。

・主な案内が、ほかのリンクに埋もれていないか

・ボタンの文字が欠けたり、画面からはみ出したりしないか

・文字リンクが普通の文章と区別できるか

・隣のリンクを誤って押しそうなほど近くないか

・それぞれ、予定したページが開くか

リンク同士が近い場合は、補足の案内を別の段落に分ける方法もあります。ボタンを横一列に収めようとして、文字を小さくする必要はありません。

パソコンでは、Tabキーでリンクを順に移動できるか、選ばれている場所に枠などの目印が出るかも見てみましょう。通常のページへのリンクは、選ばれた状態でEnterキーを押すと開けます。移動できない、現在地が分からない場合は、テーマ側の確認が必要なことがあります。

枠などの目印を「フォーカス表示」といいます。図は選択中の目印を説明するための表示例です。実際の形や色はサイトによって異なります。

フォームの行き先を確かめるだけなら、入力画面が開くところまでにします。テストのつもりで実際の予約や送信を確定しないようにしてください。

問題がなければ、公開済みのページは右上の「保存」または「更新」で反映します。下書きなら「下書き保存」までにします。公開済みのページはスマートフォンで開き直し、押しやすさと行き先をもう一度確認してください。

戻せる状態で、一か所ずつ進める

保存・更新前に意図しない表示になったら、冒頭で確認した「元に戻す」で取り消し、元の案内がそろっているかプレビューで確かめましょう。

更新後は、控えた文章やURLをもとに戻すか、「リビジョン」で以前の本文を確認します。リビジョンは保存履歴で、使えるかどうかや保存数はサイトの設定次第です。過去の版を丸ごと復元すると、ほかの新しい編集も置き換わるため、必要な箇所だけ戻せないか先に見てください。

メニューや共通の案内欄まで変わりそうなとき、変更がほかのページに影響すると表示されたときは、そこで止めて構いません。まずは、そのページだけの本文にある案内から進めましょう。

最初の見直しは、必要な行き先を残したまま、主な案内をひとつ選ぶこと。 押してほしい場所と、読む人が確かめたい情報の両方を大切にしてみてください。

リンクやボタンの整理に迷う場合は、該当ページのURLと画面を添えて、ココナラ内のメッセージからご相談ください🌿 画面にパスワードやお客さまの個人情報が写らないようにしてください。