【第10章】店舗情報ページの作成
ページの設定
店舗概要のページを作成していきます。現在、タブバーに今開いているページと先程デザインのコピーに使用していた『LILASについて』のページのタブがあると思います。今回も『LILASについて』のページデザインを一部使用するので、消さずにそのままにしておいてください。
・ダッシュボードの左サイドバーから固定ページ一覧に入ります。固定ページ一覧から『店舗概要』の固定ページを選択します。今までと同様に『ご利用の流れ』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左パネルの一番下の『⚙️(歯車マーク)』の設定ボタンをクリックして『固定ページレイアウト』を『Elementor Full Width』にしましょう。設定できたら『更新』ボタンをクリックしておきましょう。
※動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
TOPの設定
・LILASについてのページからTOPのセクションをコピーして『店舗概要』ページ
に貼り付けます。貼り付けたら、セクションの背景を変更します。ピンクタブをクリックしてセクションを選択し、スタイルを開きます。『画像』の『画像の選択』から背景画像を変更します。
・背景が変えられたら見出しを変更します。『LILASについて』から『店舗概要』に変更します。
・LILASについてのページからTOPの下にあるスペーサーが入ったセクションをコピーして『店舗概要』のページに貼り付けます。
コンテンツエリア：店舗概要
・『店舗概要』のコンテンツエリアを作成していきます。カラムが2つに分かれているセクションを新しく追加します。追加できたら、セクションのピンクタブをクリックし、左パネルの『レイアウト』を開いて『幅』の項目を設定します。ここの値を変えることでセクションの幅を自由に調整することができます。『幅』の値を『750』にしましょう。
・次は、カラムの幅を変更します。左カラムのカラムアイコンをクリックしたら『レイアウト』を開きます。『カラム幅(％)』という項目があるのでここの値を『30』にします。
・右カラムも同じようにカラム幅を設定します。右カラムは、『カラム幅：70』にしましょう。
・設定ができたら左カラムに見出しウィジェットを入れます。見出しのスタイル設定は以下の通りです。
※見出し設定内容はこちら↓
【スタイル】
配置：左
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：18
太さ：700 (Bold)
Line Height：1.7
文字色：747474
・スタイル設定ができたら次は、コンテンツからタイトルに『店舗名』と入れてください。HTMLタグは、『H3』に設定します。
・右カラムにテキストエディターウィジェットを入れます。スタイル設定は以下の通りです。
※見出し設定内容はこちら↓
【スタイル】
配置：左
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：1.7
段落間隔：6
文字色：747474
・設定できたら、コンテンツからテキストエディターに『LILAS』と入れます。
・下に新しいセクションを追加して『区切り』ウィジェットを入れます。区切り線が入ったら『コンテンツ』の設定をします。
※設定内容はこちら↓
スタイル：単色
幅：75
配置：中央
・次は、スタイルの設定を行います。
※設定内容はこちら↓
色：dddddd
すき間：10
・見出しとテキストエディターが入ったセクションと『区切り』が入ったセクションを組み合わせた形がデザインベースとなります。ここからはこの２つのデザインを複製しながらページを作成していきます。
・『ご利用の流れ』のページを作成した時と同じように一旦ここでレスポンシブモードの設定を行います。左パネルの一番下のレスポンシブモードからタブレット版の編集画面に切り替えます。
・切り替えられたら、『店舗名』の見出しが入ったセクションのピンクタブをクリックして左パネルのレイアウトから『幅：500』に変更します。
・次は『区切り』の設定を変更します。『区切りウィジェット』をクリックしたら『コンテンツ』から『幅：100』に設定します。できたら、左パネルの下にある『更新』ボタンを押しましょう。
・画面上のスマートフォンアイコンを選択して、スマートフォン版の設定を行います。『店舗名』の見出しをクリックしてスタイルからタイポグラフィ設定を行います。『サイズ：17』に変更します。
・『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『左：20』に設定しましょう。
・次は、『LILAS』のテキストエディターウィジェットを編集します。スタイルからタイポグラフィ設定を行います。『サイズ：15』に変更します。こちらも『高度な設定』から『マージン』を設定します。同じように『左：20』に設定しましょう。
・設定できたら、もう一度デスクトップ版の編集画面に戻ります。
・ここからはセクションの複製と移動を繰り返し、内容を変更しながらページを作成していきます。
・店舗概要『店舗名』のセクションを複製して区切り線の下に移動させ、以下の内容に変更します。
※設定内容はこちら↓
【見出し】
店舗名→所在地
【テキストエディター】
LILAS→
〒123-456
大阪府大阪市北区〇〇
・『区切りウィジェット』を複製して『所在地』のセクションの下に移動させます。所在地のセクションを複製して『区切りウィジェット』の下に移動させ、以下の内容を入れます。
※設定内容はこちら↓
【見出し】
電話番号
【テキストエディター】
000-123-456
・『区切りウィジェット』を複製して『電話番号』のセクションの下に移動させます。『電話番号』のセクションを複製して『区切りウィジェット』の下に移動させ、以下の内容を入れます。
※設定内容はこちら↓
【見出し】
代表者名
【テキストエディター】
〇〇 〇〇
・『区切りウィジェット』を複製して『代表者名』のセクションの下に移動させます。『代表者名』のセクションを複製して『区切りウィジェット』の下に移動させ、以下の内容を入れます。
※設定内容はこちら↓
【見出し】
営業時間
【テキストエディター】
10:00～19:00
・『区切りウィジェット』を複製して『営業時間』のセクションの下に移動させます。『営業時間』のセクションを複製して『区切りウィジェット』の下に移動させ、以下の内容を入れます。
※設定内容はこちら↓
【見出し】
定休日
【テキストエディター】
月曜日
・項目は以上で終わりです。定休日のセクションの下に『スペーサー(スペース：80)』を入れます。
・その下に新しくセクションを追加します。ウィジェット一覧の『一般』から『Googleマップ』のウィジェットを入れます。このウィジェットを入れることでページ内に簡単に周辺マップを表示させることができます。
・『Googleマップ』が入ったら設定を行います。まずは、セクションのピンクタブをクリックして『レイアウト』からセクションの幅を設定します。『幅：895』にします。
・『コンテンツ』を開いて『ズーム』の値を『16』にします。ズームの値を変更することでマップに表示される範囲を調整することができます。その下の『高さ』は『510』に設定しましょう。
・コンテンツの設定項目に『所在地』という項目があります。ここに所在地や住所、会社名や店舗名を打ち込むと、マップ内の該当する場所にピンが刺さります。動画内では、わかりやすく例として『大阪駅』としています。
・Googleマップの下に新しいセクションを追加してスペーサー(スペース：100)を入れたらパネルの『更新』をクリックして編集内容を保存しておきましょう。次はタブレット版の編集を行います。
レスポンシブ設定：タブレット
・『定休日』のセクションの下にあるスペーサーを『スペース：50』に値を変更します。
・次にGoogleマップをクリックして『コンテンツ』から『高さ：330』に設定します。
・一番下のスペーサーのスペースの値を『80』にします。
パネルの『更新』をクリックして編集内容を保存しておきましょう。
レスポンシブ設定：スマートフォン
・『定休日』のセクションの下にあるスペーサーを『スペース：30』に値を変更します。
・一番下のスペーサーのスペースの値を『50』にします。
・これで『店舗概要』ページのデザインは完成です。パネルの『更新』をクリックして編集内容を保存しておきましょう。
・画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。確認が終わったら今開いているタブを消して、TOPページの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。