wordpress

スマホで見る時だけ電話番号リンクを有効にしたい。レスポンシブホームページ制作

スマホで見たときだけ電話番号リンク有効化したい

最近は夫婦ブロガーとしてブログ記事を書くことが多いのですが、個人的にホームページデザインだったりホームページ制作だったりの仕事を受注して作業しています。

本業ではしない仕事も個人で受注すればできるのが副業の面白いところですね。

 

ダイキチ
ダイキチ
おかげで普段知りえなかった知識や技術が身に付きます

 

さて、今回はレスポンシブホームページを作る際に欠かせない電話番号リンクのご紹介をします。スマホのときだけ指定の場所をタップするだけで電話を掛けることができるようになればホームページを見た人からの反響を得やすいのでオススメです。

ただ普通に設置するだけだとパソコンで表示されたときにもクリックで電話を掛けることになるので少し工夫が必要です。パソコンは非表示で、スマホは表示させたい。

そんなわがままをCSSだけで叶えることができます。

電話番号リンクはスマホで見たときだけ有効にしたい

HTML側ではアンカータグでtelを指定してあげます。

スマホホームページだけであるなら上記のタグで完結なのですが、何もしないままだとパソコンでもリンクが有効になってしまいます。

パソコン画面をクリックして電話を掛ける人なんていないので何かしないと訪問者にとって不親切なホームページになっちゃいますね。

 

なのでCSSでパソコンではアンカータグを無効にして、スマホでは有効にしちゃいましょう。スタイルシートにコピペで実装できるので簡単ですよー。

参考電話番号リンクをスマホで有効・PCで無効にする方法

参考レスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法

 

正確にはブラウザサイズが751px以下の場合は電話番号リンクが有効になります。751px以上の場合は電話番号リンクは無効になります。

見ている環境がスマホの場合と正確に判別できてるわけではないのでその点だけ把握しておく必要がありそうです。

 

ワードプレスならfunction.phpで電話リンクを無効にすることができる

コードが少し長くなりましたがやっていることはCSSと同じです。

パソコンでは電話番号リンクを無効にしてスマホでは有効にしています。ワードプレスの機能を使ってスマホかどうかをphpで判別して処理しています。

さすがワードプレス。すごいですねー。

 

ただ、タブレット端末で見た場合も「スマホで見た!」と判別されてしまうので、タブレット端末の場合も電話番号リンクが有効になります。

スマホだけ有効になれば楽なんですが難しいところですね。

 

 

まとめ

スマホサイトを作るにあたって電話番号リンクは必須な項目となります。決して避けては通れない作業になるんでやり方を覚えておく必要がありますね。

わたしはCSSで処理することもありますし、ワードプレス環境ならfunction.phpで処理することもあります。

ダイキチ
ダイキチ
クライアントの要望によって使い分ける感じですね

 

スマホの場合だけタップで電話をかけるという単純な作業ですが、対処法を知っている知らないでは提案できることも変わってくるので知っておいたほうが良いかもしれませんね。

 

この記事が誰かの参考になれば幸いです。

ダイキチでした!

 

ABOUT ME
ダイキチ(夫)
ダイキチ(夫)
ダイキチ(夫)です!
夫婦で1つのブログを運営しています。銀行にお金を預けているだけじゃもったいない!と感じ資産運用を始めました。IPO投資でお金を増やして株主優待をもらって節約も頑張っています。
資産運用でお金を貯めてサラリーマンを引退するのが夢。サラリーマンを引退するまでの軌跡をブログに残していきたいと思います。よろしくお願いします。

ダイキチのプロフィールダイキチが書いた過去の記事一覧

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です