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

[Kitatema]

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

shopify partnerのkitatemaと申します。

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

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

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

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

[株式会社フルバランス]

Kitatema様

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

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

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

https://webwork-plus.com/content/website/ramify.html#1

ご参考までに。
 
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
 
分からない点があれば、またいつでもご連絡ください。
 
フルバランス　園畑

[Kitatema]

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

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

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

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

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

[株式会社フルバランス]

Kitatemaさま

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

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

pointer-events: none;

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

 https://webwork-plus.com/content/website/ramify.html#1

■cssでの調整

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

■javascriptでの調整

<script>
var Element = document.querySelector('#sample');
if(navigator.userAgent.match(/(iPhone|Android)/)){
  // スマートフォンではクリック可能
  Element.style.pointer-events="auto";  
}else{
  // それ以外(PC,タブレット)はクリック不可
  Element.style.pointer-events="none";  
}
</script>

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