WordPressテーマTCDのカスタマイズを研究するサイト

スマホグローバルメニューにタップで電話をかけられる電話番号を表示する

Q.スマホ表示でグローバルメニューに電話番号を表示させたい

PC表示ではヘッダー部分にグローバルメニューもしくは電話番号を選択して表示することができますが、スマートフォンではヘッダーに電話番号を表示することはできませんか?

A.以下の手順でグローバルメニューにタップで電話をかけられる電話番号を表示することができます

①外観>メニューからグローバルメニューの編集画面へお進みください。
②画面右上の「表示オプション」をクリックすると表示する項目が展開されるので、「CSSクラスに」チェックを入れます。
amore-tell2
③左の項目群からカスタムリンクを選択し、追加をします。
その際、
URL欄に「tel:●●●●●●●●●●」
ナビゲーションラベル欄に「(●●●) ●●●-●●●●」
というように任意の電話番号を入力し、メニューに追加ボタンを押します。
amore-tell
追加したカスタムリンクをお好きな位置にドラッグし、
CSS Class(オプション)欄に「visible-xs wp-icon wp-fa-phone」
と入力します。(visible-xsはスマホのみ表示、wp-icon wp-fa-phoneは電話のアイコンを付ける役割です)

最後にメニューを保存し、スマートフォンでグローバルメニューの表示をお確かめください。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。