【第4章】ヘッダーとフッター②
フッターの作成
・ダッシュボードの左サイドバーから『UAE』を選択して設定画面に入り、ページの上部にある『Header＆Footer』をクリックします。
・『Header＆Footer Builder』の一覧ページにうつったら、『新規追加』ボタンをクリックしてヘッダーから作成していきます。
・『タイトルを追加』のところに『フッター』と入力します。その下に『Elementor Header＆Footer Builderオプション』という設定項目があるので、テンプレートのタイプを選択ボックスから『フッターの前』に設定しましょう。
・『フッターの前』に設定すると下に『表示』の設定が出てくるので、こちらは『サイト全体』を選択します。
・タイトルを追加した入力フォームの下に『パーマリンク』が出ているので、『編集』をクリックしてスラッグを『LILAS-footer』に変更し、『OK』をクリックしましょう。ここまでできたらページの右側にある青色の『公開』ボタンを押して設定を保存し、『パーマリンク』の下にある『Elementorで編集』のボタンからデザインを作成していきます。
※ここからページのデザイン・設定を行っていきます。操作を行っている途中で間違えたり
やり直したい場合は、パソコンのキーボードの【Ctrl】＋【Z】で前に戻ることができます。【Ctrl】＋【Z】で戻らない場合は、左パネルの枠線の中央辺りにある『<』でパネルを非表示にしてから【Ctrl】＋【Z】で戻る場合があります。
・グレーの点線のボックスの中に『＋』のボタンがあります。カーソルを＋に持っていくと『新しいセクションの追加』と出てくるのでそこをクリックします。
・『＋』をクリックすると、『SELECT YOUR STRUCTURE』の文字の下にセクションのレイアウトが出てきます。使用したいセクションのレイアウトを選択することができます。今回は上段の一番左にあるレイアウトを選択しましょう。
・画面に＋が入ったボックスが1つ出てきたらOKです。基本的に左にあるパネルから設定を行っていきます。まずは、パネルの上部に『レイアウト』『スタイル』『高度な設定』とメニュータブがあります。その中から『スタイル』を選び、背景の設定をします。設定の最初に『普通』と『マウスオーバー』がありますが、『普通』をクリックします。その下『Background Type』の文字の右側に『クラシック』『グラデーション』『動画』『スライドショー』４つのアイコンがありますが、一番左の『クラシック』をクリックします。
・『色』の設定の赤い斜線が入ったボタンをクリックするとカラーピッカーが出てくるので、一番下の色コードの入力フォームに『#AF9578』と入れます。カラーピッカーの外側をクリックするとカラーピッカーが消えます。
・セクションの中にある『＋』をクリックすると左のパネルに『ウィジェット一覧』が表示されます。ウィジェット一覧の『基本』項目にある『スペーサー』のウィジェットをクリックしたままドラッグ＆ドロップでセクションの中に入れます。
・スペーサーが入ったら左パネルの『コンテンツ』からスペースの値を『10』に設定します。
・グレーの点線のボックスの中にある『＋』のボタンをクリックして、新しいセクションを追加します。セクションのレイアウトは、さっき同じ、上段の左上のレイアウトを使用します。
・次は、セクションの中にあるカラムのカラムアイコンを右クリックします。コンテキストメニューが出てくるので、その中から『複製』を選択しましょう。
左パネルの『スタイル』設定から背景の設定をします。設定の最初に『普通』と『マウスオーバー』がありますが、『普通』をクリックします。その下『Background Type』は『クラシック』を選択します。『色』の項目の赤い斜線が入ったアイコンをクリックしてカラーピッカーを開きます。
・カラーピッカーの右上に『color sampler』というスポイトのアイコンがあります。それを選択すると、カーソルがスポイトになります。カーソルがスポイトの状態で、先ほど背景色を設定したセクションをクリックすると、同じ色をコピーすることができます。
※セクションの端の方をクリックすると上手くコピーできると思います！
・背景色が設定できたら左のカラムから編集していきます。左カラムの「＋」をクリックして左パネルのウィジェット一覧から『内部セクション』ウィジェットをドラッグ＆ドロップで入れます。
・カラムの中に、さらに２つカラムが入っている状態になりました。中のカラムを設定していきます。左のカラムアイコンをクリックして左パネルの『レイアウト』からカラム幅を『25』にします。右のカラムも同じ流れでカラム幅を『75』に設定します。
・左のカラムをクリックして、ウィジェット一覧を開き『基本』の項目から『アイコンウィジェット』を左カラムに入れます。
・左パネルの『コンテンツ』を選択し、『★』のところにカーソルをもっていくと『アイコンライブラリー』のボタンが出るので、クリックして開きます。検索フォームに『phone』と入力して電話のアイコンを選択して『挿入』ボタンをクリックします。
・アイコンが入ったら、左パネルからスタイル設定をします。まずは、『メインの色』から設定するので■のアイコンをクリックし、カラーピッカーを開きます。カラーピッカーのカラー選択エリア(グラデーションの四角形のエリア)内にある、丸いカーソルを左上端の白い部分にドラッグしてもっていくと、背景色が『白』に設定できます。一番下の『色コード』が『FFFFFF』になっていればOKです。
・メインの色が設定できたら、他の項目も設定します。『配置』は『右』に設定し、配置の下の設定は『普通』を選択します。『サイズ』は、『30』に設定します。
・次は、内部セクションの右カラムを設定します。右カラムの『＋』をクリックしてウィジェット一覧から『見出しウィジェット』を入れます。
・見出しウィジェットの設定をします。左パネルのスタイルから『配置』を『左』にします。『タイポグラフィ』の設定は以下の通りです。
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：30
太さ：700 (Bold)
Line Height：1.7
・文字色設定の上にあるボタンは『普通』を選択します。『文字色』は今までと同じように四角のアイコンをクリックしてカラーピッカーを表示し、カラーピッカーのカラー選択エリア内にある、丸いカーソルを左上端の白い部分にドラッグしてもっていき、文字色を『白』に設定します。
・左パネルの『コンテンツ』の設定をします。『タイトル』に『電話番号(000-123-456)』を入れます。HTMLタグは『H2』にします。
・次は、『高度な設定』からマージンの設定をします。今回は『上』と『下』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。『上』の値を『-15』、『下』の値を『-10』と入れます。
・グレーの点線のボックスの中にある『＋』のボタンをクリックして、新しいセクションを追加します。セクションのレイアウトは、さっき同じ、上段の左上のレイアウトを使用します。
・セクションの中にある『＋』をクリックすると左のパネルに『ウィジェット一覧』が表示されます。ウィジェット一覧の『基本』項目にある『テキストエディター』のウィジェットをクリックしたままドラッグ＆ドロップで電話番号の下に入れます。
・左パネルから『スタイル』の設定をします。『配置：中央』『文字色：FFFFFF』に設定します。『タイポグラフィ設定』は以下の通りです。
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：15
太さ：600 (Semi Bold)
Line Height：1.7
・次は、『コンテンツ』から『テキストエディター』にテキストを入れます。既にデフォルトで入っている文章は消して、『電話受付 10:00～19:00 (月曜定休)』と入れましょう。
・『高度な設定』からマージンの設定をします。『🔗』をクリックして、個別に設定できるようにします。『上：-10』『下：-25』『左：-85』と入れます。
・次は、セクションの右カラムを設定していきます。カラムの『＋』をクリックします。左パネルのウィジェット一覧から『アイコン』ウィジェットをドラッグ＆ドロップで右カラムに入れます。
・右カラムのカラムアイコンをクリックし、左パネルの『スタイル』から背景色を設定します。『普通』をクリックし、その下『Background Type』の文字の右側にあるブラシマークの『クラシック』をクリックします。『色』の設定が出てきたら■のアイコンをクリックして、カラーピッカーを開きます。『FFFFFF』に設定します。
・スタイル設定の下の方にある『枠線』の項目をクリックします。クリックすると枠線に関する設定が出てきます。
まずは『普通』を選択します。次に『枠線の丸み』を『上・右・下・左』全て『15』に設定します。
・『高度な設定』からマージンの設定をします。今回は『🔗』をクリックせずに、『上・右・下・左』全ての値を『20』に設定します。
・カラムに入っているアイコンをクリックし、左パネルの『コンテンツ』から『アイコンライブラリー』を開き、アイコンを変更します。検索フォームに『calendar』と入れて検索するとカレンダーのアイコンが出てくるので選択して挿入します。
・左パネルのスタイルから『配置：中央』にします。その下の『普通』をクリックし、『メインの色』を設定します。■のアイコンからカラーピッカーを開いたら、『color sampler』のアイコンを選択し、カーソルがスポイトの状態でセクションの端をクリックして色をコピーします。
・メインの色設定の下にあるサイズ設定を『30』にします。
・次は、『高度な設定』からマージンの設定をします。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。『上』の値に『10』と入れます。
・左カラムの『電話受付～』のテキストが入ったテキストエディターを右クリックして『コンテキストメニュー』を開きます。『コンテキストメニュー』から『コピー』を選択します。
・カレンダーアイコンを右クリックしてコンテキストメニューから『貼り付け』を選択するとアイコンの下にテキストエディターが入ります。
・貼り付けたテキストエディターウィジェットをクリックしたら、左パネルの『スタイル』から『文字色』を設定します。■のアイコンからカラーピッカーを開いたら、『color sampler』のアイコンを選択し、カーソルがスポイトの状態でカレンダーアイコンをクリックすると色がコピーできます。
・次は、『高度な設定』からマージンの設定をします。今回は『上』と『下』だけ値を入力したいので、『
』をクリックして、個別に設定できるようにします。『上』の値を『-15』、『下』の値を『-15』と入れます。
・次は、『コンテンツ』から『テキストエディター』にテキストを入れます。『Reservation』と入れましょう。
・空のセクションのピンクタブにある『×』をクリックして削除します。
・左パネルの右側面に『>』マークのタブがあり、クリックするとパネルが非表示になるので、フルスクリーンでデザインを確認できるようになります。フルスクリーンでデザインのバランスを確認します。確認できたらもう一度『>』をクリックして左パネルを表示させましょう。
・修正点があれば修正していきます。今回は、電話番号が少し上に上がり過ぎているので、電話番号の入った内部セクションのウィジェットを調整します。内部セクションのピンクタブをクリックしたら、左パネルの『高度な設定』からマージンの設定をします。今回は『上』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。『上』の値に『25』と入れます。
・一番上のスペーサーが入ったセクションのピンクタブを右クリックします。コンテキストメニューから『複製』を選択します。
・複製したセクションを一番下にドラッグして移動させます。
・一番下に移動させたセクションを『複製』します。複製の方法は先ほどと同じなのでわからなければ上の画像を参考にしてください。
・複製した方のセクションのピンクタブをクリックし、左パネルの『スタイル』から背景の設定をします。『色』の項目の■アイコンからカラーピッカーを開いて背景色を『FFFFFF』に設定します。
・背景色が設定できたら、セクションの中のスペーサーウィジェットをクリックして左パネルの『コンテンツ』から『スペース：20』に設定します。
・グレーの点線のボックスの中にある『＋』のボタンをクリックして、新しいセクションを追加します。セクションのレイアウトは、上段の左から２番目のレイアウトを選択します。
・セクションが入ったら、左カラムのカラムアイコンをクリックします。左パネルのレイアウトから『カラム幅：30』に設定します。
・左カラムの『＋』をクリックしてウィジェット一覧の『基本』の項目から『画像』のウィジェットを入れます。
・画像ウィジェットが入ったら、左パネルのコンテンツから画像を設定します。『画像の選択』から『メディアライブラリ』を開き、ロゴマークを選び右下の青い『選択』ボタンをクリックします。
・ロゴが入ったら、左パネルの『スタイル』設定から『サイズ：85』に設定します。
・右カラムの設定にうつります。右カラムの『＋』をクリックします。左パネルにウィジェット一覧が出てきたら、下の方までスクロールして『Ultimate Addons』の項目から『ナビゲーションメニュー』をカラムの中に入れます。
・左パネルの『コンテンツ』設定の中の『レイアウト』をクリックしてレイアウト設定を表示させます。『配置』を『中央』にします。
・次はスタイルをクリックして『メインメニュー』の設定をおこないます。『水平方向のパディング』の値を『15』、『垂直方向のパディング』の値を『15』に設定します。
・文字色の設定の上に『標準』『ホバー』『有効』のボタンがあるので『標準』を選択します。次はその下の『文字色』の設定をおこないます。■アイコンをクリックするとカラーピッカーが出てきます。一番下の色コードの入力フォームに『747474』と入力してください。
・タイポグラフィの設定をします。タイポグラフィの設定内容は以下の通りです。
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：15
太さ：600 (Semi Bold)
・次は、『高度な設定』からマージンの設定をします。今回は『上』と『下』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。『上』の値を『-15』、『下』の値を『-15』と入れます。
・セクションに背景の色を設定します。セクションのピンクタブをクリックして左パネルの『スタイル』設定を開きます。『普通』をクリックしたら『Background Type』は『クラシック』を選択します。『色』の項目の■アイコンをクリックしてカラーピッカーを開きます。色は『FFFFFF』に設定します。
・次は、『ナビゲーションメニュー』のウィジェットをクリックし、『スタイル』の設定を開きます。『文字色』設定の上に『標準』『ホバー』『有効』のボタンがありますが、その中から『ホバー』を選択します。ホバーを選択したら、下にある『文字色』の設定をします。■アイコンからカラーピッカーを開き、『color sampler』のアイコンを選択してカーソルがスポイトの状態で背景色が設定されているセクションの端をクリックすると文字色が簡単に設定できます。
・左パネルの一番下に『更新』ボタンがあるので、ここまでの作業を保存しておきましょう。
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックするとタブレット用の編集画面に切り替わります。
レスポンシブ設定～タブレット～
・電話番号の下のテキストエディターウィジェットをクリックして、『高度な設定』からマージンの設定をします。今回は『上』と『下』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。『上』の値を『10』、『下』の値を『-15』と入れます。
・次は、ナビゲーションメニューのウィジェットをクリックして、『コンテンツ』を開きます。『レスポンシブデザイン設定』のブレークポイントを『なし』に設定します。
・『スタイル』を開いて『水平方向のパディング』を『14』に設定します。
・『高度な設定』からマージンの設定をします。『下』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。『下』の値を『-』と入れます。
・次は、ナビゲーションメニューのウィジェットをクリックして、『コンテンツ』を開きます。『レスポンシブデザイン設定』のブレークポイントを『なし』に設定します。
・『スタイル』を開いて『水平方向のパディング』を『14』に設定します。
・『高度な設定』からマージンの設定をします。『下』だけ値を入力したいので、『』をクリックして、個別に設定できるようにします。『下』の値を『-14』と入れます。
・左パネルの右側面にある『>』マークをクリックするとパネルが非表示になるので、フルスクリーンでデザインのバランスを確認します。確認できたらもう一度『>』をクリックして左パネルを表示させましょう。
レスポンシブ設定～スマートフォン～
・ページ上部のスマホアイコンをクリックするとモバイル縦向きの設定ができるようになります。
・一番上のセクションのピンクタブをクリックし、高度な設定を開きます。『レスポンシブ』の設定項目にある『表示状態』の設定をします。『モバイル縦向きで隠す』の切り替えボタンをクリックして『非表示』にします。
・電話アイコンの入ったカラムのカラムアイコンをクリックして『コンテンツ』から、『カラム幅：25』にします。電話番号が入ったカラムも『カラム幅：75』に設定します。
・ナビゲーションメニューウィジェットを右クリックしてコンテキストメニューから『複製』します。元からあったナビゲーションメニューをクリックして『高度な設定』を開きます。『レスポンシブ』の設定から『モバイル縦向きで隠す』の項目を『非表示』にします。
・複製した方のナビゲーションメニューのウィジェットをクリックして、『コンテンツ』設定を開きます。その中の『レイアウト』設定をクリックします。その中に『レイアウト』という項目があるので『垂直』を選択します。
・次は、『スタイル』設定を開き、メインメニューの項目から『水平方向のパディング：50』『垂直方向のパディング：15』に設定します。
・再度『コンテンツ』の設定を開いて『レイアウト』から『配置』を『左』にします。
・『スタイル』設定を開き。『ドロップダウン』の設定から、『Box Shadow』をつけます。『Box Shadow』の設定項目の右にある『ペンマーク』をクリックすると、『Box Shadow』の設定パネルが出てきます。それぞれの項目に以下の値を入力します。
水平：5
垂直：5
ぼかし：10
スプレッド：0
・『Box Shadow』の設定パネルの一番上に『色』の設定があります。右の四角形をクリックするとカラーピッカーが出てくるので、一番下の色コードの入力フォームに『rgba(198, 198, 198, 0.5)』と入れましょう。コピー＆ペーストして入れてください。
・デスクトップの設定と同じように、グレーの点線のボックスの中にある『＋』のボタンをクリックして、新しいセクションを追加します。セクションのレイアウトは、上段の左上のレイアウトを使用します。
・セクションの中にある『＋』をクリックすると左のパネルに『ウィジェット一覧』が表示されます。ウィジェット一覧の『基本』項目にある『スペーサー』のウィジェットをクリックしたままドラッグ＆ドロップでセクションの中に入れます。『コンテンツ』を開いて『スペース：20』に設定します。
・スペーサーが入っているセクションのピンクタブをクリックして左パネルの『スタイル』から背景を設定します。『普通』をクリックし、その下『Background Type』の文字の右側にあるブラシマークの『クラシック』をクリックします。『色』の設定が出てきたら■のアイコンをクリックして、カラーピッカーを開きます。『FFFFFF』に設定します
・ナビゲーションメニューをクリックしてレスポンシブ設定をします。『高度な設定』を開き、『レスポンシブ』の設定から『デスクトップ版で隠す』『Tablet Portableで隠す』の項目を『非表示』にします。
・スマートフォン版の設定は以上です。左パネルの更新ボタンを押して編集内容を保存しておきましょう。
・ページ上部のデスクトップのアイコン(PCアイコン)をクリックして、全体のデザインが確認出来たら左パネルの左上にある『ハンバーガーメニュー(3本線のメニューアイコン)』をクリックします。メニューが出てくるのでその中から『終了』をクリックしてElementorの編集画面から出ます。←サイドバーのダッシュボードからWordpressのダッシュボードに戻ります。