電話番号やメールへのリンクを作成する方法

サイト作成に役立つツール・素材・HTML・CSS
nafets / Pixabay

今回は電話番号やメールアドレスをリンクにして、スマートフォン等からクリックすると電話がかけられたり、メールを送るようにできるリンクの作成方法を解説していきます。

特に自分のお店のホームページを作成する時に役に立ちます。これはスマートフォン等のモバイル端末用なので、パソコンからクリックしても何も起こりません。

それとアメブロの場合はHTMLタグを表示を選択して入力する事が必須です。ブログを書く画面の上部もしくは下に「HTMLを表示」というのがあります。

HTML編集

これだけ注意しておけばOK。それでは早速説明していきます。

電話番号にリンクを貼る方法

電話番号を発信するリンクするには次のコードを入れます。番号は書き換えて利用して下さい。

<a href="tel:0901234567">090-1234-567</a>

するとこのように表示されてリンクが貼られます。

090-1234-567

解説しておくと、「tel:」の後にリンクしたい電話番号を入れます(ハイフンなし)。その後に表示したいテキストを入力(この例の場合はハイフン付きの電話番号)。

例えばテキスト部分を「電話かける」と書き換えてもOKです。

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

するとこんな表示になって、スマートフォンからクリックすると電話がかけられるようになります。

電話をかける

メールアドレスリンクを貼る方法

全く同じ要領でメールアドレスにリンクさせる事ができます。

<a href="mailto:メールアドレス">表示したいテキスト</a>

先ほどの電話番号へのリンクと全く同じで「tel:」と「mailto:」が違うだけ。つまり、電話の場合は「tel」、メールの場合は「mailto」という具合に使う事ができます。

以上電話番号やメールへのリンクの貼り方です。最近知り合いのお店のページを作る依頼が来て初めて使ったので忘れないようにメモ。

コメント

タイトルとURLをコピーしました