FROM CACHE - jp_header

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

Kitatema
Shopify Partner
16 0 0

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

shopify partnerのkitatemaと申します。

 

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

 

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

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

 

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

 

スクリーンショット 2022-12-08 0.08.58.png

 

3件の返信3
株式会社フルバランス
Shopify Partner
1288 463 607

Kitatema様


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

 

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

 

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

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


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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Kitatema
Shopify Partner
16 0 0

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

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

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

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

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

株式会社フルバランス
Shopify Partner
1288 463 607

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>

 

 

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス