【第6章】下層ページ～LILASについて～③
レスポンシブ設定～タブレット版～
・パネルの一番下のレスポンシブモード』のボタンをクリックし、画面の一番上に黒いバーから真ん中の『タブレット』のアイコンをクリックしてタブレット版の編集画面に移ります。
・TOPエリアはそのままで大丈夫です。まずは、TOP画像の下にあるスペーサーのスペースの値を『50』に変更します。
・『コンセプト』コンテンツエリアの左カラムを編集します。『concept』の見出しをクリックしたら、『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『左：15』に設定しましょう。
・その下の『ナチュラルに、～』の見出しも『高度な設定』から『マージン』の値を『左：15』に設定します。マージンが設定できたら、『スタイル』の『タイポグラフィ』から文字のサイズを『25』にします。
・右カラムの『テキストエディター』をクリックし『高度な設定』から『マージン』の値を『右：15』に設定します。
・コンセプトのコンテンツエリアの下にあるスペーサーを『スペース：50』に値を変更します。
・スペーサーの下の画像をクリックして『スタイル』から『高さ：280』に設定します。それができたら、画像下の『スペーサー』を『スペース：50』に変更します。
・次は『ご挨拶』のコンテンツエリアを編集します。『ご挨拶』の見出しの下にある『あしらい』の幅を変更します。『あしらい』をクリックして『スタイル』を開いて『幅：8』に設定してください。
・『当サロンの特徴』のコンテンツエリアにいきます。『Point』の見出しの上にあるスペーサーのスペースを『50』にします。
・次は、『01セクション』を編集します。左カラムの『肌に優しいオーガニックケア』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：22』に変更します。見出しの下にある『お肌に直接触れるもの～』の『テキストエディター』をクリックして『高度な設定』から『マージン』を設定します。一番右の『
』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・右カラムの画像の高さを調節します。画像をクリックして『スタイル』→『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。
・次は、『02セクション』です。『01カラム』と同じように左カラムの画像の高さを調節します。画像をクリックして『スタイル』→『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。※『02セクション』、『03セクション』は『01セクション』と編集の流れや方法が同じなので、わからなければ上の画像を見ながら編集していきましょう。
・右カラムの編集をします。『完全個室で心からくつろげる』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：22』に変更します。見出しの下にある『当サロンは完全個室となっており～』の『テキストエディター』をクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。元々入っていた設定は消して大丈夫です。
・『03セクション』も同じように設定していきます。左カラムの『確かな技術と癒しの手』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：22』に変更します。見出しの下にある『すべてのお客様に寄り添うために～』の『テキストエディター』をクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。元々入っていた設定は消して大丈夫です。
・右カラムの画像の高さを調節します。画像をクリックして『スタイル』→『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。
・『03セクション』の下にあるスペーサーを『スペース：50』にします。
・『お客様の声』のコンテンツエリアにいきます。各カラムに入っている画像の幅を変更します。『画像』をクリックして選択し、『スタイル』から『幅：55』にそれぞれ設定します。
・3つ並んだカラムの下にあるスペーサーを『スペース：50』にします。
・『Q＆A』の見出しの上にあるスペーサーを『スペース：50』にします。
・『よくあるご質問』のコンテンツエリアの下にある、一番下のスペーサーを『スペース：80』に設定します。
これでタブレット版の設定は終了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
レスポンシブ設定～スマホ版～
・画面上の黒いバーから『スマートフォン』のアイコンをクリックしましょう。画面が縦長になります。
・TOPから編集していきます。まずは、『LILASについて』の見出しをクリックしてサイズを変更します。『スタイル』から『タイポグラフィ』を開いて『サイズ：30』に変更します。それができたらTOPの下にあるスペーサーを『スペース：30』に変更します。
・コンセプトのコンテンツエリアにいきます。『ナチュラルに、美しく。～』の見出しをサイズ変更します。見出しをクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：20』にします。
・見出しの下の『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』にします。次に『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。元々入っていた設定は消して大丈夫です。
・テキストエディターの下にあるスペーサーを『スペース：30』に設定します。
・スペーサーの下にある画像の高さを調節します。画像をクリックして『スタイル』→『高さ：165』にします。
・画像の下にあるスペーサーを『スペース：30』に設定します。
・その下の背景色が付いているセクション内にあるスペーサーを『スペース：30』に設定します。
・『ご挨拶』のコンテンツエリアにいきます。『ご挨拶』の見出しやあいさつ文のテキストエディターが入ったカラムの『カラムアイコン』をクリックして『高度な設定』から『マージン』を設定します。一番右の『🔗』はクリックせず、リンクさせたまま『上：15 右：15 下：15 左：15』に設定します。
・『Message』の上のスペーサーを『スペース：10』に設定します。
・『ご挨拶』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更したら、見出しの下にあるスペーサーを『スペース：10』に設定します。
・『テキストエディター』の下にあるスペーサーを『スペース：10』に設定します。
・その下の背景色が付いているセクション内にあるスペーサーを『スペース：30』に設定します。
・『当サロンの特徴』のコンテンツエリアにいきます。『Point』の見出しの上にあるスペーサーを『スペース：30』に設定します。
・『当サロンの特徴』の見出しをクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：25』にします。
・『当サロンの特徴』の見出しの下にあるスペーサーを『スペース：10』にします。
・『01セクション』を編集します。見出しの下にある『お肌に直接触れるもの～』の『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』に変更します。その下の画像の高さを調節します。画像をクリックして『スタイル』→『高さ：195』にします。
・『01セクション』の下にあるスペーサーを『スペース：10』に設定します。
・『02セクション』を編集します。一番上の画像の高さを調節します。画像をクリックして『スタイル』→『高さ：195』にします。次に『当サロンは完全個室となっており～』の『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』に変更します。
・『02セクション』のピンクタブをクリックしてセクションを選択し、『高度な設定』を開きます。『レスポンシブ』をクリックすると『カラムを逆にする(Tablet Portrait)』『カラムを逆にする(モバイル縦向き)』という項目があります。『カラムを逆にする(モバイル縦向き)』の横にある『いいえ』のボタンをクリックすると『はい』になります。『はい』にすると画像とテキストが入ったカラムを逆に並べることができます。
・『02セクション』の下にあるスペーサーを『スペース：10』に設定します。
・『03セクション』を編集します。見出しの下にある『すべてのお客様に寄り添うために～』の『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』に変更します。その下の画像の高さを調節します。画像をクリックして『スタイル』→『高さ：195』にします。
・『03セクション』の下にあるスペーサーを『スペース：30』に設定します。
・『お客様の声』のコンテンツエリアにいきます。『Voice』の見出しの上にあるスペーサーを『スペース：30』に設定します。
・『Voice』の下にある『お客様の声』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更したら、見出しの下にあるスペーサーを『スペース：10』に設定します。
・カラムの中にある画像をクリックして『スタイル』を開き『幅：45』に設定します。
・お客様の『感想』が入った『テキストエディター』をクリックして『スタイル』から『タイポグラフィ』を開いて『サイズ：15』に変更します。画像とテキストエディターの設定を他の２つも同じ流れで行います。
・それぞれのカラムを設定できたら３番目のカラムの下にある『スペーサー』を『スペース：30』に変更します。
・『よくあるご質問』のコンテンツエリアにいきます。『Q＆A』の見出しの上にあるスペーサーを『スペース：30』に設定します。
・『Q＆A』の下にある『よくあるご質問』の見出しをクリックして選択し、『スタイル』の『タイポグラフィ』から『サイズ：25』に変更したら、見出しの下にあるスペーサーを『スペース：10』に設定します。
・質問と回答が入った『切り替え』のウィジェットをクリックして選択したら、『コンテンツ』と『タイトル』のサイズを『タイポグラフィ』から変更します。まずは『スタイル』を開いて『コンテンツ』を選択します。『コンテンツ』の設定が出てきたら『タイポグラフィ』を開いて『サイズ：15』に設定を変更します。次は、『タイトル』を選択して『タイポグラフィ』から『サイズ：15』にします。
・『切り替え』の下にあるスペーサーを『スペース：50』に設定したら『スマートフォン版』の編集は終了です。パネルの『更新』をクリックして編集内容を保存しておきましょう。左パネルの枠線の中央辺りにある『<』をクリックすると左パネルが消えて全体図を確認することができます。全体図を確認しながらデザインのバランスを整えたりします。
・これで『LILASについて』のデザインが完成です。画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。左パネルの一番下のアイコンが並んでいる所に『
(変更をプレビュー)』のアイコンがあるのでそれをクリックします。するとタブバー(Googleのタブバー)に新しいタブが出てプレビューを見ることができます。確認が終わったら左のタブ(編集画面のタブ)をクリックしてElementorの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。
・Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。
