【第7章】メニューページ
・固定ページ一覧から『メニュー』を選択します。『メニュー』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左パネルの『⚙️(歯車マーク)』の設定ボタンをクリックしましょう。『固定ページレイアウト』を『Elementor Full Width』にしましょう。設定できたら『更新』しておきましょう。動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
TOP画像の設定
※TOP画像の設定の流れは、『LILASについて』の固定ページと同じなので、詳しい説明は『第6章①』の画像を参照してください。
新しいセクションを出して、スペーサーを入れます。スペースは『80』に設定します。スペーサーのスペース幅が設定できたらスペーサーの上で右クリックしてコンテキストメニューを開き、『複製』します。複製した方のスペーサーは『スペース：100』に設定しましょう。
・トップ画像を挿入します。スペーサーの外側にあるセクションのピンクタブをクリックして左パネルから『スタイル』を開き、背景画像を設定します。『Background Type』の『クラシック(筆アイコン)』をクリックすると『画像の選択』の項目が出てくるのでそこからメディアライブラリを開き、背景画像をアップロードします。アップロードして画像が選択できたらその下の『背景画像の設定』を行います。
※背景の設定内容はこちら↓
【スタイル】
Image Resolution：フル
位置：中央/中央
添付：デフォルト
繰り返し：繰り返しなし
Display Size：カバー
・設定ができたら次は、『背景オーバーレイ』を設定します。背景設定の下にある『背景オーバーレイ』の項目をクリックします。『Background Type』の『クラシック(筆アイコン)』をクリックしてカラーピッカーから色を設定していきます。色コードの入力フォームに『C0C0C091』と入れてください。『不透明度』の値を『0.5』に設定します。
・TOPに見出しを入れます。新しいセクションを追加して『ウィジェット一覧』から『見出しウィジェット』をTOPのスペーサーとスペーサーの間にドラッグ＆ドロップで入れます。スペーサーの間に見出しが入ったらパネルから見出しの設定をします。
【スタイル】
配置：左
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78
・『スタイル』から上記の設定ができたら『コンテンツ』から見出しの『タイトル』を入れます。『メニュー』と入れて『HTMLタグ』は『H1』で設定しましょう。
・TOP画像の下にある先程出したセクションにスペーサーを入れます。『スペース：80』に設定します。
コンテンツエリア～フェイシャル～
・『フェイシャル』のコンテンツエリアを作成していくので、新しくセクションを追加します。今回は、カラムが２つに分かれているセクションを選択してください。左のカラムからデザインしていきます。
・左カラムの中にウィジェット一覧から『見出し』を入れます。設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78
・『スタイル』の設定ができたら、『コンテンツ』を開き『タイトル』に『Facial』と入れて『HTMLタグ』は『span』に設定します。
・『Facial』の下に『あしらい』を入れます。新しいセクションを追加して『ウィジェット一覧』から『画像ウィジェット』を選択し、『Facial』の下にドラッグ＆ドロップで『画像ウィジェット』を挿入します。『コンテンツ』を開いたら『画像を選択』からメディアライブラリを開き、あしらいに使用していた画像を選択します。あしらいが入ったら、『スタイル』から『配置：中央』『幅：7』に設定します。次は『高度な設定』から『マージン』を設定します。一番右の『
』をクリックして、リンクを解除してから『上：-15』に設定しましょう。
・あしらいの下に見出しを入れたいので、先程追加したセクションの『＋』をクリックしてウィジェット一覧を左パネルに出します。見出しウィジェットをあしらいの下にドラッグ＆ドロップで入れましょう。今入れた『見出し』の『スタイル』の設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：25
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474
・『コンテンツ』を開いて『タイトル』に『フェイシャル』と入れます。『HTMLタグ』は『H2』に設定します。
・『見出し』の下に『テキストエディター』を入れます。さっき出したセクションが残っているのでその中に『テキストエディター』ウィジェットを入れてからドラッグ＆ドロップで『見出し』の下に移動させます。移動させたら『配置』『タイポグラフィ』『段落間隔』『文字色』の設定を行います。
※テキストエディターの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
段落間隔：6
文字色：747474
・『高度な設定』から『マージン』の設定をします。『右』『左』だけ値を入力したいので、一番右の『』をクリックして、リンクを解除します。『右』の項目の値をボックス内の『▼』を押して『50』に設定します。『左』も同じように『50』に設定します。次は、『コンテンツ』を開いてテキストボックスに以下の文章を入れます。
『肌が呼吸をはじめるような、やさしいフェイシャルケア。植物の恵みと手のぬくもりが、内側から輝く透明感を引き出します。』
・文章が入れられたらその下に『ボタン』を設置します。左パネルにウィジェット一覧を出します。『基本』の項目から『ボタン』のウィジェットを探してカラム内にドラッグ＆ドロップしましょう。右画面に黄緑色の『ここをクリック』と書かれたボタンが出て来たと思います。では、左パネルからボタンの設定をしていきます。『スタイル』を開いて『位置』『タイポグラフィ』の設定をまずは行いましょう。この2つの項目は、見出しやテキストエディターと同じような流れで設定していきます。
配置とタイポグラフィはの設定内容は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：入力しない
・ここまで設定出来たら、『スタイル』の設定項目の中央辺りにある『色』を設定します。これは、ボタンの色を設定できる項目です。色の項目の右側に『🌐』『■(黄緑の正方形)』があるので、『■』の方をクリックしましょう。するとカラーピッカーが出てきます。一番下の色コードを入力して設定していきます。『C59F78』と入れましょう。
『文字色』の項目の上に『普通』『マウスオーバー』と2つのボタンが並んでいます。『マウスオーバー』の方をクリックしてマウスオーバー時の設定をしていきます。
・まずは、『文字色』を設定します。先程設定した普通時の設定と同じようにカラーピッカーを表示させて色コードの入力フォームに『FFFFFF』と入れます。または、カラーボードにある丸いアイコンをドラッグして左上端にもっていくと簡単に『白(FFFFFF)』に設定することができます。次は、ボタンの色を設定します。『色』も同じようにカラーピッカーを表示させて色コードに『9E8871』と入力します。ここまでできたら、『普通』のボタンをクリックします。
・次は、『枠線の丸み』という項目を設定します。値が大きくなると角が丸くなり小さくなると角が角ばって長方形に近くなります。今回は、長方形のボタンにしたいので値を『0』にします。『上・右・下・左』の値が連携されている状態なのでこのまま『０』に設定しましょう。
・『枠線の丸み』の下にある『パディング』を設定します。値を入力するボックスの一番右に『』のアイコンボタンがあるのでそれをクリックして『値のまとめてリンク』を解除しておきましょう。『上・右・下・左』とそれぞれ値を入れます。『上：20 右：45 下：20 左：45』に設定します。
・『コンテンツ』のタブを開いて『テキスト』を設定します。『ここをクリック』とデフォルトで入っているので、その文字を消して入力フォームに『詳しく見る』と入れます。
・右カラムに画像を挿入します。ウィジェット一覧から画像ウィジェットを入れます。左パネルのコンテンツを開き画像の選択をクリックしてメディアライブラリを開き、入れたい画像をアップロードして選択します。
・『フェイシャル』のセクションの下にスペーサー(スペース：50)を入れたら、このセクションを複製します。ピンクのタブの上で右クリックをして『複製』を選択します。
・複製したセクションに背景色を入れます。複製したセクションのタブをクリックしてセクションを選択し、『スタイル』を開き、『Background Type』の『色』の項目から色を変更します。『カラーピッカー』を開いたら『色コード』の入力フォームに『EDE8E5』と入れましょう。
コンテンツエリア～ボディ～
・次は、『フェイシャル』のセクションを複製し、背景色を入れたセクションの下に移動させます。このセクションを、『ボディ』のコンテンツの仕様に変更していきます。
・移動できたら複製したセクションに背景色を入れます。複製したセクションのピンクタブをクリックして『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。『カラーピッカー』を開いたら、『Color Sampler』で上のセクションの背景色が入った部分をクリックし、同じ色に設定します。
・まずは、『見出し(Facial)』をクリックして『コンテンツ』を開きタイトルを変更します。『Facial』から『Body』に変えます。そのほかの設定は触らず同じで大丈夫です。
・『フェイシャル』の見出しをクリックして選択し、左パネルの『コンテンツ』を開いて、『フェイシャル』→『ボディ』に変更します。
・その下の『肌が呼吸をはじめる～・・・』の文章が入った『テキストエディター』をクリックして『コンテンツ』から文章を変えます。以下の文章に入れ替えます。
『心地よい手のぬくもりと香りに包まれながら、体の巡りを整える贅沢な時間。心も体もふっと軽くなるボディケアです。』
・右カラムの画像を変更します。画像をクリックして選択し、『コンテンツ』を開いたら画像の選択をクリックしてメディアライブラリを開き、入れたい画像をアップロードして選択します。
・次は、左右のカラムの場所を入れ替えます。左カラムのカラムアイコンをクリックしたままドラッグして右にもっていくとカラムの場所を入れ替えることができます。
・このセクションの下にスペーサーを入れたいので、『ボディ』のセクションの上にある背景色が入ったセクションを『複製』し、『ボディ』のセクションの下に移動させます。移動させたら『スペース：70』に設定します。
・その下に新しくセクションを追加し、スペーサー(スペース：100)を入れます。
・デスクトップ版のデザインはこれで完成です。左パネルの『更新』をクリックしてデザインを保存しましょう。『更新』できたら、左パネルの『<』のタブをクリックしてパネルを非表示にし、デザインをフルスクリーンで確認しましょう。デザインや誤字脱字など修正が無ければ、『タブレット版』の編集をしていきます。
レスポンシブ設定～タブレット～
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックしてタブレット版の編集画面に移ります。
・TOPエリアはそのままで大丈夫です。まずは、TOP画像の下にあるスペーサーのスペースの値を『50』に変更します。
・フェイシャルのコンテンツエリアを編集します。『肌が呼吸を～・・・』のテキストエディターをクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・次はあしらいのサイズを変更します。あしらいをクリックして選択し、『スタイル』を開いて『幅：10』に設定します。
・右カラムの設定を行います。右カラムの画像をクリックしたら左パネルの『スタイル』から『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。
・次は、『ボディ』のセクションを編集します。まずは、左カラムの設定を行います。左カラムの画像をクリックしたら左パネルの『スタイル』から『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。
・次は、『ボディ』のセクションを編集します。まずは、あしらいのサイズを変更します。あしらいをクリックして選択し、『スタイル』を開いて『幅：10』に設定します。
・『心地よい手のぬくもりと～・・・』のテキストエディターをクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
※編集の方法は、『フェイシャル』のコンテンツエリアと同じなので、『フェイシャル』の参考画像を参照してください。
・一番下にあるスペーサーを『コンテンツ』から『スペース：80』に設定したらタブレット版の設定は終了です。左パネルの『更新』をクリックしてデザインを保存しましょう。
左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
レスポンシブ設定～スマートフォン～
・画面上の黒いバーから『スマートフォン』のアイコンをクリックしましょう。画面が縦長になります。
・TOPから編集していきます。まずは、『メニュー』の見出しをクリックしてサイズを変更します。『スタイル』から『タイポグラフィ』を開いて『サイズ：30』に変更します。それができたらTOPの下にあるスペーサーを『スペース：30』に変更します。
・フェイシャルのコンテンツエリアを編集します。まずはあしらいをクリックして選択し、『スタイル』を開いて『幅：12』に設定します。
・『フェイシャル』の見出しをクリックして『スタイル』から『サイズ：22』に変更します。そして見出しの下にある『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』に変更します。
・テキストエディターの下にある『詳しく見る』ボタンは高度な設定から『マージン：(下)20』に設定します。『🔗』をクリックして値のリンクを解除してから設定しましょう。
・ボタンの下にある画像の高さを調整します。画像を選択して『スタイル』から高さの値を『195』に変更します。
・画像下のスペーサーの値を『スペース：30』にします。
・ボディのコンテンツエリアもフェイシャルエリアと同じように設定を変更します。
それぞれの設定項目で以下の値を入れましょう。設定場所がわからなければ、フェイシャルエリアの説明に戻って画像や文章を参考にしてください。
あしらい→『幅：12』
『ボディ』見出し→『サイズ：22』
テキストエディター→『サイズ：15』
ボタン→『マージン：(下)20』
画像→高さ『195』
画像の下のスペーサー：『スペース：30』
一番下のスペーサー：『スペース：50』
・『スマートフォン版』の編集は終了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
・これで『メニュー』のデザインが完成です。画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。左パネルの一番下のアイコンが並んでいる所に『👁️(変更をプレビュー)』のアイコンがあるのでそれをクリックします。するとタブバー(Googleのタブバー)に新しいタブが出てプレビューを見ることができます。確認出来たら、左のタブをクリックしてメニューページのElementorの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。プレビューのタブは削除しておいてください。
