【第12章】リンク設定

今から、各ページに配置した『ボタンウィジェット』に該当するページのパーマリンク(各ページのURLのこと)を入れ、ボタンにページをリンクさせて行く作業を行います。

ダッシュボードを開いてください。Googleタブバーの今開いているページのタブを複製します。
元々開いていた左側のタブに戻り、左サイドバーから固定ページ一覧を開いて『TOPページ』のElementorの編集画面に入ります。

TOPページ

・TOPページには、合計５つのボタンが配置されています。上から順にリンクを設定していきます。

・まずはAbout(LILASについて)のコンテンツエリアにある『LILASについて』のボタンからリンクを設定します。

・右のタブを開き、固定ページ一覧にいきます。『LILASについて』のタイトルをクリックして設定画面(スラッグやアイキャッチ画像を設定した画面)に入りましょう。右サイドバーにある『スラッグ(about)』をクリックするとスラッグのパネルが出てきます。『/about』と入った入力フォームの右端にある四角い『copy』のボタンをクリックすると『LILASについて』のパーマリンクがコピーできます。

・コピーしたらタブバーのTOPページの編集画面を開いている左タブに戻ります。

・『LILASについて』のボタンウィジェットをクリックして『コンテンツ』を開き『リンク』設定の入力フォームにコピーした『LILASについて』ページのパーマリンクを貼り付けましょう。

・リンク設定は、各ボタンに該当するページのパーマリンクをコピーして、リンク設定の入力フォームに貼り付ける　という作業の繰り返しになります。

・次は、サービスのコンテンツエリアにあるボタンにリンクを設定していきます。

・まずは『オーガニック肌活フェイシャル』のセクションにある『詳しく見る』ボタンから設定します。

・タブバーの右のタブを開き、一番左上の『サイトアイコン』をクリックして『固定ページ一覧』の画面に戻ります。固定ページ一覧から『フェイシャル』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ(facial)』をクリックするとスラッグのパネルが出てきます。『/facial』と入った入力フォームの右端にある四角い『copy』のボタンをクリックすると『フェイシャル』のパーマリンクがコピーできます。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・オーガニック肌活フェイシャルのセクション内にある『詳しく見る』のボタンウィジェットをクリックして『コンテンツ』を開き『リンク』設定の入力フォームにコピーした『フェイシャル』ページのパーマリンクを貼り付けましょう。

・次は『体質改善デトックスボディ』のセクションにある『詳しく見る』ボタンを設定します。

・タブバーの右のタブを開き、固定ページ一覧から『ボディ』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『ボディ』ページのパーマリンクをコピーします。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・体質改善デトックスボディのセクション内にある『詳しく見る』のボタンウィジェットをクリックして『コンテンツ』を開き『リンク』設定の入力フォームにコピーした『ボディ』のパーマリンクを貼り付けましょう。

・次は、バナーボタンにリンクを設定していきます。

・まずは『ご利用の流れ』のバナーボタンから設定します。

タブバーの右のタブを開き、固定ページ一覧から『ご利用の流れ』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『ご利用の流れ』ページのパーマリンクをコピーします。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・Elementorで作成するバナーボタンは、ボタン自体にリンクの設定ができないので『見出し』にリンク設定を行います。『ご利用の流れ』と入った見出しをクリックして選択します。『コンテンツ』を開いたら『タイトル』の下に『リンク』の設定項目があるのでそこに『ご利用の流れ』ページのパーマリンクを貼り付けましょう。

・次は『メニュー』のバナーボタンを設定します。

・タブバーの右のタブを開き、固定ページ一覧から『メニュー』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『メニュー』ページのパーマリンクをコピーします。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・『メニュー』と入った見出しをクリックして選択します。『コンテンツ』を開いたら『タイトル』の下に『リンク』の設定項目があるのでそこに『メニュー』ページのパーマリンクを貼り付けましょう。

・TOPページのリンク設定は完了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。ハンバーガーメニューから、TOPページの編集画面を終了します。

メニュー

・メニューページにあるボタンにリンクを設定していきます。

・TOPページの編集画面を終了したら、次は固定ページ一覧を開いて『メニュー』のElementorの編集画面に入ります。

・次はタブバーの右のタブを開き、固定ページ一覧から『フェイシャル』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『フェイシャル』ページのパーマリンクをコピーします。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・フェイシャルのセクション内にある『詳しく見る』のボタンウィジェットをクリックして『コンテンツ』を開き『リンク』設定の入力フォームにコピーした『フェイシャル』ページのパーマリンクを貼り付けましょう。

・次は、ボディのセクションにある『詳しく見る』のボタンを設定します。

・タブバーの右のタブを開き、固定ページ一覧から『ボディ』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『ボディ』ページのパーマリンクをコピーします。

・コピーしたらタブバーのTOPページの編集画面を開いているタブに戻ります。

・ボディのセクション内にある『詳しく見る』のボタンウィジェットをクリックして『コンテンツ』を開き『リンク』設定の入力フォームにコピーした『ボディ』ページのパーマリンクを貼り付けましょう。

・メニューページのリンク設定は完了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。ハンバーガーメニューから、メニューページの編集画面を終了します。

店舗概要

・メニューページの編集画面を終了したら、次は固定ページ一覧を開いて『店舗概要』のElementorの編集画面に入ります。

・ページ内にボタンはないですが、電話番号が入ったテキストエディターにリンク設定をおこないます。電話番号にリンク設定をしておくことで、スマホで電話番号をタップすると電話がかけられるようになります。

・『000-123-456』の電話番号が入ったテキストエディターをクリックして選択します。

・『コンテンツ』を開いてテキストエディターの入力フォームに『リンク挿入/編集』の『🔗』アイコンがあります。アイコンをクリックすると『URLをペーストまたは入力して検索』という文字と入力フォームが出てくるので『tel:000-123-456』と入力しましょう。入力できたら右側にある青色の『↲』ボタンをクリックします。テキストエディター内の電話番号が青くなったらリンク設定完了です。

・パネルの『更新』をクリックして編集内容を保存します。ハンバーガーメニューから、店舗概要ページの編集画面を終了します。固定ページ一覧に戻ります。

ヘッダー

・固定ページ一覧に戻ったら左サイドバーの『UAE』からヘッダー・フッターの設定画面にいきます。『UAE』をクリックして設定画面がでてきたら上にある『Header ＆ Footer』ボタンからヘッダー＆フッタービルダー一覧のページにうつります。ビルダー一覧から『ヘッダー』を選択しましょう。

・『LILASのロゴマーク』『電話番号』『予約するボタンのアイコン』この３つにリンクを設定します。まずは、ロゴマークにリンクを設定します。

・タブバーの右のタブを開き、固定ページ一覧から『TOPページ』のタイトルをクリックして設定画面に入りましょう。

・右サイドバーにある『スラッグ』をクリックして、パネルから『TOPページ』のパーマリンクをコピーします。

・コピーしたらタブバーのヘッダー編集画面を開いているタブに戻ります。

・ロゴマークをクリックして選択し、『コンテンツ』を開くと『リンク』設定の項目が下の方にあります。『なし』から『カスタムURL』に変更すると下にURLの入力フォームが出てくるので、そこにTOPページのパーマリンクを貼り付けましょう。

・電話番号にリンク設定をします。電話番号が入った見出しをクリックして選択したら『コンテンツ』の『リンク』にあるＵＲＬの入力フォームに『tel:000-123-456』と入れます。

・次は、『予約する』のボタンのアイコンにリンクの設定をします。カレンダーアイコンをクリックして選択し、『コンテンツ』の『リンク』にあるＵＲＬの入力フォームに『公式LINE』や『予約システム』のURLを入れます。こちらは任意なので、今回はやり方だけの説明となります。『お問い合わせ』ページのパーマリンクを貼り付けても良いです。