【第5章】TOPページ制作実践③
レスポンシブ設定～タブレット版～
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックするとタブレット用の編集画面に切り替わります。そんなに大きくは編集しませんが、『スペーサーの幅』『画像の幅』などをタブレット仕様に設定していきます。編集・設定の操作方法は、デスクトップ版と一緒です。
・トップ画像の『ロゴ』の大きさを変えます。ロゴを選択して『スタイル』から幅『55』にします。
・ロゴの上の『スペーサー』を選択して『コンテンツ』からスペースを『110』、ロゴの下のスペーサーをスペース『130』に変更します。
・『サービス』のコンテンツエリアまでスクロールします。『オーガニック肌活フェイシャル』の文字サイズを『スタイル』→『タイポグラフィ』→『サイズ：25』にします。『体質改善デトックスボディ』の文字も同じ流れで『サイズ：25』に設定します。
・それぞれ見出しのサイズが変更できたら、見出しの下にある『あしらい』のサイズを変更します。あしらいをクリックして『スタイル』→『幅：10』にします。『フェイシャル』、『ボディ』両方ともあしらいのサイズを変更します。
・次は、『フェイシャル』・『ボディ』エリアに入っている画像の高さを調節します。それぞれ画像をクリックして『スタイル』→『高さ：380』にします。このままでは、画像が縦に伸びたままになるので高さ設定の下にある『Object Fit 』の項目を『カバー』にします。
フェイシャル・ボディどちらも設定できたらOKです。
・ボディのエリアの下にある『スペーサー』→『スペース：50』、バナーボタンの上にある『スペーサー』→『スペース：50』、
一番下の『スペーサー』→『スペース：80』にしましょう。
・ここまでできたら全体図を見てデザインのバランスを見ます。動画では、バランスを見てからスペーサーのスペース幅を変更しています。
☆『LILASについて』ボタン下→『スペース：50』
☆コンテンツエリア①LILASについての２枚の画像の下→『スペース：50』
☆フェイシャルエリアの上→『スペース：50』
・確認できたら左パネルの『更新』を押します。
レスポンシブ設定～スマホ版～
・画面上の黒いバーから『スマートフォン』のアイコンをクリックしましょう。画面が縦長になったと思います。デスクトップ版では横並びになっていたデザインがスマートフォン版では画面に合わせて縦並びになるのが特徴です。スマートフォン仕様の設定は、タブレットよりも少し設定する内容は多いですが、基本的に『文字サイズ』『画像の幅』『スペーサーの幅』を設定していきます。
・まずは、トップ画像のロゴのサイズを変更します。『サイズ→100』
・トップ画像の下のスペーサー→『スペース：40』
・『About』の下のあしらい→『幅：12』
・『完全個室のプライベート空間』→タイポグラフィ『サイズ：20』
・『完全個室のプライベート空間』の下『テキスト(ナチュラル美を兼ねる～)』
→タイポグラフィ『サイズ：15』
・『LILASについて』ボタン下のスペーサー→『スペース：30』
・２枚縦に並んでいる画像→それぞれカラムアイコンを選択します。『レイアウト』から『カラム幅(％)』の値を『50』に変更します。縦に並んでいた画像が横並びになったらOKです。
※下記の画像やDEMOサイトを参考にしてみてください。
・２枚の画像の下スペーサー→『スペース：30』
・フェイシャルの画像上スペーサー→『スペース：30』
・サービスエリアはデザインを少し変更します。フェイシャルデザインが入ったセクションのピンクタブをクリックします。『高度な設定』を開いて、『レスポンシブ』をクリックします。すると『カラムを逆にする(Tablet Portrait)』『カラムを逆にする(モバイル縦向き)』という項目があります。『カラムを逆にする(モバイル縦向き)』の横にあるボタンをクリックして『いいえ』から『はい』にします。『はい』にすると画像とテキストが入ったカラムを逆に並べることができます。
・逆にできたら中身のデザインを編集していきます。『Facial』の下のあしらいの幅を調整します。『あしらい』→『幅：12』
・『オーガニック肌活フェイシャル』→タイポグラフィ『サイズ：20』
・『テキスト(フェイシャルラインは～)』→タイポグラフィ『15』
・『詳しく見る』ボタン→高度な設定『マージン：(下)20』『🔗』をクリックして値のリンクを解除してから設定しましょう。
・画像の高さを調整します。画像を選択して『スタイル』から高さの値を『150』に変更します。
・ボディのセクションは、入れ替えずそのままのデザインを使用します。それ以外は、フェイシャルと同じように編集していきます。
・『あしらい』→『幅：12』
・『体質改善デトックスボディ』→タイポグラフィ『サイズ：20』
・『テキスト(枯れた木々に～)』→タイポグラフィ『15』
・『詳しく見る』ボタン→高度な設定『マージン：(下)20』『🔗』をクリックして値のリンクを解除してから設定しましょう。
・画像の高さを調整します。画像を選択して『スタイル』から高さの値を『150』に変更します。そのあと画像下のスペーサーを『幅：30』にします。
・バナーボタン上のスペーサーを『幅：30』にします。バナーボタンの見出し『ご利用の流れ』と『メニュー』のサイズをそれぞれ『サイズ：20』に変更します。サイズが変更出来たら、一番下のスペーサーを『幅：50』にします。最後は、パネルの『更新』をクリックして編集内容を保存しておきましょう。
・これでTOPページのデザインが完成です。画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。左パネルの一番下のアイコンが並んでいる所に『
(変更をプレビュー)』のアイコンがあるのでそれをクリックします。するとタブバー(Googleのタブバー)に新しいタブが出てプレビューを見ることができます。確認が終わったら今開いているタブを消して、TOPページの編集画面に戻ります。
『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。