# 発信可能な電話番号の挿入

**URL:** <https://community.shopify.com/t/topic/174346>\
**Category:** 技術的なQ＆A\
**Created:** [December 7, 2022, 3:15pm UTC](https://community.shopify.com/t/topic/174346 "2022-12-07T15:15:21Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Shopify Partnerのユーザーが、有料テーマ「Focal」を使用した商品詳細ページに、アイコン付きの発信可能な電話番号を追加する方法について質問しています。

**主な要望:**
- モバイルでは発信可能な電話番号を表示
- PCでは電話番号を非表示にするか、クリックしても発信しないように設定
- HTMLブロックやテキストブロックでの実装を検討中

**提案された解決策:**
回答者(フルバランス 園畑氏)から以下の方法が提示されました:
1. CSSのメディアクエリまたはJavaScriptで対応
2. より確実にPC非表示にするならJavaScriptを推奨
3. 非表示ではなくクリック無効化には `pointer-events: none;` のCSSプロパティを使用

**実装方法:**
メディアクエリ(`@media (min-width: 800px)`)内で該当要素に `pointer-events: none;` を指定することで、PC環境でのクリック反応を無効化できる具体的なコード例が共有されました。

参考サイトのリンクも提供され、質問者は解決に向けて進行中です。

<div class="post-metadata">

**Author:** ![Kitatema](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@Kitatema](https://community.shopify.com/u/Kitatema)\
**Post date:** [December 7, 2022, 3:15pm UTC](https://community.shopify.com/t/topic/174346/1 "2022-12-07T15:15:21Z")

</div>

お世話になっております。

shopify partnerのkitatemaと申します。

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

商品詳細ページにアイコン付きの発信可能な電話番号を記載したいと考えております。

また、PCの場合は電話は使用しないと思いますので発信できなくするか、非表示にしたいのですが可能でしょうか。。考えられる方法が思いつかずお力をお借りしたいです。

アイコン付きテキストブロックを使用して作成しようとしていたのですが（添付写真）、HTMLがブロック内に挿入できず、カスタムHTMLブロックかコード編集で対応になるかと探っております。

 ![スクリーンショット 2022-12-08 0.08.58.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/4/4e5ccd7821b00a355fad9468031fb388bea4cf08.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [December 8, 2022, 8:59am UTC](https://community.shopify.com/t/topic/174346/2 "2022-12-08T08:59:33Z")

</div>

Kitatema様

ご質問を確認いたしました。

PCのみhtml要素(電話番号)を非表示にする方法ですが、おそらくテーマの機能にはないかと思いますので、cssのメディアクエリで対応する方法とjavascriptで対応する方法が考えられます。

両方とも設定方法は下記のサイトに記載がありますが、より確実にPCで非表示にしたいのであれば、javascriptで設定されるのが良いかと存じます。

[https://webwork-plus.com/content/website/ramify.html#1](https://webwork-plus.com/content/website/ramify.html#1)

ご参考までに。

私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 園畑

---

<div class="post-metadata">

**Author:** ![Kitatema](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@Kitatema](https://community.shopify.com/u/Kitatema)\
**Post date:** [December 8, 2022, 2:07pm UTC](https://community.shopify.com/t/topic/174346/3 "2022-12-08T14:07:01Z")

</div>

株式会社フルバランス 園畑様

お返事いただきありがとうございます！

ご提案いただいた方法を使って、非表示ではなくPCの場合のみ電話番号をクリックしても反応しない（発信しない）ように設定することは可能でしょうか。。

重ね重ねご質問申し訳ございません。

何か方法がございましたら、ご教授いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [December 14, 2022, 9:03am UTC](https://community.shopify.com/t/topic/174346/4 "2022-12-14T09:03:35Z")

</div>

Kitatemaさま

> ご提案いただいた方法を使って、非表示ではなくPCの場合のみ電話番号をクリックしても反応しない\>（発信しない）ように設定することは可能でしょうか。。

以下のcssを指定すれば、クリックで反応しないようにすることが可能になります。

```auto
pointer-events: none;

```

以前共有しました下記サイトの実装方法に当てはめるなら、以下の形での実装になるかと存じます。

[https://webwork-plus.com/content/website/ramify.html#1](https://webwork-plus.com/content/website/ramify.html#1)

■cssでの調整

```markup
@media (min-width: 800px){
  .sample{ 
    pointer-events: none; 
  }
}

```

■javascriptでの調整

```markup

```

ご参考にしていただけますと幸いです。