言葉と背中で伝えていこう。趣味/DIYブログ運営ホーム当サイトはアフィリエイト広告を利用しています。2022-01-22(スポンサーリンク)電話番号リンクをスマホでのみ有効・PCでは無効にしたい!そんなあなたのお悩みを解決していきましょう。電話番号リンクはPCからでも発信が出来てしまうお店や施設を紹介する記事を書くとき、タップすれば発信できる「電話番号リンク」を作ることがありますよね。読者としては、ページを見ながらタップするだけでそのまま電話をかけられる、とても便利な機能なんですが、1点だけ落とし穴があります。それは、PC(タブレット)で記事を読んでくれている人も、電話番号リンクをクリックできてしまう、ということ。実際にクリックすると、発信されてしまいます。通話機能が無いPC(タブレット)では、繋がってしまうことはないので、安心してください。そのうち勝手に切れます。「間違えて電話かけちゃった!変な請求とか来たらどうしよう。」って、なっちゃいますよね。自分のページを見に来てくれた読者さんに、余計な心配をかけさせてはいけません。こんなトラブルが起きないように、事前に対策しておきましょう。PC(タブレット)からは電話番号リンクを無効にする方法WordPressを利用して、記事を書いている方向けの方法です。CSSの設定で、PC(タブレット)では電話番号リンクをクリック出来ないようにする。CSS(スタイルシート)を「子テーマ」の『style.css』や『追加CSS』などに入力していきます。正確には、ページを見ている端末の幅で判断して、電話番号リンクの有効・無効を切り替える設定です。CSSを使ってPC(タブレット)からの電話番号リンクを無効にする設定方法CSSの入力のみの設定方法なので、初心者の方でも簡単にできます。WordPressのダッシュボードから「子テーマ」のカスタマイズを開くダッシュボード→外観→子テーマ→カスタマイズをクリック。2.「CSS追加」の入力欄にコードをコピペして貼り付け「子テーマ」のカスタマイズを開いたら、『style.css』や『CSS追加』などをクリック。下記のコードを入力します。none;}}貼り付けしたら、最後に『公開』ボタンをクリックして完了です。これで、CSSを使ってPC(タブレット)から電話番号リンクを無効にする設定は完了です。CSSを追加するだけでPCからの電話番号リンクが無効になるのか?前項でもチラっと書きましたが、紹介したCSSの設定は、ページを見ている端末の幅で判断して、電話番号リンクの有効・無効を決めています。部分で、「画面の幅が751px以上の場合」は電話番号リンクが無効になるようにしています。最後に電話番号リンクをスマホでのみ有効・PCでは無効にしたい!そんなあなたのお悩みも、これで解決できましたね!やり方は他にも幾つかありますが、専門的な知識のない私にはCSSにコードを追加する方法が1番簡単でした。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。