スマートフォンで、リンクや画像を押して電話をかけるHTMLタグの設定

  • 2018年1月17日
  • 2024年8月19日
  • HTML
  • 11631view

スマートフォンで、リンクや画像を押して電話をかけるHTMLタグの設定です。

ホームページを見て、お問い合わせをしたいとき、この対応をしていないと、電話をかけるほうが面倒です。

 

例えば,0120-00000-00000に書けたい場合(サンプルなので、わざとかからないようにしています)

<a href="tel:01200000000000">電話はこちらへ</a>

とリンクをつけるイメージでやります。

tel:のあとに、必要な電話番号を入力してください。

電話はこちらへ

注:電話番号が正しくないため、動作しません。
こうすると、タップを押すと電話をかけることができます。

 

では、お問い合わせの画像はどうしたらいいのでしょうか。

 

こういうものですね。下記の画像をクリックすると、電話がかかります(本当の電話番号ではないので、実際はかかりませんが。)

これも簡単です。aタグとimgタグの組み合わせですね。

このように挟んであげます。

<a href="tel:01200000000000"><img src="画像パス"></a>

でできるようになります。

画像をクリックして電話をかける方法の詳細

上記の方法で、電話番号リンクと画像リンクの設定について説明しましたが、もう少し詳しく設定方法を見ていきましょう。

1. リンク先が正しいことを確認する

tel:リンクの設定では、電話番号のフォーマットが重要です。特に、数字の間にハイフンやスペースを入れず、連続した数字のみを入力するようにしましょう。例えば、電話番号が「0120-000-000」の場合、以下のように設定します。

<a href="tel:0120000000">電話をかける</a>

このように設定すれば、スマートフォンでリンクをタップするだけで電話をかけることができます。

2. 画像リンクを正しく設定する

画像をクリックして電話をかける場合も、同様にtel:リンクを使いますが、<a>タグ内に<img>タグを埋め込む形になります。画像のパス(URL)を正確に指定しないと、画像が表示されないか、別の画像が表示される可能性がありますので、正確に設定しましょう。

<a href="tel:0120000000"> <img src="your-image-path.jpg" alt="電話をかけるボタン"> </a>

ここで、alt属性は画像が表示されない場合に代わりに表示されるテキストです。SEO効果もあり、視覚障害者向けのスクリーンリーダーでも読み上げられるため、適切な説明を入力することが推奨されます。

最後に

このように、スマートフォンユーザーにとって便利な電話リンクや画像リンクの設定は、ちょっとした工夫で簡単に実装できます。ユーザーの利便性を考慮し、ぜひ試してみてください。

最新情報をチェックしよう!
>メールマガジン登録特典" width="640" height="454" >

メールマガジン登録特典

有料級のAI活用や自動化に関する様々なレポートをダウンロードできます

CTR IMG