画像圧縮プラグイン『EWWW Image Optimizer』の一番簡単な設定方法
kanri
空創デザインオフィス
【簡単】ホームページに電話番号を載せる場合の載せ方・リンク設置方法
kanri
本記事はこんな方にオススメです
- ホームページに電話番号を記載したい方
- ホームページに電話番号のリンクを貼る方法を知りたい方
- ホームページに電話番号を載せるか迷っているor載せたくないという方
今回は、ホームページに電話番号を載せる場合の載せ方として
- 載せる場所
- リンク設置方法（スマホの場合のみ）
について解説いたします。
応用編として、スマホ版だけに電話番号のリンクを設置する方法や、電話アイコンを表示する方法も解説しています。
Contents
ホームページに電話番号を載せる場合の載せ方
ホームページに電話番号を載せる場合の「載せる場所」と「リンク設置方法」について解説いたします。
ホームページに電話番号を載せる場合の載せ方：載せる場所
電話番号を載せる場所は、基本的には
- ヘッダー（一番上）
- フッター（一番下）
- 運営者情報や会社概要ページ
の３ヶ所です。
お問い合わせフォームがある場合、返信メールの署名欄にも電話番号を記載します。
ホームページに電話番号を載せる場合の載せ方：リンク設置方法
スマホの場合は、電話番号にリンクを設置してあげると、ユーザーにとってより親切なホームページになります。（タップするとそのまま電話がかけられる）
HTMLコードの書き方は以下のとおりです。
1<a href="tel:000-0000-0000">TEL:000-0000-0000</a>
パソコン版のホームページには電話番号のリンクは不要です
ここからは中級者向けの内容となりますが、CSSを使ってカスタマイズする方法を２つご紹介いたします。
【応用編1】スマホ版だけリンクを表示させたい場合
レスポンシブウェブデザイン※の場合で、スマホ版だけリンクを表示させたい場合は、CSSで設定します。
パソコン版のCSSに、以下を追加します。
1a[href*="tel:"] {
2pointer-events: none;
3cursor: default;
4text-decoration: none;
5}
【応用編2】電話のアイコンを使う場合
下図のように電話のアイコンを使いたい場合、２つの指定方法があります。
《backgroundで電話アイコンを指定する方法》
1a {
2background: url("img/tel.png") left center no-repeat;
3padding-left: 50px; /* アイコンの分の余白 */
4}
「background」に電話アイコンを指定し、「padding-left」でアイコンの分の余白を空けます。
《::beforeで電話アイコンを指定する方法》
1a {
2position: relative;
3padding-left: 50px; /* アイコンの分の余白 */
4}
5a::before {
6position: absolute;
7content: url("img/tel.png") ; /* アイコン画像 */
8top: 0; /* アイコンの位置 */
9left: 0; /* アイコンの位置 */
10}
こちらは、CSSの擬似クラス「::before」を利用する方法です。
アイコンは「content」で指定します。
aを基準（position:relative）として、アイコンの位置を決めることができます。（topとleftで指定）
ちなみに、CSS3ではbeforeの「:」は２つです。
電話アイコン画像は、フリー素材サイトで探すのがおすすめです。おすすめのフリー素材サイトについては、下記記事をあわせてご覧ください。
あわせて読みたい
【厳選6選】ホームページにおすすめのフリー（無料）素材サイト
電話番号以外のリンクの貼り方は、下記記事をご参照ください。
あわせて読みたい
【コピペOK】ホームページにリンクを貼る方法（別画面・ページ内・ボタン等）
（補足）ホームページに電話番号を載せないのもアリ
ホームページに電話番号を記載することは必須ではありません。
運営者情報にはメールアドレスなど電話以外の連絡手段を記載しても良いからです。
特に個人の場合は、インターネット上に電話番号はあまり載せたくないですよね。
ホームページに電話番号を記載しない場合は、その代わりに、メールアドレスの記載やお問い合わせフォームを設置することをおすすめします。
あわせて読みたい
ホームページにメールアドレスのリンクを貼る方法＆スパム対策3選
あわせて読みたい
ホームページにお問い合わせフォームを設置する方法【4選】
ただ、ネットショップなど特定商取引の記載が必要なホームページの場合、基本的には電話番号は記載しておいたほうが良いです。（一応省略も可能なようです ※下記参照）
特定商取引法に基づき広告に表示することとされている住所及び電話番号は、事業を行う上で、トラブルが生じた場合や消費者から問合せがある場合の対応等に備えるためのものです。
そのため、「住所」については現に活動している住所、「電話番号」については確実に連絡が取れる番号を表示する必要がありますが、消費者からの請求によって、広告表示事項を記載した書面又は電子メール等を「遅滞なく」提供することを広告に表示し、かつ、実際に請求があった場合に「遅滞なく」提供できるような措置を講じている場合には、事業者の住所及び電話番号の表示を省略することも可能です。なお、ここでいう「遅滞なく」提供されることとは、販売方法等の取引実態に即して、申込みの意思決定に先立って十分な時間的余裕をもって提供されることをいいます。
通信販売広告Q＆A｜特定商取引法ガイド（https://www.no-trouble.caa.go.jp/qa/advertising.html）
電話番号を検索に引っ掛けたくない場合は、電話番号を画像にするという方法もあります。
個人事業主の場合、可能なら、プライベートの電話番号とは別に、事業用の電話番号を取得するのがベストです
（補足）iPhoneの電話番号自動リンクを無効化する方法
iPhoneやiPadのSafariでは、電話番号に勝手にリンクが付いてしまいます。
この自動リンクは便利ではあるのですが、FAX番号など意図しないところにもリンクが付いてしまうので、＜head＞内に下記を追記して無効化するのがおすすめです。
1<meta name="format-detection" content="telephone=no">まとめ：電話番号をユーザーにとってわかりやすく記載しよう
ホームページに電話番号を載せる場合の場所
- ヘッダー（一番上）
- フッター（一番下）
- 運営者情報や会社概要ページ
ホームページに電話番号のリンクを設置する場合は、以下のように記載します。（スマホの場合のみ）
1<a href="tel:000-0000-0000">TEL:000-0000-0000</a>ホームページには電話番号を記載しないのもアリですが、記載する場合はユーザーにとってわかりやすく記載したいですよね。
上記では、文字の色を変える方法、スマホ版だけにリンクを設置する方法、電話アイコンを表示する方法についてもご紹介しました。
電話番号をわかりやすく記載するだけで利益が上がる可能性もあります。
空創デザインオフィスでは、ホームページ新規作成・リニューアル、ご自身でホームページを作成したい方へのサポートなども承っております。
下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
