【第6章】下層ページ～LILASについて～②
コンテンツエリア～サロンの特徴～
・『サロンの特徴』のコンテンツエリアは『01セクション』『02セクション』『03セクション』と３つのセクションを組み合わせてデザインを作成します。
・新しくセクションを追加して『スペーサー(スペース：80)』を挿入します。
・その下に新しくセクションをもう一つ追加します。『ご挨拶のコンテンツエリア』に入っている『Message』の見出しをクリックして選択したら右クリックをしてコンテキストメニューを開き、『コピー』を選択します。コピーできたら追加した新しいセクション内のカラムの上で右クリックをして『貼り付け』してください。
・もう一度『ご挨拶のコンテンツエリア』に戻り、次は『ご挨拶』の見出しをコピーします。さっきコピーして貼り付けた見出しの上で右クリックをして『ご挨拶』の見出しを貼り付けます。新しいセクションに『Message』『ご挨拶』の順に縦に並んでいればOKです。
・では、貼り付けた見出しを編集していきます。『Message』を選択して『コンテンツ』
から『タイトル』を『Message』→『Point』に変更します。HTMLタグは、『span』にします。次は『ご挨拶』→『当サロンの特徴』に変更します。『当サロンの特徴』の下に新しいセクションを追加して『スペーサー(スペース：50)』を入れましょう。
・スペーサーが入れられたら、『01セクション』を作成するので新しくセクションを追加します。今回は、カラムが２つに分かれているセクションを選択してください。左のカラムからデザインしていきます。
・左カラムに『見出し』を入れます。設定は以下の通りです。
※見出し設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：40
太さ：800 (Extra Bold)
Line Height：1.7
文字色：3CA8A4
【コンテンツ】
タイトル：『01』
HTMLタグ：span
・新しくセクションを追加して『01』の見出しの下にもう一つ見出しを入れます。
設定は以下の通りです。見出しの設定の流れは、上の画像を参照してください。
※見出し設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：25
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474
【コンテンツ】
タイトル：『肌にやさしいオーガニックケア』
HTMLタグ：H3
・その下に『テキストエディター』を挿入し、文章を入れていきます。先程出した新しいセクションからウィジェット一覧を出して『テキストエディターウィジェット』をドラッグ＆ドロップで『肌にやさしいオーガニックケア』の下に入れます。テキストエディターの設定は以下の通りです。
※テキストエディター設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
段落間隔：6
文字色：747474
【高度な設定】
一番右の『
』をクリックして、リンクを解除してから設定しましょう。
マージン：(右)50 (左)50
【コンテンツ】
『お肌に直接触れるものだからこそ、安心・安全な素材選びにこだわっています。当サロンでは、オーガニックや自然由来の製品を使用し、植物の力で肌本来の美しさを引き出します。化学成分に頼らず、優しく、でもしっかりとケアすることで、敏感肌の方にも安心して通っていただけます。』
・左カラムのデザイン・設定は完了です。次は右カラムに画像ウィジェットを入れます。ウィジェットが入ったら『コンテンツ』の『画像の選択』から入れたい画像をアップロードして選択します『01セクション』のデザイン設定は完了です。『02セクション』と『03セクション』はこのセクションをベースに複製しながら作成していきます。
・『01セクション』の下にある空セクションに『スペーサー(スペース：50)』を入れます。スペーサーが入ったら、『01セクション』のピンクのタブの上で右クリックしてコンテキストメニューを開き、『複製』します。これが『02セクション』になります。『01セクション』の真下に複製されるので、ピンクタブをクリックしたままドラッグ＆ドロップでスペーサーの下に移動させます
・移動できたら、複製したセクションを『02セクション』の仕様にしていきます。まずはカラムの順番を左右逆にします。左カラムの左上にある『カラムアイコン』クリックしたまま右のカラムの方にドラッグするとカラムを入れ替えることができます。
・左カラムの画像を変更します。画像をクリックして『コンテンツ』から『画像の選択』でメディアライブラリを開き、画像のアップロード、選択を行いましょう。
・画像が変更できたら右カラムの見出しとテキストエディターを編集します。
変更内容は以下の通りです。
【見出し】
『01』→『02』
『肌にやさしいオーガニックケア』→『完全個室で心からくつろげる』
【テキストエディター】
『当サロンは完全個室となっており、静かな空間であなただけの時間をお過ごしいただけます。他のお客様と顔を合わせることなく、周囲を気にせずリラックス。自然を活かしたインテリアとアロマの香りに包まれながら、心からほぐれていくような空間をご用意しております。』
・『02セクション』の上にあるスペーサーが入ったセクションを複製して『02セクション』の下に移動させます。次に『02セクション』を複製してスペーサーの下に移動させます。これが『03セクション』になります。
・移動できたら『01セクション』と同じ形になるように左右のカラムを入れ替えます。
・『03セクション』の内容を変更していきます。まずは、左カラムから編集します。変更内容は以下の通りです。
【見出し】
『02』→『03』
『完全個室で心からくつろげる』→『確かな技術と癒しの手』
【テキストエディター】
『すべてのお客様に寄り添うために、経験豊富なスタッフが在籍。資格を持つプロフェッショナルが、お悩みや体質を丁寧にヒアリングし、あなたに合った施術をご提案いたします。ただ施術をするだけでなく、触れることそのものに癒しを込めて、肌と心にアプローチします。』
・次は、右カラムの画像を変更します。画像をクリックして『コンテンツ』から『画像の選択』でメディアライブラリを開き、画像のアップロード、選択を行いましょう。
・『03セクション』の下に新しくセクションを追加して『スペーサー(スペース：100)』を入れて『当サロンの特徴』のコンテンツエリアは完成です。左パネルの『更新』をクリックしてデザインを保存しましょう。
コンテンツエリア～お客様の声～
・新しいセクションを追加してスペーサーを入れます。
・スペーサーを入れたセクションのピンクタブをクリックしてセクションの設定から『スタイル』を開き、背景色を設定します。カラーピッカーを開いたら『Color Sampler』を選択します。『ご挨拶』の背景色(EDE8E5)が入ったセクションの上でクリックして同じ色を選択します。
・背景色が設定できたら、同じセクションのスペーサの下に『見出し』を入れます。『見出し』は、『当サロンの特徴』のコンテンツエリアのトップの見出しを使用します。『Point』と『当サロンの特徴』の２つの見出しをそれぞれコピーして貼り付けます。『Point』『当サロンの特徴』の順番になるように並べ、タイトルを変更します。
『Point』→『Voice』
『当サロンの特徴』→『お客様の声』
・『Voice』の上のスペーサーを右クリックして複製します。複製したスペーサーにカーソルを合わせると右上にペンマークが出ます。ペンマークにカーソルを合わせてドラッグ＆ドロップで『お客様の声』の下に移動させます。
・その下に新しくセクションを追加します。今回はカラムが３つに分かれているレイアウトを選択してください。
・セクションのピンクタブをスリックして左パネルから『スタイル』を開いて、セクションの背景を設定します。カラーピッカーを開いたら『Color Sampler』を選択します。『ご挨拶』の背景色(EDE8E5)が入ったセクションの上でクリックして同じ色を選択します。
・一番左のカラムからデザインしていきます。一番左のカラムの『カラムアイコン』をクリックし、カラムの背景色を設定します。パネルがカラムの編集画面になったら『スタイル』から『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。カラーピッカーを開いたら、色コードの入力フォームに『FFFFFF』と入れましょう。カラムが白背景になったらOKです。
・カラムの中にスペーサー(スペース：20)を入れます。新しくセクションを追加し、ウィジェット一覧を開いて『画像ウィジェット』をカラムの中に入れます。(スペーサーの下)
画像ウィジェットをクリックして左パネルの『コンテンツ』から『画像の選択』でメディアライブラリを開き、画像をアップロードして選択します。画像が選択できたら『スタイル』を開き、画像の『幅』の値を『40』に設定します。※画像のアップロード方法は、過去の説明文や画像を参照してください。
・画像の下に見出しを入れたいので、このセクションの下にある空セクション内の『＋』をクリックしてウィジェット一覧から見出しウィジェットを画像の下にドラッグ＆ドロップで入れます。見出しの設定は以下の通りです。
※見出しの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：15
太さ：600 (Semi Bold)
Line Height：2
文字色：747474
【コンテンツ】
タイトル：『20代 女性』
HTMLタグ：span
・見出しの下に次は『テキストエディター』を入れます。空セクションから見出しと同じように『テキストエディター』を挿入しましょう。テキストエディターの設定は以下の通りです。※細かな設定方法や手順は過去の文章や画像を参照してください。
※テキストエディターの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：1.7
段落間隔：6
文字色：747474
【高度な設定】
一番右の『🔗』をクリックして、リンクを解除してから設定しましょう。
マージン：(右)20 (左)20
【コンテンツ】
初めての来店でとても緊張していましたが、完全個室の空間でリラックスできました。オーガニックにこだわった施術に感動し、肌がツルツルになったのを実感できました！
次回も楽しみです。
・テキストエディターの下にスペーサー(スペース：20)を入れます。スペーサーが入れられたら、カラムアイコンをクリックして左カラムを選択状態にします。左パネルにカラムの編集画面が表示されたら『高度な設定』を開き『マージン』を『上：15 右：15 下：15 左：15』に設定します。これで左カラムのデザインは完了です。
・一旦、左カラムだけ残してセクション内の中央カラム、右カラムを削除します。それぞれのカラムのカラムアイコンを右クリックしてコンテキストメニューを開き、『削除』を選択します。２つのカラムを削除できたら残った左カラムを2回複製します。2回複製したら左カラムのデザイン・設定が引き継がれたままカラムが３つになると思います。
※結局削除するのになぜカラムを３つにしてデザインしたかというと、３つカラムが並んだ状態でデザインのバランスを見るためです。カラム1つの状態でデザインしてしまうと後でカラムを増やしたときに画像などの幅の調整をし直す必要が出てきます。なので『同じデザインのカラムを３つ並べる』と決まっていたら最初にカラムを３つ出し、一つデザインができたら他を削除して複製するやり方が効率よく作成できます。
・複製した２つのカラムを編集していきます。まずは中央カラム内にある『見出し』をクリックして左パネルの『コンテンツ』を開き『20代 女性』から『30代 女性』に変更します。感想部分のテキストエディターは以下の通りです。
【テキストエディター】
普段、なかなか自分の時間を取れないのですが、こちらでの施術は本当に特別で癒しの時間を頂いています。施術中も安心感があり、心からリラックスできます！疲れが取れてリフレッシュできました。
・右カラムは、画像と見出しもそのままで『テキストエディター』のみ内容を変更します。
以下の文章を入れます。
【テキストエディター】
忙しい日々の中で心と体をリセットしたくて来店しました。完全個室でまわりも静かなのでとても嬉しかったです。スタッフの方も優しいので安心感があります。また利用したいです。
・すべてのカラムが編集できたら、カラムが３つ入ったセクションの下にある空セクションにスペーサー(スペース：70)を入れます。セクションのピンクタブをスリックして左パネルにセクションの編集画面表示させます。『スタイル』を開き、背景色を変更します。カラーピッカーを開いたら『Color Sampler』を選択し、『お客様の声』が入ったセクションの上でクリックして同じ背景色(EDE8E5)に設定しましょう。ここまでできたら『お客様の声』のコンテンツエリアは完成です。左パネルの『更新』をクリックしてデザインを保存しましょう。
コンテンツエリア～よくあるご質問～
・サロンについての質問と回答を掲載する『よくあるご質問』のコンテンツエリアを作成します。
・新しいセクションを追加してスペーサー(スペース：80)を入れます。『当サロンの特徴』のコンテンツエリアに戻り、『Point』『当サロンの特徴』の見出しが入ったセクションのピンクのタブを右クリックしてコンテキストメニューを開き、コピーしましょう。コピーできたら今スペーサーを入れたセクションに戻ります。該当セクションのピンクタブの上で右クリックをし、『貼り付け』を選択するとスペーサーを入れたセクションの下にコピーしたセクションが入ります。
・セクション内の『見出し』を編集していきます。『Point』は『Q＆A』、『当サロンの特徴』は『よくあるご質問』に『コンテンツ』の『タイトル』から変更しましょう。HTMLタグは『span』にします。
・新しいセクションを追加してスペーサー(スペース：50)に設定します。
・もう一つ新しくセクションを追加します。左パネルのウィジェット一覧の『一般』の項目から『切り替え』というウィジェットをドラッグ＆ドロップで入れます。
・左パネルが『切り替えウィジェット』の編集画面になったら『スタイル』を開きます。
まずは、『切り替え』の『枠線の幅』の値を『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』の設定をします。『切り替え #1』の設定の下に『切り替え #2』のブロックがあるのでクリックしましょう。『切り替え #2』の設定画面が表示されたら『切り替え #1』と同じように設定します。
『タイトル』→敏感肌でも施術は受けられますか？
『コンテンツ』→
はい、当サロンではオーガニックや自然由来の製品を使用しており、敏感肌の方にもやさしい施術を心がけております。気になる症状などがある場合は、ご相談いただければ、状態に合わせたメニューをご提案いたします。
・『切り替え #2』の下に『＋ 項目を追加』というボタンがあるのでそれをクリックしてもう一つ切り替えを増やします。クリックしたら３つめの切り替えの設定画面が表示されるので同じように設定していきます。
『タイトル』→他のお客様と顔を合わせることはありますか？
『コンテンツ』→
当サロンは完全個室となっております。他のお客様とお時間が重ならないように配慮しておりますので人目を気にせず、ゆっくりお過ごしいただけます。
・切り替えの設定ができたら、新しいセクションを追加してスペーサー(スペーサー：100)を入れて、デスクトップ版の『LILASについて』のデザインは完成です。左パネルの『更新』をクリックしてデザインを保存しましょう。『更新』できたら、左パネルの『<』のタブをクリックしてパネルを非表示にし、デザインをフルスクリーンで確認しましょう。デザインや誤字脱字など修正が無ければ、『タブレット版』の編集をしていきます。
