ブログでお店や施設の紹介をする時に、電話番号を載せることってありますよね。
お店の紹介記事に載せる『電話番号をクリックすると電話がかかる』ように設定しておくと、読者の方が電話番号をいちいちメモにとらなくてもそのまま電話がかけられるので便利です。
クリックで電話番号がかかるようにする設定方法についてはコチラ↓の記事にくわしく紹介しています。
でも、普通に電話番号リンクを設定しただけだとＰＣからでもクリックできる状態なんです。
これでは『読者の方に親切なサイト』とは言えませんよね。
だってＰＣからは電話はかけられませんからね。
【ブログ小技】クリックで電話番号を発信する設定をPCからは無効にする方法
WordPressで電話番号をクリックすると電話をかけられるけど、ＰＣからはクリックできないようにする方法は何種類かありますが、１番簡単で、わたしが実際に設定してきちんと動作が確認できた方法を紹介します。
PCからは電話番号リンクを無効にした方がいい理由とは
先ほどもお話しましたが、ただ電話番号リンクを貼っただけだと、PCからも電話番号リンクがクリックできちゃう状態なんです。
もちろんPCからは電話をかけることができません。
でもクリックすると・・・
＜＜＜発信中・・・＞＞＞
じつはわたし、ＰＣから誤クリックで電話番号リンクをクリックしたことがあるんですけど、『発信中・・・』ってなってめちゃくちゃ驚きました。
『え！？発信中ってなってるけど、電話できるの！？』
『切り方がわからない！！』
『お金かかってたらどうしよう！？』
などなどパニックになりました・・・。
結果は、発信中と出ただけでどこにも繋がっていなかったし、もちろん料金も発生していません。
しかし、心の負担があまりにも大きいのでね、不必要なクリックはなくすようにするべきです。
電話番号のリンクをPCからは無効にする方法
CSSを使ってPCからのクリックを無効にする方法
CSSの設定で電話番号リンクをPCからは無効にする方法です。
CSSだけで設定できるので、WordPress初心者の方でも書いている通りに作業すればOK。
まずはWordPressの子テーマを開きます。
@media (min-width: 751px) {
a[href*=”tel:”] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
※入力ミス防止のため、コピペで張り付けることをオススメします
CSSにコードを追加したら【公開】を忘れずにクリックしましょう。
押し忘れると反映されません。
これでCSSでPCからのクリックを無効にする設定が完了です！
わたしもCSSを使ってPCからのクリックを無効にする設定をしましたが、本当に電話番号リンクの上にカーソルを持って行っても反応しなくなりましたよ！
もちろん、スマホからは電話をかけられます。
CSSのPCからのクリックが無効になる理由
先ほどのCSSに入力したコードは正確にいうとPCからのクリックを無効にするコードではありません。
画面の大きさが指定の数値以上の場合はクリックを無効にするというコードなんです。
@media (min-width: 751px) {
a[href*=”tel:”] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
↑上記の赤文字『width: 751px』、幅が751px以上の端末からは電話番号リンクがクリックできないようになっています。
参考サイト：WordPress個別指導
電話番号リンクをPCからのクリックだけを無効にする・・・小さなことですが、ストレスのないサイトを作るために必要なカスタマイズです。
Googleからの評価も読者からの評価もいただけるような『良サイト』を目指してブログ運営を頑張っていきましょうね♪
【なぜ？】ブロガー・YouTubeクリエイターはアメリカへの税務情報の提出が必須【収益を守れ！】