SWELLを使ったサイトに、タップすると電話をかけられる電話番号リンクを設置したいと感じている方も多いでしょう。専門的なコードを覚えなくても、リンク先へ「tel:」と電話番号を入力すれば、本文やボタンに電話発信の導線を作れます。
ただし、画面に表示する電話番号とリンク先へ入力する値を混同したり、リンク確定の操作を忘れたりすると、文字が青くなっていても正しく発信できない場合があります。パソコンの編集画面だけで判断せず、公開前に実際のスマートフォンで動作を確かめることが大切です。
この記事では、SWELLの投稿本文、SWELLボタン、ヘッダーやフッターへ電話番号リンクを設置する基本手順を整理します。個人・小規模サイトで電話対応を無理なく続けるための表示方法や、うまく動かないときの確認順も紹介するため、ご自身のサイトに合う方法から試してみてください。
SWELLの電話番号リンクはtel形式で設定する
最初に押さえたいのは、SWELL独自の複雑なコードではなく、リンク先へ「tel:電話番号」を指定するという基本です。表示する文字、実際に発信される番号、設置場所を分けて考えると、初心者でも設定内容を整理しやすくなります。
リンク先にはtel:電話番号を入力する
電話番号をタップして発信画面を開くリンクは、通常のウェブページへ移動するURLの代わりに「tel:」から始まる値を設定します。例えば電話番号が「03-1234-5678」であれば、リンク先には「tel:0312345678」または「tel:03-1234-5678」のように入力します。
画面上に見せる文字は、リンク先の値と同じである必要はありません。「03-1234-5678」「電話で相談する」「営業時間内に電話する」など、利用者が操作後の結果を理解できる文言にできます。ただし「お問い合わせ」だけでは電話が始まることが伝わりにくいため、電話発信であることを明記すると親切です。
リンクを押すと、対応端末では電話アプリや発信確認画面が開きます。クリックしただけで必ず通話が開始されるとは限らず、端末、ブラウザー、利用中のアプリによって動作が異なる点も覚えておくとよいでしょう。
表示用の番号と発信用の番号を分けて考える
電話番号リンクでは、読者が目にする表示文字と、リンク先へ渡す発信用の値が別々に存在します。表示側には読みやすいようハイフンを入れ、発信用の値は余分な文字を含めずに登録すると、設定ミスを見つけやすくなります。
例えば表示を「受付電話 03-1234-5678」とし、リンク先を「tel:0312345678」にする方法があります。「受付電話」までリンク先へ入力するのではなく、発信に使う番号だけをtel形式で指定してください。全角数字、全角コロン、不要な空白が混じると正しく認識されない可能性があります。
海外からの電話も想定するサイトでは国番号を含む形式が必要になる場合があります。国内向けサイトであっても、海外利用者を主な対象にする場合は、通信事業者や利用端末の案内を確認し、想定する環境でテストすると安心です。
パソコンとスマートフォンでは動作が異なる
スマートフォンでは電話番号リンクを押すと、電話アプリまたは発信確認画面が開くことが一般的です。一方、パソコンでは通話対応アプリの選択画面が出たり、何も起きないように見えたりする場合があります。そのため、パソコンだけで「設定が失敗した」と判断しないようにしましょう。
具体的には、編集後にスマートフォンで公開ページを開き、リンクをタップして、意図した電話番号が発信画面に表示されるか確認します。家族やスタッフの端末でも試せる場合は、iPhoneとAndroidなど異なる環境で確かめると不具合に気づきやすくなります。
法人の場合は社内端末、代表番号、営業時間外の転送設定も含めて動作確認が必要です。個人・小規模の場合は、私用番号を公開して問題がないか、対応可能な時間帯を明示できるかを先に検討するとよいでしょう。
表示文字には、電話番号や「電話をかける」など目的が伝わる文言を使います。
公開前にはパソコンだけでなく、実際のスマートフォンで発信先を確認してください。
例えば「平日10時から16時まで電話受付」と表示し、その直下へ「03-1234-5678に電話する」というリンクを置きます。番号だけを大きく見せるより、受付時間と操作後の動作が一緒にわかるため、利用者が安心してタップしやすくなります。
- リンク先は「tel:電話番号」の形式で入力します。
- 表示文字と発信用の値は別々に設定できます。
- 全角文字や不要な空白が入っていないか確認します。
- 実際のスマートフォンで発信番号をテストします。
本文とSWELLボタンに電話番号リンクを付ける手順
基本形式がわかったところで、次は投稿や固定ページへ設置する方法を見ていきましょう。文章中の電話番号にリンクを付ける方法と、SWELLボタンを使う方法では見え方が異なるため、ページ内での役割に合わせて選ぶと整理しやすくなります。
文章中の電話番号へリンクを設定する
投稿または固定ページの編集画面を開き、電話番号や「電話で問い合わせる」などの文字を入力します。リンクにしたい文字を選択し、ブロックツールバーのリンクボタンを押したら、入力欄へ「tel:0312345678」のように設定します。
入力しただけではリンクが確定しないことがあるため、Enterキー、送信アイコン、適用ボタンなど、使用中のWordPress画面に表示される確定操作まで行ってください。その後、プレビューで文字がリンクとして扱われているかを確認します。
文章中のリンクは、アクセス情報、会社概要、店舗案内、予約方法など、説明を読みながら電話をかけてほしい場所に向いています。一つのページに同じ番号を何度も置くと画面が落ち着かなくなるため、読者が判断しやすい位置へ絞るとよいでしょう。
SWELLボタンのリンク先に電話番号を設定する
電話での問い合わせを目立たせたい場合は、SWELLボタンブロックを使う方法があります。編集画面でブロック追加を開き、SWELLボタンを挿入して、ボタンの文字を「電話で予約する」「営業時間内に電話する」など具体的な表現へ変更します。
ボタンのリンク先には、文章リンクと同様に「tel:電話番号」を設定します。ボタンの色はサイト全体の配色に合わせ、背景色と文字色の差が小さくならないようにしてください。装飾を増やしすぎるより、電話ボタンであることが一目で伝わる設計が使いやすさにつながります。
電話アイコンを付ける場合も、アイコンだけに意味を任せないほうが安心です。「電話する」という文字を併記すれば、アイコンの意味がわからない方や音声読み上げを利用する方にも目的が伝わりやすくなります。
画像に電話番号リンクを設定する
バナー画像や電話案内の画像をタップできるようにする場合は、画像ブロックを選択し、リンク設定へtel形式の番号を登録します。画像内に電話番号を描くだけではリンクにならないため、画像そのものへリンク先を付ける操作が必要です。
ただし、電話番号を画像だけで伝えると、文字の拡大、コピー、音声読み上げなどを利用する方に情報が届きにくくなります。画像の近くへテキストの電話番号や受付時間も掲載し、画像が表示されない場合でも連絡先がわかる状態にしておくとよいでしょう。
スマートフォンでは画像が画面幅に合わせて縮小されるため、画像内の文字が小さくなる場合があります。公開ページで実寸を確認し、タップ範囲が狭すぎないか、別のリンクと近すぎないかも確かめてください。
| 設置方法 | 向いている場所 | 注意点 |
|---|---|---|
| 文章リンク | アクセス案内、会社概要、説明文 | 電話発信であることを文字で示す |
| SWELLボタン | 予約、相談、問い合わせの主要導線 | 色や装飾を増やしすぎない |
| 画像リンク | 案内バナー、視覚的な誘導 | 近くにテキスト情報も掲載する |
具体例として、サービス紹介ページの説明文末に「内容を確認してから相談したい方は、平日10時から16時まで電話を受け付けています」と書き、その直後へSWELLボタンを置きます。ボタン文言を「03-1234-5678へ電話する」にすれば、番号と動作を同時に伝えられます。
- 文章リンクは説明の流れを保ちながら設置できます。
- 主要な問い合わせ導線にはSWELLボタンが便利です。
- リンク入力後は確定操作まで完了させます。
- 画像リンクだけに電話番号の情報を依存させないようにします。
ヘッダーやフッターへ電話番号リンクを設置する方法
本文やボタンへの設定を押さえたら、今度は複数ページで共通表示する導線を考えます。ヘッダーやフッターはサイト全体から見つけやすい一方、端末ごとの表示やメニュー構成に影響するため、設置後の確認が欠かせません。
カスタムリンクを使ってメニューへ追加する
WordPressのメニュー編集画面を利用できる場合は、カスタムリンクのURL欄へ「tel:0312345678」を入力し、リンク文字列へ「電話 03-1234-5678」などを設定します。作成した項目をメニューへ追加し、表示したい位置へ並べて保存します。
使用中のWordPressやSWELLの設定によって、メニューの場所や管理画面の名称が異なる場合があります。従来型のメニュー画面が見当たらないときは、外観、カスタマイズ、ナビゲーション、ウィジェットなど、現在の管理画面に表示されている項目を確認してください。
メニュー内の電話番号は全ページに表示されやすいため、電話受付を主要な窓口にしている店舗や事業サイトに向いています。一方、電話対応を限定しているサイトでは、目立つ位置へ常設すると対応負担が増えることもあるため、問い合わせフォームとの役割分担を決めておきましょう。
ヘッダー用ブログパーツを活用する
SWELLでは、ブログパーツで作成したボタンや案内を所定の表示位置から呼び出すカスタマイズが紹介されることがあります。電話番号、受付時間、問い合わせボタンをひとまとまりにしやすいため、店舗やサロンなど、連絡導線をヘッダーへ集約したい場合に便利です。
ただし、ブログパーツをヘッダーへ表示する具体的な方法は、SWELLのバージョン、サイトの設定、追加したコードによって変わります。公式マニュアルで利用可能な表示エリアを確認し、コードを追加する場合は子テーマやバックアップを用意してから作業してください。
初心者の方は、最初から複雑なヘッダー改修を目指さず、本文またはメニューのカスタムリンクから始めるとよいでしょう。更新後の保守まで自分で扱える範囲にとどめると、テーマ更新時のトラブルを減らしやすくなります。
フッターとスマートフォン固定メニューを検討する
フッターは、ページを読み終えた利用者が次の行動を選ぶ場所として使えます。電話番号だけでなく、受付時間、休業日、問い合わせフォームへのリンクをまとめれば、電話以外の連絡方法も提示できます。
スマートフォン画面に固定表示するボタンは見つけやすい反面、本文を隠したり、誤タップを招いたりする場合があります。固定メニューへ電話リンクを置くときは、実際の端末でスクロールし、画面を圧迫していないか、Cookie通知や別の固定ボタンと重なっていないか確認してください。
法人の場合は、部署別番号や複数拠点の番号を一つの固定ボタンへ集約しないほうがわかりやすいことがあります。個人・小規模の場合は、電話に出られない時間が多いなら、固定電話ボタンより問い合わせフォームを優先する選択肢もあります。
ヘッダーは見つけやすさ、フッターは詳しい案内、固定メニューは即時性に向いています。
複雑なカスタマイズでは、テーマ更新後の保守方法も確認してください。
よくある質問として、「パソコンでも電話リンクを表示してよいですか」という疑問があります。表示しても問題ありませんが、パソコンでは通話アプリの選択画面が出るなど、スマートフォンと異なる動作になる場合があります。受付時間や問い合わせフォームも併記すると利用者が選びやすくなります。
もう一つは、「複数の電話番号をメニューに入れてよいですか」という疑問です。掲載自体はできますが、代表、予約、採用など用途を明記しないと選びにくくなります。番号ごとの目的と受付時間を短く添え、情報が多い場合は連絡先ページへまとめるとよいでしょう。
- メニューのカスタムリンクにもtel形式を設定できます。
- ヘッダーへ常設する前に電話対応の運用を決めます。
- 固定ボタンが本文や通知と重ならないか確認します。
- 複数番号がある場合は用途を明記します。
電話番号リンクが動かないときの確認ポイント
設置場所を決めても、リンクが確定していなかったり、別の設定が干渉したりすると発信画面が開かないことがあります。原因を一度に探そうとせず、入力形式、公開状態、端末、キャッシュの順に切り分けると確認しやすくなります。
telの綴りと記号を確認する
最初に、リンク先が半角文字で「tel:電話番号」になっているか確認します。「tell:」「tel：」のような綴り違いや全角コロン、telと番号の間の不要な空白があると、電話番号リンクとして処理されない可能性があります。
コピーした電話番号には、見えにくい空白や装飾文字が含まれることもあります。うまく動かないときは、一度リンクを削除し、半角数字で「tel:0312345678」のように入力し直してみてください。表示側の電話番号にはハイフンを使っても、リンク先は数字中心にすると確認が簡単です。
内線番号や特殊な発信操作を自動化する形式は、端末によって対応が異なります。代表番号から音声案内を利用する場合は、まず代表番号だけをリンクし、内線番号は画面上の説明文として案内するほうが安定しやすいでしょう。
リンクの確定と公開状態を確認する
リンク入力欄へtel形式を記入しても、Enterキーや適用ボタンを押していなければ保存されない場合があります。該当文字をもう一度選択し、リンク先が表示されるかを確認してください。リンク先が空欄なら、入力後の確定操作が完了していません。
編集画面のプレビューと公開ページでは、キャッシュや公開状態によって見え方が変わることがあります。下書きのままでは一般の閲覧者が確認できず、更新ボタンを押していなければ古い内容が表示されます。公開後にシークレットウィンドウやログアウト状態でも確認するとよいでしょう。
サイトへキャッシュ機能や高速化プラグインを導入している場合は、更新内容がすぐ反映されないことがあります。設定を変更する前に、ページキャッシュとブラウザーキャッシュを整理し、再読み込みしてから判断してください。
スマートフォンの実機で発信先を確認する
電話番号リンクの最終確認は、公開ページをスマートフォンで開いて行います。ボタンまたは文字をタップし、発信確認画面に表示された番号が正しいかを見てください。実際に通話を成立させなくても、発信先の番号まで確認すれば入力ミスを見つけられます。
SNSアプリや検索アプリの内部ブラウザーでは、標準ブラウザーと挙動が異なる場合があります。内部ブラウザーで動かないときは、SafariやChromeなど端末の標準的なブラウザーでも試し、特定のアプリだけで起きる問題かを切り分けましょう。
リンクが小さい、別のボタンと近い、画面端へ寄りすぎていると、機能していても利用しにくくなります。家族やスタッフなど第三者に操作してもらい、電話ボタンだとすぐ理解できるか、押し間違えないかを確認する方法も役立ちます。
電話受付の表示内容と安全面を見直す
電話番号リンクが動作しても、受付時間や通話料の案内がないと、利用者が電話をかけてよいか迷う場合があります。「平日10時から16時」「通話料は利用者負担」など、必要な条件をリンクの近くへ簡潔に表示してください。
個人の携帯電話番号を公開すると、営業時間外の着信や営業電話が増える可能性があります。事業用番号、転送サービス、問い合わせフォームなどを比較し、公開後も無理なく管理できる連絡手段を選ぶことが大切です。
番号を変更したときは、本文、ヘッダー、フッター、ブログパーツ、構造化された会社情報など、複数の場所に古い番号が残ることがあります。サイト内検索や管理メモを使い、掲載場所を一覧にして更新漏れを防ぐとよいでしょう。
| 症状 | 主な確認項目 | 対応例 |
|---|---|---|
| リンクにならない | 入力後の確定操作 | リンクを削除して再設定する |
| タップしても反応しない | telの綴り、全角記号、端末 | 半角のtel:と数字で試す |
| 古い番号が表示される | キャッシュ、複数の掲載場所 | キャッシュ削除とサイト内確認を行う |
| 押しにくい | ボタンサイズ、余白、重なり | 実機で配置を調整する |
例えば電話ボタンが反応しない場合は、「リンク先をtel:0312345678へ入れ直す」「更新を押す」「キャッシュを削除する」「スマートフォンの標準ブラウザーで開く」の順に試します。一つずつ確認すれば、入力ミスなのか表示環境の問題なのかを整理できます。
- telの綴りとコロンを半角で入力します。
- リンクの確定操作とページの更新を確認します。
- キャッシュを整理して公開ページを再読み込みします。
- スマートフォンの標準ブラウザーで発信先を確認します。
- 受付時間や番号変更時の運用も整えます。
まとめ
SWELLの電話番号リンクは、リンク先へ「tel:電話番号」を設定すれば、文章、ボタン、画像、メニューなどに設置できます。
まずは固定ページや投稿内の電話番号を選択し、「tel:0312345678」のようなリンクを設定して、スマートフォンで発信先を確認してみてください。
電話を目立たせることだけでなく、受付時間や別の問い合わせ方法も添えると、利用者にも運営側にも無理のない連絡導線を作りやすくなります。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
