ブログ内に電話番号のセットの仕方、タップしたら電話がかかるようにするには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。



アメブロ読者の方から、このようなご質問いただきました。


電話番号のセットの仕方を教えてください。
どうやったら、クリックでかけられるようになるのでしょうか?


お店ブログをされている方は、ブログ内に掲載している電話番号からそのまま電話をかけることができると便利だったりしますよね。

ですので、その方法を教えてほしい・・・と。

そこで、アメブロメッセージで次のように返信しました。


電話番号ですが、
<a href="tel:090xxxxxxxx">090-xxxx-xxxx</a>
このタグで、クリックできるようになると思います。


すると、

不適切な表現なので、表示されない・・・と、赤字で なんでなんでしょう。


・・・と。


あ、アメブロメッセージで電話番号についてはNGでしたね^^;

ですので、記事にてご回答いたします。


ところで、「クリックしたら・・・」と書かれていますが、

パソコンのブログではクリックしても何も起こりません。(おおげさなエラーが出るブラウザもありますが)
そう、ケータイやスマートフォンからタップするとそのまま発信することができるのです。


その方法は、次のHTMLタグを使います。

電話をかける 【a href="tel:電話番号"】


HTMLタグ表示で、次のタグを書いてください。

<a href="tel:090xxxxyyyy">090-xxxx-yyyy</a>


・標準エディタの方・・・画面左下の「HTMLタグを表示」タブを選択して、切り替えてから書きます。

・タグ編集エディタの方・・・そのまま書きます。

・新エディタの方・・・画面左上の「HTML表示」を選択して、切り替えてから書きます。


半角英数で

<a href="

の後に、

半角で「t」「e」「l」「:(コロン)」を入力し、

<a href="tel:090xxxxyyyy">090-xxxx-yyyy</a>

赤字の部分にはご自身の電話番号をハイフンなしで半角で書きます。


<a href="tel:090xxxxyyyy">090-xxxx-yyyy</a>

緑字の部分は記事上で表示される文字になります。
もちろん、電話番号以外の文字でもかまいません。

たとえば、

<a href="tel:090xxxxyyyy">電話はこちら</a>

としてもよいです。


実際に、スマホで電話番号タップしてみると、このようにスムーズに電話ができるようになります。

川上雄大のワンポイントレッスン!





以上、アメブロ便利技でした。


LIDS札幌・ライフデザインスクール
川上 雄大