# Pcの時のみ電話番号の発信を無効にする方法

**URL:** <https://community.shopify.com/t/pc/175172>\
**Category:** 技術的なQ＆A\
**Created:** [December 10, 2022, 2:37am UTC](https://community.shopify.com/t/pc/175172 "2022-12-10T02:37:56Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品詳細ページに電話番号を記載する際、PC環境ではクリックしても発信できないようにしたいという質問。

**現状の課題:**
- テーマ「Focal」を使用中
- カスタムHTMLブロックにコードを記載したが、うまく反映されない
- User-Agentでモバイル判定するJavaScriptを試したが動作せず

**提案された解決策:**
- CSSの `pointer-events: none` を使用
- メディアクエリで画面幅750px以上(PC)の場合にリンクを無効化
- JavaScriptによる実装も可能だが、jQueryの有無によってはエラーの可能性あり

**結果:**
質問者は提案されたスクリプトを変更して実装し、うまく反映できたと報告。解決済み。

<div class="post-metadata">

**Author:** ![Kite](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@Kite](https://community.shopify.com/u/Kite)\
**Post date:** [December 10, 2022, 2:37am UTC](https://community.shopify.com/t/pc/175172/1 "2022-12-10T02:37:56Z")

</div>

初めまして。

Shopify partnerのkiteと申します。

現在、テーマ「Focal」を利用してサイト構築を行なっております。

商品詳細ページに発信可能な電話番号を記載したいのですが、PCのときは電話を使用しないと思いますので、クリックしても発信できないようにしたいのですが可能でしょうか。

コードの知識が少ないのですが、ご教授いただけますと幸いです。

現在こちらのコードをカスタムHTMLのブロックに記載していますが、上手く反映されない状況です。

(電話番号部分は投稿用に000-000-000に変更しています）

#### 000-000-000

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [December 12, 2022, 10:31am UTC](https://community.shopify.com/t/pc/175172/2 "2022-12-12T10:31:52Z")

</div>

こちらの記事を参考に、回答しております。

[https://illbenet.jp/view/css-pointer-events](https://illbenet.jp/view/css-pointer-events)

```markup
#### 
000-000-000

```

こちらを、下記のようにされてはいかがでしょうか？

```markup
#### 
000-000-000

750px以上をPCとしましたが、

```

@media (min-width: 750px)

````auto

の数値をご変更いただくことで、

ご希望の数値以上をPC扱いとすることができます。

User-Agentで制御するより、緩い判定になりますので、

ご要望に沿わないようでしたら申し訳ございません。

もし、JSでの実装をご希望でしたら、

jQueryが存在しないためにエラーが出ている可能性がありますので、

下記のようにスクリプトを変えますと、うまくいくかもしれません。

```javascript

````

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Kite](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@Kite](https://community.shopify.com/u/Kite)\
**Post date:** [December 13, 2022, 3:28pm UTC](https://community.shopify.com/t/pc/175172/3 "2022-12-13T15:28:17Z")

</div>

株式会社Q 田辺様

ご返信いただきありがとうございます。

ご教示いただいたスクリプト部分を変更するとうまく反映することができました！

他の方法や参考URLまで本当にありがとうございました、、！