サブヘッダーメニューに電話番号を表示してクリックで電話をかけられるようにする方法

サブヘッダーメニューに電話番号を表示してクリックで電話をかけられるようにする方法

メニュー
初心者向け
メニュー
yStandard Toolbox

yStandard Toolboxのサブヘッダー機能を使ってサブヘッダーに電話番号を表示&クリックで電話をかけられるようにする方法について紹介します。

※このマニュアルはyStandardユーザーコミュニティ内で頂いた質問を元に作成しています。

完成イメージ

完成イメージはこちら▲

ヘッダー右上にアイコン付きで電話番号を表示してクリックしたら電話をかけられるようになります。

サブヘッダーメニューの設定、リンクの作り方、アイコンの表示方法等、順に紹介していきます。

※PCでもクリックすると電話をかけるような動きになりますが、このマニュアルではひとまずそのままにしています。もし、PCではリンクなしの電話番号表示にしたい場合は別途CSSでのカスタマイズが必要になります。

サブヘッダー用メニューの作成

まずは、サブヘッダーに電話をかけられるリンクを表示できるようにしましょう。

サブヘッダーメニューを作成する

「外観」→「メニュー」を開き、サブヘッダーメニュー用のメニューを新しく作成します。メニューの位置を「サブヘッダー」にチェックを付けて保存します。

カスタムリンクで電話番号を設定する

「メニュー項目を追加」から「カスタムリンク」をクリックし、URLに「tel:[電話番号]」を入力します。

[電話番号]部分には実際に電話をかけてほしい電話番号をハイフン等の区切り文字なしで入力します。

「リンク文字列」にはサイトに表示される電話番号を入力します。こちらはハイフンなどで区切っておいたほうが見やすくなります。

※アイコンについては後ほど設定します。

URLとリンク文字列が入力できたら「メニューに追加」をクリックしましょう。

電話番号表示用メニューが追加された

メニューが追加されたら「メニューを保存」をクリックしてメニューを保存します。

電話番号が表示された

サイト右上に作成した電話番号メニューが表示されていればOKです。

電話アイコンの追加

続いて、電話番号の前に電話アイコンを追加しましょう。

yStandardのアイコンショートコード機能を使ってアイコンを表示します。

アイコンショートコードの使い方はこちらのマニュアルをご覧ください▼

サイト内で使えるアイコンを表示するためのショートコードを検索・コピーする方法
サイト内で使えるアイコンを表示するためのショートコードを検索・コピーする方法について紹介します。
wp-ystandard.com
電話番号アイコンをコピーする

アイコンショートコードページで「phone」を検索し、表示されたアイコンの中からイメージに合うアイコンのショートコードをコピーします。

アイコン下の[ys_icon ~~と書かれたショートコードをコピーするか、ショートコードすぐ右横のクリップボードアイコンのボタンをクリックすると、ショートコードをコピー出来ます。

メニューの設定に戻り、先程設定した電話番号を表示するメニューをクリックして設定を開きます。

「ナビゲーションラベル」にコピーしたショートコードをペーストして、メニューを保存します。

サブヘッダーの電話番号に電話アイコンが表示されました。

サブヘッダーメニューのデザインを調整する

ヘッダーデザイン設定でサブヘッダーメニューのデザイン調整をする

サブヘッダーはyStandard Toolboxメニューの「ヘッダーデザイン設定」で調整出来ます。

背景色や文字色、文字サイズなどを好みに合わせて調整してみてください。