Shopify Partnerのユーザーが、有料テーマ「Focal」を使用した商品詳細ページに、アイコン付きの発信可能な電話番号を追加する方法について質問しています。
主な要望:
提案された解決策:
回答者(フルバランス 園畑氏)から以下の方法が提示されました:
pointer-events: none; のCSSプロパティを使用実装方法:
メディアクエリ(@media (min-width: 800px))内で該当要素に pointer-events: none; を指定することで、PC環境でのクリック反応を無効化できる具体的なコード例が共有されました。
参考サイトのリンクも提供され、質問者は解決に向けて進行中です。
お世話になっております。
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ボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
株式会社フルバランス 園畑様
お返事いただきありがとうございます！
ご提案いただいた方法を使って、非表示ではなく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での調整
ご参考にしていただけますと幸いです。