【第5章】②TOPの作成－コンテンツエリアの作成

【第5章】TOPページ制作実践②

　コンテンツエリアの作成～ LILASについて～

　コンテンツエリアの作成
　～ LILASについて～

・次はトップ画像の下にスペーサーを入れます。コンテンツ(セクションの説明で出てきたエリアのこと)とコンテンツの間には基本的にスペーサーを入れます。ロゴマークを入れるときに出したトップ画像の下のセクションをそのまま使っていくので、該当するカラム内の『＋』をクリックして『スペーサー』のウィジェットをドラッグ＆ドロップで選択中のセクションのカラムに入れます。左サイドバーのコンテンツからスペーサーの幅を『100』に設定します。コンテンツの後に入れるスペーサーは大きめの幅で設定します。

・スペーサーが入れられたら、次のコンテンツエリアを作っていくので、その下に新しくセクションを入れます。スペーサーの下の点線枠内の『＋』をクリックして入れたいセクションのレイアウトを選択します。1段目の一番左のセクションを選択します。

・セクションが出てきたらカラム内の『＋』をクリックしてウィジェットを挿入します。今回は『基本』の項目から『見出し』を入れます。ドラッグ＆ドロップで見出しのウィジェットを入れると水色で『ここに見出しテキストを追加』と出てきたらOKです。

・左パネルに見出しの編集画面が出ているのでまずは『スタイル』タブを選択します。配置は『中央』に設定します。

・次に『タイポグラフィ』の設定をします。タイポグラフィとは、文字のフォントや大きさを設定する項目です。タイポグラフィの項目の右側に『』『』のマークが並んでいると思います。『』で設定ができるのでペンマークをクリックしましょう。

・まずは、フォントを設定します。フォントの選択ボックスをクリックすると一番上に検索窓が出てくるのでそこに『jp』と入力しましょう。すると『Noto Serif JP』というフォントがでてくるのでそれを選びます。その下にある項目、サイズは『15』、太さは、『600 (Semi Bold)』、Line Heightは『1.7』に設定します。今設定しなかった項目は、触らずデフォルトのままで大丈夫です。設定ボックスの外をクリックするとタイポグラフィの設定が消えます。

・次に、見出し設定の一番下にある『文字色』を変更します。初期設定では『』『■(水色の正方形)』が文字色の項目の右側にあると思います。水色のの正方形をクリックするとカラーピッカーが出てくるので、それを使って色を変更します。カラーピッカーの一番下に色コードの入力フォームがあるので、『#C59F78』と入力します。

※見出し設定のまとめはこちら↓

【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：15
太さ：600 (Semi Bold)
Line Height：1.7
文字色：C59F78

【コンテンツ】
HTMLタグ：span

・ここまで設定したら、『スタイル』タブの左横にある『コンテンツ』から文字を入れます。『ここに見出しテキストを追加』と書かれたテキストボックスがあるので、中の文字を消して『About』と入力します。その下にある『HTML タグ』の項目は、『span』に設定しておきましょう。

・次は、見出しの下にあしらい(装飾)を入れます。また下のグレーの点線枠からセクションを出します。あしらいは画像で入れるので、カラムの中に『画像ウィジェット』を挿入しましょう。カラム内の『＋』をクリックしたら『基本』の項目から『画像』のウィジェットを選択します。

・左のパネルに画像の編集画面が表示されます。『コンテンツ』タブを選択し、『画像の選択』の項目から画像を挿入します。『画像の選択』の下にある画像マーク(山と太陽を模したグレースケールの画像)にカーソルを合わせます。すると『画像の選択』と出るのでクリックします。クリックするとメディアライブラリが開きます。挿入したい画像を選んでチェックしたら(青枠・青いチェックマークが出てたらOK)右下の青ボタン『選択』をクリックします。画像が入ったら、左のパネルの『スタイル』から配置と幅の設定を行います。配置は『中央』、幅は『5』に設定します。

・次は『スタイル』の右横にある『高度な設定』のタブを開きます。『マージン』という項目の下に『上・右・下・左』とそれぞれ数字(値)を入力するボックスがあります。ボックスの一番右にグレーのボタン『(値をまとめてリンク)』があります。このままでは、『上・右・下・左』の値がリンクされてしまいます。今回は『上』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の項目の値をボックス内の『▼』を押して『-15』に設定します。そうするとさっきまで見出しと離れていたあしらいの画像が少し上にあがり見出しと近づけることができます。

・あしらい画像の下にメインの見出しを入力していきます。先程『About』の文字を作った工程で、再度セクションを出して『見出しウィジェット』を挿入します。ウィジェットが挿入出来たら、『スタイル』タブから見出しの設定をします。※見出し設定内容は下記参照

・設定ができたら『コンテンツ』から『タイトル』を入力していきます。テキストボックスに『完全個室のプライベート空間』と入れましょう。

※見出し設定内容はこちら↓

【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474

【コンテンツ】
HTMLタグ：H2

次は見出しの下に『テキスト』を入れたいので、今作った見出しの下にまたセクションを作ってカラム内にウィジェットを入れます。今回入れるウィジェットは『基本』の項目から『テキストエディター』をドラッグ＆ドロップで入れてください。

・『テキストエディター』が入れられたら設定をしていきます。見出しの時と同様に左サイドバーに設定画面が出ているので『スタイル』から配置とタイポグラフィの設定を行います。

※テキスト設定内容はこちら↓

【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：1.7

・配置とタイポグラフィの設定ができたら『段落間隔』という項目を『10』に設定します。

・ここまで設定が終わったら『コンテンツ』からテキストを入れていきます。テキストエディターのテキストボックスには、サンプルの文章が入っています。これをすべて削除して

『ナチュラル美を兼ねる、あなただけのプライベートサロン。
忙しい日常から離れ、自分を大切にする贅沢な時間をお届けします。』

と入力しましょう。これでテキストエディターの設定は完了です。

・テキストエディターウィジェットの下に『スペーサー』を挿入するので、セクションを出して『スペーサー』のウィジェットを出したセクション内のカラムにドラッグ＆ドロップしましょう。スペーサーが入ったら左サイドバーの『コンテンツ』から『スペース』の設定をします。スペースの値は『10』と入力しましょう。

・次はスペーサーの下に『ボタン』を挿入します。ボタンは、URLを入力すればリンク設定ができるので、見てほしいページを知らせるのに便利なウィジェットです。ボタンはクリックしてもらいたい場所を目立たせる役割があります。ボタンを設置することで閲覧者も「ここはクリックできる」と認識しやすくなるため、ページ誘導がしやすくなります。

※ボタンの設定内容はこちら↓

【スタイル】
配置：中央 (→｜←)
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：入力しない

・新しくセクションを追加し、カラム内の『＋』をクリックして左パネルにウィジェット一覧を出します。『基本』の項目から『ボタン』のウィジェットを探してカラム内にドラッグ＆ドロップしましょう。右画面に黄緑色の『ここをクリック』と書かれたボタンが出て来たと思います。では、左パネルからボタンの設定をしていきます。『スタイル』を開いて『位置』『タイポグラフィ』の設定をまずは行いましょう。

『スタイル』の設定項目の中央辺りにある『色』を設定します。これは、ボタンの色を設定できる項目です。色の項目の右側に『』『■(黄緑の正方形)』があるので、『■』の方をクリックしましょう。するとカラーピッカーが出てきます。文字色を設定した時と同じようにこのカラーピッカーでボタンの色を設定します。カラーピッカーでは、カラー選択エリア(グラデーションの四角形のエリア)内にある、丸いカーソルを動かしたり、下のバーを動かすと色が変えられます。今回は一番下の色コードを入力して設定していきます。『C59F78』と入れましょう。

・文字色も『色』の設定と同じように『■』をクリックしてカラーピッカーを表示させます。文字色は『白(FFFFFF)』に設定します。

・次は、『枠線の丸み』という項目を設定します。先ほど説明したマージンと同じように設定していくのですが、値が大きくなると角が丸くなり小さくなると角が角ばって長方形に近くなります。今回は、長方形のボタンにしたいので値を『0』にします。『上・右・下・左』の値が連携されている状態なのでこのまま『０』に設定しましょう。

・『枠線の丸み』の下にある『パディング』を設定します。値を入力するボックスの一番右に『🔗』のアイコンボタンがあるのでそれをクリックして『値のまとめてリンク』を解除しておきましょう。『上・右・下・左』とそれぞれ値を入れます。『上：20　右：35　下：20　左：35』に設定します。

・『文字色』の項目の上に『普通』『マウスオーバー』と2つのボタンが並んでいます。『マウスオーバー』をクリックすると、マウスオーバー時の設定が表示されます。

『マウスオーバー』とは・・・マウスカーソルを、ある場所の上に乗せたときに起こる動きや変化のことです。例えば、マウスカーソルをボタンに乗せたら色が変わったり、画像の上にカーソルをもっていくと画像が変わったりする設定です。

・まずは、『文字色』を設定します。先程設定した普通時の設定と同じようにカラーピッカーを表示させて『白(FFFFFF)』に設定します。グラデーションの枠にある丸いアイコンをドラッグして左上端にもっていくと簡単に『白(FFFFFF)』に設定することができます。次は、ボタンの色を設定します。『色』も同じようにカラーピッカーを表示させて色コードに『9E8871』と入力します。

・『コンテンツ』のタブを開いて『テキスト』を設定します。『ここをクリック』とデフォルトで入っているので、その文字を消して入力フォームに『LILASについて』と入れます。『リンク』にURLを入れるとボタンをクリックしたら『LILASについて』のページに飛ぶように設定できます。『リンク』の設定は他のページが出来上がってからするので今は空けておいてください。

・このコンテンツエリアの下に『スペーサー』を入れます。セクションを出してカラム内に
スペーサーウィジェットをドラッグ＆ドロップで挿入しましょう。左パネルの『コンテンツ』からスペースを『80』に設定します。

・スペーサーが入れられたら、下にセクションを入れて画像を挿入します。今回は横並びに2枚の画像を配置していくので今までとは違うセクションのレイアウトを使用します。セクションのレイアウト選択画面で今までは『上段の一番左上』の区切り線が入っていないものを使用していましたが、今回は『上段の左から二番目』中央に区切り線が入っていてカラムが二つに分かれているレイアウトを使用します。1つのセクション内にカラムが2つ出てくればOKです。

・左側のカラムにまずは画像を挿入します。左カラムの＋をクリックしてウィジェット一覧から画像ウィジェットを入れます。左パネルのコンテンツを開き画像の選択をクリックしてメディアライブラリを開き、入れたい画像をアップロードして選択します。画像が入ったら右のカラムも同じように画像を挿入しましょう。画像の設定はしなくて大丈夫です。ここまでで、一つのコンテンツエリアとなります。画像の下にスペーサー(幅：80)が入れられたら、その下にまた次のコンテンツエリアを作成していきます。

　コンテンツエリアの作成～サービス～

　コンテンツエリアの作成
　～サービス～

・次のコンテンツエリアは、サービス内容のエリアです。ここには、『フェイシャル』と『ボディ』２つのサービス内容を入れていきます。

【サービス内容① フェイシャル】

・画像の下のスペーサーが入ったセクション枠の上部中央に『＋』『：：：』『×』のマークが付いた台形のタブがあります。その上で『右クリック』をしてコンテキストメニューを表示させます。コンテキストメニューから『複製』を選択してセクションを複製します。すると、スペーサーが入ったセクションがもう一つ挿入されたと思います。ウィジェットだけでなくセクションも複製することができ、セクションの設定・デザインはもちろん、セクション内にあるカラムとウィジェットも同じ設定・デザインを保ったまま複製が可能です。

・今複製した方のセクションに『背景色』を入れます。セクション枠の上部中央にある『＋』『：：：』『×』のマークが付いた台形のタブを左クリックするとセクションの設定が左サイドバーに出てきます。『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。『🌐』『／(赤い斜線の入った正方形)』があるので、斜線入りの正方形をクリックします。そうすると、『カラーピッカー』が表示されるので『色コード』の入力フォームに『EDE8E5』と入れましょう。

・背景色が入ったらその下に新たなセクションを入れます。カラムが２つに分かれているレイアウトのセクションを使用したいので、セクションのレイアウト選択画面で『上段の左から2番目』を選んでください。

・このセクションにも背景色を入れます。先程ののようにセクション枠のピンクの台形タブをクリックして、セクション設定のスタイルを開き、『色』からカラーピッカーを出します。ここまでできたら、今回は『色コードの入力』とは違う方法をご紹介します。カラーピッカーの右上に『↺』『＋』『(動的タグ)』『(Color Sampler)』の４つのアイコンが並んでいるのでその中の一番右にある『Color Sampler』を選択します。Color Samplerを選択すると、マウスのカーソルがスポットマークになり、画面上のElementorで作ったデザインから色をピックアップすることができます。先程背景色を設定したセクションにカーソルを合わせてクリックするとカラーサンプルが出てくるのでセクションに使用した背景色を選択します。この時に、クリックする場所がカラムやスペーサーの上だと背景色を上手にピックしてくれないので、セクションの端の方をクリックすると良いです。

・背景色が入ったら、左カラムに画像ウィジェットを入れます。画像が入ったら次は右カラムをデザインしていきます。

・最初に作成したコンテンツエリアにある『About』と入れた見出しをクリックします。枠線がピンクになり選択状態になると右側に『🖊(ペンマーク)』が出ます。その上で右クリックをしてコンテキストメニューから『コピー』を選択します。コピーできたら、今作成しているコンテンツエリア戻って画像横の右カラムの上で『右クリック』をしてコンテキストメニューから『貼り付け』を選択します。するとさっきコピーしたものと同じデザインの見出しが入ります。『コピー』も複製と同様に、同じ設定やデザインを保ったまま、セクションやカラム、ウィジェットを別の場所に貼り付けることができます。作業効率を上げるために便利な機能です。

・もう一度、最初に作成したコンテンツエリアに戻って次は『あしらい(装飾の葉っぱ画像)』をコピーします。コピーできたらまた今作成中のコンテンツエリアに戻ります。さっき入れた『見出し』を左クリックで選択した後、カーソルはそのまま動かさず右クリックで貼り付けを選択し、『あしらい』を挿入します。選択したウィジェットの上で貼り付けを選択するとその真下にコピーした内容が貼り付けられる仕組みになっています。

・『見出し』『あしらい』が入れられたら、編集をしていきます。まずは、『見出し(About)』をクリックして『コンテンツ』を開きタイトルを変更します。『About』から『Facial』に変えます。そのほかの設定は触らず同じで大丈夫です。タイトルが変更できたら次は『あしらい』の幅を調整します。『あしらい(装飾の葉っぱ画像)』を選択し、『スタイル』を開きます。『幅』の項目で値を『７』に変更します。

・次は、『あしらい』の下に新たな『見出し』を入れたいので、新しくセクションを出して『見出しウィジェット』を出します。新しいセクション内に見出しウィジェットが入ったら、右の『(ペンマーク)』のにカーソルを持っていきドラッグ＆ドロップで『あしらい』の下に移動させます。左パネルから『スタイル』を開いて配置やタイポグラフィの設定をしていきます。※見出しの設定は下記参照

※見出し設定内容はこちら↓

【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474

・設定ができたら、『コンテンツ』を開いて『タイトル』を入力します。『オーガニック肌活フェイシャル』と入れてください。HTMLタグは『H3』に設定します。

・『見出し』の下に『テキストエディター』を入れます。さっき出したセクションが残っているのでその中に『テキストエディター』ウィジェットを入れてからドラッグ＆ドロップで『見出し』の下に移動させます。移動させたら『配置』『タイポグラフィ』『段落間隔』『文字色』の設定を行います。

※テキストエディター設定内容はこちら↓

【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：
太さ：500 (Medium)
Line Height：1.7

段落間隔：6
文字色：747474

・ここまで設定ができたら次は『高度な設定』から『マージン』の設定をします。『右』『左』だけ値を入力したいので、一番右の『🔗』をクリックして、リンクを解除します。ボタンがグレーから白になれば個別に設定できるようになります。『右』の項目の値をボックス内の『▼』を押して『20』に設定します。『左』も同じように『20』に設定します。次は、『コンテンツ』を開いてテキストボックスに文章を入れます。

・テキストエディターの設定・編集ができたらテキストエディターの下に『ボタン』を入れます。ボタンは、最初に作成したコンテンツエリアに入れた『LILASについて』のボタンをコピーして貼り付けます。まずは、『ボタン(LILASについて)』の上で右クリックをしてコンテキストメニューを出し、『コピー』を選択します。コピーできたら、『フェイスラインはすっきりと～・・・』のテキストの上で、右クリックして『貼り付け』を選択。ボタンが挿入できるので左パネルの『コンテンツ』から『テキスト』の文字を『詳しく見る』に変更しましょう。

次は『スタイル』から一番下の『パディング』を設定します。『上：20　右：45　下：20　左：45』に値を変更しましょう。

・今デザインしたセクションの下に空のセクションが出ていると思います。そこに『スペーサー』を入れましょう。『幅：50』に設定してください。次は、セクションに『背景色』を入れます。セクション枠の上部中央にある『＋』『：：：』『×』のマークが付いた台形のタブを左クリックするとセクションの設定が左パネルに出てきます。『スタイル』を開き、『Background Type』の項目にある一番左の筆マークのアイコン(クラシック)を選択し『色』の項目から色を変更します。『カラーピッカー』を開き、『Color Sampler』を選択します。カーソルがスポイトマークになるので、『EDE8E5』のカラーに設定したセクションにカーソルを合わせてクリックして色をコピーします。

左パネルの一番右下にあるピンクのボタン『更新』をクリックして内容を保存しましょう。

【サービス内容① ボディ】

・次はボディのエリアを作成していきます。ボディのエリアも先程作成した、『フェイシャル』とほぼデザインは同じなので、フェイシャルの内容を入れたセクションを複製して使用します。フェイシャルエリアのセクション枠の上部中央にピンク色のタブがあります。その上で『右クリック』をしてコンテキストメニューを表示させます。コンテキストメニューから『複製』を選択してセクションを複製します。するとフェイシャルエリアの真下に同じデザインが複製されます。複製した方のセクションピンクタブにカーソルを合わせて、さっき背景色を設定したセクションの下にドラッグ＆ドロップします。デザインとしては、『フェイシャル』『スペーサー』『複製したセクション』の順番で縦に並んでいると思います。

・複製した方のセクションを『ボディ』の仕様に編集していきます。まずは、左カラム(画像が入っている方)の左上にある『カラムアイコン』にカーソルをもっていきましょう。アイコンにカーソル合わせたまま右カラムの方へドラッグすると左右のカラムの場所を入れ替えることができます。

・カラムが入れ替わったら、『見出し(Facial)』をクリックして選択します。左パネルの『コンテンツ』を開いて『Facial』→『Body』に変更しましょう。

・『オーガニック肌活フェイシャル』の部分をクリックして選択し、左パネルの『コンテンツ』を開いて、『オーガニック肌活フェイシャル』→『体質改善デトックスボディ』に変更します。

・その下の『フェイスラインはすっきりと～・・・』の文章が入った『テキストエディター』をクリックして『コンテンツ』から文章を変えます。『枯れた木々に新たな息吹をもたらす　　深層からのデトックスケア。』と入れましょう。

・『あしらい』と『ボタン』はデザインは変えずそのまま使用するので左カラムはこれで完成です。次は、右カラムの『画像』を編集します。右カラムに入っている『画像』をクリックして選択します。左パネルーの『コンテンツ』から画像を変更します。『画像の選択』に表示されている画像をクリックすると『メディアファイル』が開くので、使用したい画像をアップロードして選択しましょう。すると、画像が変更できます。

・ボディエリアのセクションの下に新しいセクションを追加します。レイアウトは上段の左から２番目のカラムが２つに分かれたセクションを選択します。

・次は、追加したセクションの上にあるスペーサーの入ったセクション(背景色付きのセクション)を複製します。

・複製したセクションのピンクタブをクリックして左パネルの『スタイル』を開きます。『色』の項目から背景色を白にします。『カラーピッカー』を開き、白い丸のカーソルを左上端にもっていって『FFFFFF(白)』に設定します。

　コンテンツエリアの作成～バナーボタン～

　コンテンツエリアの作成
　～バナーボタン～

・スペーサーの下に『バナーボタン』を２つ作成していきます。先程追加したカラムが２つに分かれたセクションのピンクの台形タブをクリックしてセクションを選択状態にします。左サイドバーの『レイアウト』を開き『幅』の値を『1417』に設定します。

・セクションの幅が設定できたら、次は左カラムを設定していきます。左カラムに『スペーサー』を入れます。幅は『50』に設定します。今入れたスペーサーの上で右クリックをしてコンテキストメニューを開き、複製してカラムの中にスペーサーが2つ入っている状態にします。

・スペーサーが２つ入ったら、カラムの左上にあるカラムのアイコンを左クリックして左サイドバーの『スタイル』から背景を設定します。『普通』を選択し、『Background Type』の『クラシック(筆アイコン)』をクリックしたら、『色』と『画像』の設定項目が出て来ます。今回は、画像を背景として設定するので『画像の選択』からメディアライブラリを開き、使用したい画像をアップロードして選択します。カラムの背景に画像が入ったらOKです。

・左パネルに『Image Resolution』『位置』などの設定項目があるのでそれぞれ設定していきます。

※背景の設定内容はこちら↓

Image Resolution：フル
位置：中央/中央
添付：デフォルト
繰り返し：繰り返しなし
Display Size：カバー

・設定できたら、先程選んだ『普通』のボタンの横に『マウスオーバー』のボタンがあります。次は『マウスオーバー』を選択しましょう。マウスオーバーを設定すると、カーソルをカラムにマウスを合わせたときに違う背景画像に変化させることができます。
マウスオーバーをクリックして、マウスオーバーの設定画面になったら『Background Type』の『クラシック』をクリックして背景画像を設定していきます。さっきと同様に『画像の選択』から画像をアップロードします。背景画像が選択できたらまた先程と同様に背景画像の設定を行います。

※マウスオーバー設定内容はこちら↓

Image Resolution：フル
位置：中央/中央
添付：デフォルト
繰り返し：繰り返しなし
Display Size：カバー
トランジション所要時間(s):：0.23

※トランジション所要時間とは・・・動き（変化）が起こるときに、どれくらいの時間をかけてその変化を見せるかを設定するものです。今回は、背景が切り替わる速さを設定します。値が大きければゆっくり変化するし、値が小さければサッと早く切り替わります。

・この背景の上に文字を入れると画像に文字が被って見にくいので、『背景オーバーレイ』を設定します。

・トランジション所要時間の設定の下にある『背景オーバーレイ』の項目をクリックします。設定画面が出てきたら、『普通』ボタンをクリックします。次に『Background Type』の『クラシック(筆アイコン)』をクリックしてカラーピッカーから色を設定していきます。色コードの入力フォームに『A3A1A1』と入れてください。次は『不透明度』の値を『0.23』に設定します。

※「背景オーバーレイ」とは・・・背景画像や背景色の上に重ねて表示する“うすい色のフィルター”のことです。背景画像が明るすぎたりごちゃごちゃしていると、上の文字が読みにくくなります。そのときに黒や白のオーバーレイをかけることで、文字がハッキリ見えるようになります。