【第6章】下層ページ～LILASについて～①
・固定ページ一覧から『LILASについて』を選択します。『LILASについて』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左に『固定ページ 設定』と表示されているパネルがあります。パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から一番左の『⚙️(歯車マーク)』の設定ボタンをクリックしましょう。すると『一般設定』が表示されます。一般設定の一番下に『固定ページレイアウト』の項目があり、最初は『デフォルト』になっていますが、枠線をクリックすると設定を変更できるので『Elementor Full Width』にしましょう。
『
』と同じ黒いバーの一番右にピンク色のボタン『更新』があるのでクリックしておきましょう。動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
TOP画像の設定
※ここからページのデザイン・設定を行っていきます。操作を行っている途中で間違えたり
やり直したい場合は、パソコンのキーボードの【Ctrl】＋【Z】で前に戻ることができます。【Ctrl】＋【Z】で戻らない場合は、左パネルの枠線の中央辺りにある『<』でパネルを非表示にしてから【Ctrl】＋【Z】で戻る場合があります。
・次は、ページのトップを設定していきます。ヘッダーの下にあるグレーの点線のボックスの中に『＋』のボタンがあります。カーソルを＋に持っていくと『新しいセクションの追加』と出てきます。セクションを追加したいので『＋』をクリックします。
※セクションとは・・・ページの大きな区切り(エリア)を作るのものです。例えば、『トップ画像のエリア』『サービス紹介のエリア』など、ページ全体をブロック分けしたものをセクションと言います。
・『＋』をクリックすると、『SELECT YOUR STRUCTURE』の文字の下にセクションのレイアウトが出てきます。使用したいセクションのレイアウトを選択することができます。今回は上段の一番左、区切りの入っていないセクションを使用します。このセクションレイアウトが基本になります。別のレイアウトを使用する場合はその都度指示を入れます。
・セクションにスペーサーを入れます。スペースは『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
・タイポグラフィの設定ができたら、『コンテンツ』を開いて『見出し』のタイトルに『LILASについて』と入力します。ＨHTMLタグは『H1』に設定します。
左パネルの『スタイル』から背景色を設定します。文字色の設定項目の上にある『普通』をクリックします。その下『Background Type』の文字の右側にあるブラシマークの『クラシック』をクリックします。『色』の設定が出てきたら■のアイコンをクリックして、カラーピッカーを開きます。『FFFFFF』に設定します。
・TOP画像の下にあるセクションにスペーサーを入れます。『スペース：80』に設定します。
コンテンツエリア～コンセプト～
・次は、『コンセプト』のコンテンツエリアを作成していきます。新しくセクションを追加するのですが、今回は、セクションのレイアウト選択画面でカラムが２つに分かれたセクションを選択します。セクションが選択できたらまずは『左カラム』からデザインを作成していきます。
・左カラムの中に『見出し』を入れます。設定は以下の通りです。
【スタイル】
配置：左
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78
・『スタイル』の設定ができたら、『コンテンツ』から『タイトル』に『concept』と入れて『HTMLタグ』は『span』に設定します。
・『concept』の下にもう一つ見出しを入れたいので、新しくセクションを追加して見出しウィジェットを『concept』の下にドラッグ＆ドロップで入れ、左パネルからスタイルを開いて設定します。『見出し』の『スタイル』の設定は以下の通りです。
【スタイル】
配置：左
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.9
文字色：747474
・『コンテンツ』から『タイトル』を入れます。
【コンテンツ】
タイトル：
『ナチュラルに、美しく。<br>
わたしをほどく、やさしいエステ』
HTMLタグ：H2
※<br>とは・・・タイトルの文章の間に入っている『<br>』は、改行タグです。『見出し』では『Enter』での改行が使用できないので、改行したいときは<br>を使用します。
・左カラムのデザインができたら次は右カラムを作成していきます。右カラムに『テキストエディター』を入れます。設定は以下の通りです。
※テキストエディターの設定内容はこちら↓
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
文字色：747474
・『高度な設定』から『マージン』の設定をします。『右』『左』だけ値を入力したいので、一番右の『
』をクリックして、リンクを解除します。ボタンがグレーから白になれば個別に設定できるようになります。『右』の項目の値をボックス内の『▼』を押して『80』に設定します。『左』も同じように『80』に設定します。
次は、『コンテンツ』を開いてテキストボックスに以下の文章を入れます。
『肌が喜び、心がほぐれる。そんな自然体の美しさを大切にした、隠れ家のようなサロンです。オーガニック素材と植物の恵みにこだわり、完全個室の静かな空間で一人ひとりに丁寧なケアを。ここは、美を追い求める場所ではなく、あなた自身が整い、満たされていく場所。深呼吸するように、癒しと再生のひとときを。』
・テキストが入れられたらその下にスペーサーを入れます。『スペース：80』で設定しましょう。
・スペーサーの下に『画像』を入れます。新しくセクションを追加して『画像ウィジェット』を入れましょう。
・ウィジェットが入ったら『コンテンツ』から画像を選択し、『スタイル』から画像の設定を行います。『幅：100』『高さ：325』『Object Fit：カバー』に設定します。
・画像の下に新しくセクションを追加してスペーサー(スペース：100)を入れたらコンセプトのコンテンツエリアは完成です。
コンテンツエリア～ご挨拶～
・また新しくセクションを追加してスペーサー(スペース：50)を入れます。スペーサーが入ったらセクションに背景色を設定します。
・セクションのピンクタブをクリックするとセクションの設定が左パネルに出てきます。『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。『🌐』『／(赤い斜線の入った正方形)』があるので、斜線入りの正方形をクリックします。そうすると、『カラーピッカー』が表示されるので『色コード』の入力フォームに『EDE8E5』と入れましょう
・背景色が設定できたら、セクションを『複製』します。ピンクタブを右クリックし、コンテキストメニューから『複製』を選択しましょう。
・次は、セクション内のカラムの背景を変更します。カラムアイコンをクリックしてカラムをクリックすると左パネルにカラムの設定画面が出てきます。セクションの背景設定と同じように『スタイル』を開いて『色』の設定からカラーピッカーを開きます。カラーピッカーの一番下にある色コードの入力フォームに『FFFFFF』と入れます。
・カラムの背景が白になったら、スペーサーのスペースを『20』に設定します。
・新しくセクションを追加して見出しを入れます。白背景に設定したカラムの中に見出しを入れたいので、見出しウィジェットをドラッグ＆ドロップでスペーサーの下に入れます。見出しの設定は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78
・『コンテンツ』から『タイトル』を設定します。『Message』と入れましょう。HTMLタグは『span』にします。
・その下に見出しウィジェットを追加します。先程追加したセクション内の『＋』をクリックしてウィジェット一覧を開いて『見出しウィジェット』を『Message』の下に入れます。
・『コンテンツ』から『タイトル』に『ご挨拶』と入れ、HTMLタグは、『H2』にします。
・次はスタイルの設定をします。設定の内容は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.9
文字色：747474
・『高度な設定』から『マージン』の設定をします。『上』だけ値を入力したいので、一番右の『』をクリックして、リンクを解除します。ボタンがグレーから白になれば個別に設定できるようになります。『上』の項目の値を『-25』に設定します。
『ご挨拶』の見出しの下に『画像ウィジェット』を入れて『あしらい』を挿入します。『コンテンツ』の『画像の選択』からあしらいに使用する画像を選択します。
・あしらいが入れられたら、『スタイル』から『幅：5』に設定します。設定できたらあしらいの下に『スペーサー(スペース：10)』を入れます。
・ご挨拶の文章を入れていきます。スペーサーの下に『テキストエディター』を挿入し、以下の設定を行います。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
文字色：747474
【高度な設定】
一番右の『🔗』をクリックして、リンクを解除してから設定しましょう。
マージン：(右)50 (左)50
・テキストエディターに『コンテンツ』から以下の文章をいれます。
数あるサロンの中から当店のページをご覧いただき、誠にありがとうございます。
私たちのサロンは、“美を磨く隠れ家”をコンセプトに、日々頑張る皆さまがホッと一息つける場所でありたいという思いから誕生しました。
自然の力を大切にし、お肌や心にやさしいオーガニック素材を選び、ひとりひとりに合わせた丁寧な施術をご提供しています。完全個室のプライベート空間で、周りを気にせず、ゆったりとした時間をお過ごしいただけることも、当サロンの魅力のひとつです。
ただ外見を美しく整えるだけでなく、内側から整い、心まで軽くなるようなケアを目指しています。お客様の“心地よさ”を第一に、癒しと結果の両立にこだわり、スタッフ一同、誠心誠意対応させていただきます。
あなたの毎日が少しでも軽やかに、美しくなりますように。
そんな想いを込めて、皆さまのご来店を心よりお待ちしております。
※筆者は２画面でパソコン操作を行っているので、動画では文章を録画している画面外からコピーしてテキストエディターに貼り付けています。事前に作成するコンテンツエリアの内容を考えて、それができたらそこに入れる文章を用意し、デザインしていくという流れがスムーズに作業を進めるコツです。文章の内容は、『Chat GPT』を使用して考えることが多いです。
・ご挨拶の文章が入ったら、テキストエディターの下に『スペーサー(スペース：30)』を入れます。
・その下にある新しいセクションに『スペーサー(スペース：50)』を入れて、セクションの背景色を設定します。『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。カラーピッカーの『Color Sampler』で上のセクションの背景色が入った部分をクリックし、同じ色に設定します。設定できたら左パネルの『更新』をクリックしてデザインを保存しましょう。
