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

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

## AI-generated summary

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

**課題:**
- HTMLブロックが使用できないテキストブロックに電話番号リンクを挿入したい
- PC表示では電話発信機能を無効化または非表示にしたい

**提案された解決策:**
1. テーマコード編集で「text with icons」ファイルを開く
2. schema内の`"type": "richtext"`を`"type": "html"`に変更
3. これによりHTML入力が可能になり、`<a href="tel:000-1234-5678">000-1234-5678</a>`形式で電話番号リンクを記述できる
4. PC表示での非表示化には、メディアクエリでCSSの`display:none`を使用し、aタグに専用クラス名を付与する方法が提案された

**結果:**
質問者は提案された方法で意図通りの表示を実現できたことを報告し、解決済み。

<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:12pm UTC](https://community.shopify.com/t/topic/174345/1 "2022-12-07T15:12:04Z")

</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 16, 2022, 9:14am UTC](https://community.shopify.com/t/topic/174345/2 "2022-12-16T09:14:14Z")

</div>

Kitatemaさま

はじめまして、フルバランスの渡邉です。

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

セクションによってはHTMLが使えなくて困りますよね。

既存のブロックをHTML入力可能な状態に変更してしまうのが手取り早いと思いますので、

1.テーマ → コードを編集でtext with iconsというファイルを探してください

1. schema内に以下のような記述があるかと思います

```markup
{
"type": "richtext",
"id": "text",
"default": "

Free worldwide shipping and returns - customs and duties taxes included

",
"label": "t:sections.rich-text.blocks.text.settings.text.label"
}

```

この"type": “richtext”,を"type": “html”,に変更してみてください

schemaのtypeタグについて：

[https://ec-penguin.com/blogs/shopify/schema-type-summary](https://ec-penguin.com/blogs/shopify/schema-type-summary)

3.これでHTML入力ができるようになるので、

000-1234-5678といった形で発信可能な電話番号が入力できると思います。

参考：[https://webliker.info/html/65145/](https://webliker.info/html/65145/)

PCでは発信不可にする方法ですが、

aタグ付きとaタグなしの電話番号を２つ記入し、それぞれクラス名をつけてcssのメディアクエリでdisplay:none;で出しわけするのはいかがでしょうか。

ご参考になりましたでしょうか。

私たちの励みにもなりますので、  
お役に立てていれば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 16, 2022, 4:13pm UTC](https://community.shopify.com/t/topic/174345/3 "2022-12-16T16:13:12Z")

</div>

フルバランス 渡邉様

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

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

ご教示いただいた内容で思い通りに表示することができました。

お力を貸していただきありがとうございます！
