【第8章】サービスページ～フェイシャル～
・固定ページ一覧から『フェイシャル』を選択します。『フェイシャル』の設定ページの上部にある『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
サイズ：40
太さ：600 (Semi Bold)
Line Height：1.7
文字色：FFFFFF
・『スタイル』から上記の設定ができたら『コンテンツ』から見出しの『タイトル』を入れます。『フェイシャル』と入れて『HTMLタグ』は『H1』で設定しましょう。
・これでTOP画像の設定は完了です。TOP画像の下にある先程出したセクションにスペーサーを入れます。『スペース：80』に設定します。
コンテンツエリア～サービス内容～
・TOP画像のスペーサーの下に新しいセクションを追加し、『見出し』を入れます。見出しの設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.9
文字色：747474
・『コンテンツ』からタイトルを『フェイシャルエステ』と入れます。
・見出しの下に新しくセクションを追加してウィジェット一覧を開きます。『基本』の項目から『区切り』のウィジェットを選択してセクション内にドラッグ＆ドロップで入れましょう。区切りのウィジェットを入れることでデザインの中に自由に区切り線を入れることができます。
・『区切り』ウィジェットの設定をしていきます。『コンテンツ』を開くと『スタイル』の項目があります。この項目は区切り線のデザインを選択することができます。二重線や斜線など様々なデザインがあります。今回は『単色』を使用します。スタイルの下の『幅』の値は『50』にします。配置は『中央』で設定します。
・『スタイル』を開き、区切りの『色』を設定します。黒の正方形をクリックしてカラーピッカーを開いて色コードの入力フォームに『dddddd』と入れましょう。『太字』の値は『１』、『すき間』の値は『15』にしておきます。
・設定ができたら、区切りウィジェットにカーソルを合わせると出てくる区切りウィジェット右上の『
』をクリックしたままドラッグして『フェイシャルエステ』の見出しが入ったセクションの中に入れます。『フェイシャルエステ』の文字の少し下辺りにウィジェットをもっていくとウィジェットが入る位置にピンクの枠が出るのでそれを目安にします。コンテンツエリアはできるだけ同じセクション内に作成した方が後からがしやすいです。
・『区切り』ウィジェットの下(同じセクション内)にテキストエディターを入れます。別のセクションの『＋』をクリックしてウィジェット一覧を出した後、テキストエディターのウィジェットをドラッグ＆ドロップで区切りウィジェットの下に持っていきます。先程と同じようにピンクの枠が出るのでそれを目安にしてください。
テキストエディターの『スタイル』の設定は以下の通りです。
※テキストエディターの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
段落間隔：6
文字色：747474
・次は『高度な設定』から『マージン』を設定します。一番右の『
』をクリックして、リンクを解除してから『右：50』『左：50』に設定しましょう。
・『コンテンツ』を開いてテキストを入れます。動画では、『Google スプレッドシート』からあらかじめ用意していた文章をコピー＆ペーストで挿入しています。このように入れたい文章を考えて『Google スプレッドシート』や『Word』などにまとめておくと、デザインを作成する際に便利です。テキストエディターに入れる文章は以下の通りです。
天然由来のオーガニック製品を使用した、肌にも心にもやさしいフェイシャルエステ。クレンジングから保湿、トリートメントまで丁寧に行い、肌の汚れを落としながら本来の透明感と潤いを引き出します。肌質やお悩みに合わせたオーダーメイド施術で、乾燥・くすみ・ハリ不足など、年齢肌にもアプローチ。完全個室のプライベート空間で、人目を気にせずゆったりとお過ごしいただけます。内側から輝く素肌美をぜひご体感ください。
・テキストエディターウィジェットの下にスペーサーを入れます。『スペース』の値は『30』に設定します。
・スペーサーの下に画像ウィジェットを入れます。画像ウィジェットをスペーサーの下でドラッグ＆ドロップします。同じセクションに入ったらOKです。画像ウィジェットの『コンテンツ』を開き、画像を選択から画像をアップロードして画像を挿入します。
・画像が入ったら、『スタイル』から画像の設定を行います。下記の値をそれぞれ入れます。
※画像の設定内容はこちら↓
配置：中央
幅：100
高さ：325
Object Fit:：カバー
・画像の下にスペーサーをいれます。これも同じセクション内にいれます。スペースの値は、『80』にします。
コンテンツエリア～サービスメニュー～
・新しくセクションを追加します。セクションが追加できたら、見出しを入れます。見出しの設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78
・タイトルには、『Menu』と入れます。HTMLタグは『span』に設定します。
・『Menu』の見出しの下にもう一つ見出しを入れます。これも同じセクション内に入れます。『スタイル』の設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.9
文字色：747474
・次は『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『上：-15』に設定しましょう。
『コンテンツ』からタイトルに『メニュー』と入れてください。HTMLタグは『H2』にします。
・メニューの見出しの下にスペーサー(スペース：50)を入れましょう。『メニュー』の見出しと同じセクション内に入れます。
・新しいセクションを追加します。セクションが入ったら、カラムアイコンを右クリックして『複製』します。
・セクションが入ったら、左カラムから設定します。左カラムに画像ウィジェットを入れてあしらいを挿入します。あしらいが入れられたら、『スタイル』を開き『幅：10』に設定します。
・新しくセクションを追加してウィジェット一覧を開き、『見出しウィジェット』をあしらいの下に入れます。スタイルの設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：25
太さ：600 (Semi Bold)
Line Height：1.7
・コンテンツを開いてタイトルに『オーガニック肌活フェイシャル』と入れます。HTMLタグは、『H3』に設定します。
・『コンテンツエリア①サービス内容』に戻って『天然由来のオーガニック～』の文章が入ったテキストエディターをコピーして『オーガニック肌活フェイシャル』の見出しの下に入れます。見出しの上で右クリックをしてコンテキストメニューを開き、『貼り付け』を選択すると見出しの下にテキストエディターが入ります。
・『コンテンツ』から既に入っている文章を削除して以下の文章を入れます。
天然由来のオーガニック化粧品を使用し、肌の奥から潤いを届けるベーシックなフェイシャルコース。毛穴汚れやくすみをやさしくケアし、透明感とツヤのある素肌へ導きます。ナチュラル志向の方や敏感肌の方にもおすすめです。
・次は、右カラムに画像ウィジェットを入れます。ウィジェット一覧を開いて画像ウィジェットを挿入し、『画像を選択』から画像をアップロードして設定します。画像が入ったら、『スタイル』を開いて配置設定を『中央』にします。
・画像が入ったら、下にある空セクションにスペーサーを入れます。スペースの値は『50』にします。
・2つ目のメニューのセクションを作成します。『オーガニック肌活フェイシャル』のセクションを『複製』して使用します。『オーガニック肌活フェイシャル』のセクションのピンクのタブの上で右クリックをしてコンテキストメニューを開き、『複製』を選択します。複製できたら、スペーサーの下に移動させましょう。これで2つ目のメニューセクションのベースができました。
・次は、左カラムのカラムアイコンをクリックして右カラムの方へドラッグして左右のカラムを入れ替えます。入れ替えられたら画像をクリックして選択し、『コンテンツ』から画像を変更しましょう。
・右カラムの編集を行います。まずは、見出しから編集します。見出しのタイトルを『リフトアップ筋膜フェイシャル』にします。その下のテキストエディターには、以下の文章を入れます。
表情筋や筋膜にアプローチするハンド技術で、たるみ・むくみに働きかけるエイジングケアコース。深いリラックスと引き締め効果が同時に得られる、人気の高いメニューです。施術後はフェイスラインがすっきり、明るい印象に。
・テキストエディターの下に新しくセクションを追加してスペーサー(スペース：80)を入れて、コンテンツエリア②のデザインは完成です。
コンテンツエリア～料金～
・メニューの料金表を作成します。新しくセクションを追加してスペーサーを入れます。スペースの値は『80』に設定します。スペーサーが入ったらセクションに背景色を設定します。セクションのピンクタブをクリックしてセクションを選択したら『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。斜線入りの正方形をクリックするとします。『カラーピッカー』が表示されるので『色コード』の入力フォームに『EDE8E5』と入れましょう。
・『コンテンツエリア②』に戻って『メニュー』の見出しが入ったセクションをコピーして、背景色を設定したセクションのピンクタブの上で右クリックして貼り付けます。
・コピーして貼り付けたセクションに背景色を設定します。先程と同じようにセクションのピンクタブをクリックしてセクションを選択したら『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。斜線入りの正方形をクリックするとします。『カラーピッカー』が表示され右上にある『Color Sampler』を選択します。Color Samplerを選択すると、マウスのカーソルがスポイトマークになります。『EDE8E5』のカラーに設定したセクションにカーソルを合わせてクリックするとカラーサンプルが出てくるので『EDE8E5』のカラーを選択します。
・次は見出しを編集します。『Menu』は『Price』に、『メニュー』は『料金』にタイトルをそれぞれ変更します。
・新しくセクションを追加してスペーサー(スペース：50)を入れたらこのセクションも背景色を設定します。セクションのピンクタブをクリックしたら『スタイル』からカラーピッカーを開き、『Color Sampler』で『EDE8E5』のカラーに設定したセクションにカーソルをもっていきます。背景色が入った部分をクリックしたら上のセクションと同じ色に設定できます。
・次は、このセクション内にあるカラムの背景を変更します。次は、セクション内のカラムの背景を変更します。カラムアイコンをクリックしてカラムをクリックすると左パネルにカラムの設定画面が出てきます。セクションの背景設定と同じように『スタイル』を開いて『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。『カラーピッカー』を開き、グラデーションパネルの白い丸をドラッグして左上端にもっていくと下の色コード入力フォームに自動で『FFFFFF』と表示されたらOKです。
・新しくセクションを追加します。ウィジェット一覧から見出しウィジェットをスペーサーの下にいれます。(スペーサーと同じセクションに入れてください。) 見出しの『スタイル』設定は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：20
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474
・コンテンツからタイトルを入れます。『オーガニック肌活フェイシャル (60分)』と入れます。HTMLタグは『H3』に設定します。
・見出しの下に『区切り』を入れます。『コンテンツエリア①』にいれた『区切りウィジェット』をコピーして貼り付けます。『コンテンツエリア①』の見出し『フェイシャルエステ』の下にある『区切りウィジェット』を選択して右クリックでコンテキストメニューを開き、コピーします。コピーできたら編集中のセクションに戻って『オーガニック肌活フェイシャル(60分)』の見出しを右クリックして貼り付けを選択します。
・次は『オーガニック肌活フェイシャル(60分)』の見出しを複製して区切りウィジェットの下に移動させます。コンテンツからタイトルを『￥6,000』に変更しましょう。HTMLタグは『span』にします。
・『オーガニック肌活フェイシャル(60分)』の見出しの上にあるスペーサーを複製して『￥6,000』の下に移動させます。
・その下にある空のセクションにスペーサー(スペース：50)を入れ、セクションの背景を設定します。ピンクタブをクリックし、セクションを選択したら『スタイル』からカラーピッカーを開きます。『Color Sampler』で『EDE8E5』のカラーに設定したセクションにカーソルもっていき、クリックして同じ色に設定しましょう。
・『オーガニック肌活フェイシャル(60分)』の料金が入ったセクションを複製します。複製したセクションはスペーサーの下に移動させます。
・移動させられたら『オーガニック肌活フェイシャル(60分)』を『リフトアップ筋膜フェイシャル (60分)』に、『￥6,000』を『￥8,000』に見出しをそれぞれ変更しましょう。
・それぞれ変更できたらその上にあるスペーサーが入ったセクションを複製して『リフトアップ筋膜フェイシャル (60分)』の料金が入ったセクションの下に移動させます。スペーサーのスペースの値を『80』に設定します。
コンテンツエリア～よくあるご質問～
・新しくセクションを追加してスペーサー(スペース：80)を入れます。一度『サービスメニュー』のコンテンツエリアに戻って『メニュー』の見出しが入ったセクションをコピーし、スペーサーを入れたセクションを右クリックして貼り付けます。
・『Menu』→『Q＆A』、『メニュー』→『よくあるご質問』にそれぞれ見出しを変更します。
・また新しくセクションを追加してウィジェット一覧の『一般』から『切り替え』のウィジェットを入れます。挿入した切り替えウィジェットをクリックして設定をしていきます。
・左パネルから『スタイル』を開きます。まずは、『切り替え』の『枠線の幅』の値を『1』にします。その下にある『枠線の色』の項目に『🌐』と『赤い斜線が入った正方形』が並んでいるので『赤い斜線が入った正方形』をクリックしてカラーピッカーを開きます。カラーピッカーを開いたら下の色コードの入力フォームに『E4E4E4』と入力してください。
・『スペースの間隔』は『10』に設定します。
・『切り替え』設定の下にある『タイトル』をクリックすると『タイトル』の設定画面が表示されます。まずは『色』を変更します。『水色の正方形』をクリックしてカラーピッカーを開き、色コードの入力フォームに『747474』と入力します。
・『有効時の色』を変更します。『黄緑色の正方形』をクリックしてカラーピッカーを開き、色コードの入力フォームに『C59F78』と入力します。
・次は『タイポグラフィ』を設定します。
※タイポグラフィの設定内容はこちら↓
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：2
・次は、『スタイル』内の設定項目である『コンテンツ』の設定を行います。『コンテンツ』をクリックしたら『色』を設定します。『グレーの正方形』からカラーピッカーを開き、色コードの入力フォームに『747474』と入れます。その下の『タイポグラフィ』は以下のように設定します。設定が終わったら、『スタイル』の項目の設定は完了です。
※タイポグラフィの設定内容はこちら↓
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：1.7
・次はパネルの左上にある『コンテンツ』を開いて設定していきます。
『コンテンツ』の設定画面が表示されたら上に『▶切り替え』というタイトルが出ていると思います。その下にある『項目を切り替え』という項目に『切り替え #1』『切り替え #2
』とそれぞれブロックがあります。まずは、『切り替え #1』をクリックしてみましょう。
クリックすると『切り替え #1』の設定画面が出てきます。『タイトル』『コンテンツ』という項目があるので設定していきます。それぞれ、入力フォームに『切り替え #1』や『吾輩は猫である。～』とデフォルトで文字が入っていますが、削除してから文字を入れましょう。
・切り替え #1
『タイトル』→メイクはしたまま来店しても大丈夫ですか？
『コンテンツ』→はい、大丈夫です。クレンジングから丁寧に施術いたしますので、メイクを落とさずそのままご来店ください。お肌の状態を見ながら、必要に応じてケア内容を調整いたします。
・切り替え #2
『タイトル』→どのくらいの頻度で通えばいいですか？
『コンテンツ』→お肌の状態や目的によって異なりますが、最初は2〜3週間に1回のペースが理想的です。肌の土台が整ってきたら、月1回のメンテナンスでも効果を維持しやすくなります。
・『切り替え #2』の下に『＋ 項目を追加』というボタンがあるのでそれをクリックしてもう一つ切り替えを増やします。クリックしたら３つめの切り替えの設定画面が表示されるので同じように設定していきます。
『タイトル』→敏感肌やアレルギーがありますが施術は受けられますか？
『コンテンツ』→
はい、可能です。当サロンではオーガニックや自然由来のやさしい製品を使用しておりますが、事前にしっかりとカウンセリングを行い、お肌の状態に合った施術をご提案いたします。気になることがあれば、遠慮なくご相談ください。
・下に新しくセクションを追加してスペーサーを入れます。スペースの値は『100』に設定ます。これでデスクトップ版のデザインは完成です。左パネルの『更新』をクリックしてデザインを保存しましょう。『更新』できたら、左パネルの『<』のタブをクリックしてパネルを非表示にし、デザインをフルスクリーンで確認しましょう。デザインや誤字脱字など修正が無ければ、『タブレット版』の編集をしていきます。
レスポンシブ設定～タブレット版～
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックしてタブレット版の編集画面に移ります。
・TOPエリアはそのままで大丈夫です。まずは、TOP画像の下にあるスペーサーのスペースの値を『50』に変更します。
・フェイシャルエステの下にある『区切り』をコンテンツを開いて『幅：55』に変更します。
・同じセクション内にある画像の高さも調節していきます。画像をクリックして選択し、『スタイル』を開いて『高さ：280』にします。それができたら画像下のスペーサーのスペースの値を『50』に変更します。
・サービスメニューのコンテンツエリアにいきます。メニューの見出しの下にあるスペーサーをスペースの値『30』に変更します。
・その下の『オーガニック肌活フェイシャル』のセクションを編集します。まずは『あしらい』をクリックして選択し、『スタイル』から『幅：15』に設定します。次に『テキストエディター』のマージンを設定します。『天然由来のオーガニック・・・』のテキストエディターをクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・右カラムの画像の高さを設定します。画像をクリックして選択し、『スタイル』から『高さ：380』に設定します。『Object Fit』は『カバー』にしましょう。
・オーガニック肌活フェイシャルのセクションの下のスペーサーを『スペース：30』に設定します。
・次は『リフトアップ筋膜フェイシャル』のセクションを編集します。左カラムの画像の高さを『スタイル』から『高さ：380』に設定します。『Object Fit』は『カバー』にしましょう。
・右カラムの編集をします。『あしらい』をクリックして選択し、『スタイル』から『幅：15』に設定します。次に『テキストエディター』のマージンを設定します。『表情筋や筋膜にアプローチ～・・・』のテキストエディターをクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・『リフトアップ筋膜フェイシャル』のセクションの下にあるスペーサーを『スペース：50』にします。
『オーガニック肌活フェイシャル』のセクションと設定の流れは同じなので、わからなければ過去の画像を参照してください。
・次は、『料金』のコンテンツエリアを編集します。まずは『オーガニック肌活フェイシャル(60分)』のセクション内にあるカラムをクリックして『高度な設定』から『マージン』を設定します。リンクを解除せずに『左：15』に設定すると他の値も連動して『15』になります。マージンを設定してカラムの外側に余白ができたらOKです。
・『オーガニック肌活フェイシャル(60分)』のセクションの下にあるスペーサーを『スペース：30』にします。
・『リフトアップ筋膜フェイシャル(60分)』のセクションのカラムにも余白を入れます。先程と同じように。『高度な設定』から『マージン』の値をすべて『15』にします。設定方法がわからなければ、先ほどの画像を参照してください。
・『リフトアップ筋膜フェイシャル(60分)』のセクションの下にあるスペーサーを『スペース：50』にします。
・次はよくあるご質問のコンテンツエリアを編集します。『よくあるご質問』の見出しが入ったセクションの上にあるスペーサーを『スペース：50』に設定します。次に『よくあるご質問』の見出しの下にあるセクションを『スペース：30』にします。
・『よくあるご質問』のコンテンツエリアの下にある、一番下のスペーサーを『スペース：80』に設定します。
これでタブレット版の設定は終了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
レスポンシブ設定～スマートフォン～
・画面上の黒いバーから『スマートフォン』のアイコンをクリックしましょう。画面が縦長になります。
・TOPから編集していきます。まずは、『フェイシャル』の見出しをクリックしてサイズを変更します。『スタイル』から『タイポグラフィ』を開いて『サイズ：30』に変更します。それができたらTOPの下にあるスペーサーを『スペース：30』に変更します。
・『サービス内容』のコンテンツエリアにある『フェイシャルエステ』の見出しをタイポグラフィ設定から『サイズ：55』、その下の『区切り』は『コンテンツ』から『幅：80』に設定します。
・『天然由来のオーガニック～・・・』のテキストエディターは、『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・次に『スタイル』から『タイポグラフィ』を開いて『サイズ：15』にします。テキストエディターの下にあるスペーサーは『スペース：10』にします。
・その下の画像を選択し、画像の高さの値を『スタイル』から『195』に設定します。続けて画像下のスペーサーは『スペース：30』にします。
・『サービスメニュー』のコンテンツエリアにある『メニュー』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更します。
・次は『オーガニック肌活フェイシャル』の見出しをタイポグラフィから『サイズ：22』にします。その下のテキストエディターもタイポグラフィから『サイズ：15』に変更します。同じセクション内にある画像の高さの値を『スタイル』から『高さ：195』にします。
・『リフトアップ筋膜フェイシャル』のセクションを編集します。ピンクタブをクリックしてセクションを選択し、『高度な設定』を開きます。『レスポンシブ』をクリックすると『カラムを逆にする(Tablet Portrait)』『カラムを逆にする(モバイル縦向き)』という項目があります。『カラムを逆にする(モバイル縦向き)』の横にあるボタンをクリックして『はい』にします。
・『リフトアップ筋膜フェイシャル』の見出しをタイポグラフィから『サイズ：22』にします。その下のテキストエディターもタイポグラフィから『サイズ：15』に変更します。同じセクション内にある画像の高さの値を『スタイル』から『高さ：195』にします。
・『リフトアップ筋膜フェイシャル』のセクション下のスペーサーは『スペース：20』にします。
・料金のコンテンツエリアを編集します。『料金』の見出しが入ったセクションの上にあるスペーサーを『スペース：30』にします。次は『料金』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更します。その下のスペーサーも『スペース：30』にします。
・『オーガニック肌活フェイシャル(60分)』の見出しの上にあるスペーサーを『スペース：10』にします。『オーガニック肌活フェイシャル(60分)』の見出しはタイポグラフィから『サイズ：18』に変更します。その下の『区切り』は『コンテンツ』から『幅：80』に設定します。
・『￥6,000』下にあるスペーサーを『スペース：20』にしたら、その下のセクションに入っているスペーサーも『スペース：20』に変更します。
・『リフトアップ筋膜フェイシャル(60分)』のセクションも『オーガニック肌活フェイシャル(60分)』と同じ値でそれぞれ設定していきます。『オーガニック肌活フェイシャル(60分)』の設定を見返しながら設定してください。それができたら『リフトアップ筋膜フェイシャル(60分)』のセクション下のスペーサーは『スペース：30』に設定してください。
・最後は『よくあるご質問』のセクション設定です。『Q＆A』の見出しの上にあるスペーサーを『スペース：30』に設定します。
・『よくあるご質問』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更します。
・質問と回答が入った『切り替え』のウィジェットをクリックして選択したら、『コンテンツ』のサイズを『タイポグラフィ』から変更します。まずは『スタイル』を開いて『コンテンツ』を選択します。『コンテンツ』の設定から『タイポグラフィ』を開いて『サイズ：15』に設定を変更します。
・『切り替え』の下にあるスペーサーを『スペース：50』に設定したら『スマートフォン版』の編集は終了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
・これで『フェイシャル』のデザインが完成です。画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。左パネルの一番下のアイコンが並んでいる所に『👁️(変更をプレビュー)』のアイコンがあるのでそれをクリックします。するとタブバー(Googleのタブバー)に新しいタブが出てプレビューを見ることができます。確認出来たら、左のタブをクリックしてメニューページのElementorの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。プレビューのタブは削除しておいてください。
