【第4章】ヘッダーとフッター①
プラグインを使用してヘッダー＆フッターを作成していきます。プラグインを使用することでよりデザイン性の高いヘッダー＆フッターを作成することができます。
ヘッダーの作成
・ダッシュボードの左サイドバーから『UAE』を選択して設定画面に入り、ページの上部にある『Header＆Footer』をクリックします。
・『Header＆Footer Builder』の一覧ページにうつったら、『新規追加』ボタンをクリックしてヘッダーから作成していきます。
・『タイトルを追加』のところに『ヘッダー』と入力します。その下に『Elementor Header＆Footer Builderオプション』という設定項目があるので、テンプレートのタイプを選択ボックスから『ヘッダー』に設定しましょう。
・『ヘッダー』に設定すると下に『表示』の設定が出てくるので、こちらは『サイト全体』を選択します。
・タイトルを追加した入力フォームの下に『パーマリンク』が出ているので、『編集』をクリックしてスラッグを『LILAS-header』に変更し、『OK』をクリックしましょう。ここまでできたらページの右側にある青色の『公開』ボタンを押して設定を保存し、『パーマリンク』の下にある『Elementorで編集』のボタンからデザインを作成していきます。
※ここからページのデザイン・設定を行っていきます。操作を行っている途中で間違えたり
やり直したい場合は、パソコンのキーボードの【Ctrl】＋【Z】で前に戻ることができます。【Ctrl】＋【Z】で戻らない場合は、左パネルの枠線の中央辺りにある『<』でパネルを非表示にしてから【Ctrl】＋【Z】で戻る場合があります。
・グレーの点線のボックスの中に『＋』のボタンがあります。カーソルを＋に持っていくと『新しいセクションの追加』と出てくるのでクリックします。
・『＋』をクリックすると、『SELECT YOUR STRUCTURE』の文字の下にセクションのレイアウトが出てきます。使用したいセクションのレイアウトを選択することができます。今回は上段の左から４番目の４つに区切られた長方形のデザインを使用します。
・画面に＋が入ったボックスが４つ出てきたらOKです。基本的に左にあるパネルから設定を行っていきます。まずは、パネルの上部に『レイアウト』『スタイル』『高度な設定』とメニュータブがあります。その中から『レイアウト』を選びます。レイアウト設定に『コンテンツ幅』という項目があるので選択ボックスから『全幅』に設定します。
・コンテンツ幅の下にある『カラムギャップ』を『すき間なし』に設定します。
・次は、メニュータブの中央にある『スタイル』を選択します。背景の設定をします。『普通』と『マウスオーバー』がありますが、『普通』を選択します。その下『Background Type』の文字の右側に『クラシック』『グラデーション』『動画』『スライドショー』４つのアイコンがありますが、一番左の『クラシック』をクリックします。
・『色』の設定の赤い斜線が入ったボタンをクリックするとカラーピッカーが出てくるので、それを使って色を変更します。カラーピッカーのカラー選択エリア(グラデーションの四角形のエリア)内にある、丸いカーソルを左上端の白い部分にドラッグしてもっていくと、背景色が『白』に設定できます。カラーピッカーの一番下の色コードの入力フォームに『#FFFFFF』と入っていれば背景色の設定が完了です。カラーピッカーの外側をクリックするとカラーピッカーが消えます。
・次は、４つ並んだ四角形の設定を行います。この４つに区切られた四角形のことを『カラム』といいます。一番左のカラムにカーソルを合わせると左上にグレーのアイコンが出てくるのでそこをクリックします。すると左のパネルが『カラムを編集』に変わります。左パネルから『レイアウト』の設定をします。メニュータブの『レイアウト』を選択し、『カラム幅(％)』に値を入力します。入力ボックスに『30』と入れます。
・次は左から２番めのカラムです。一つめと同じ要領で『カラム幅』の値を『47』にします。
・左から3番目のカラムは『カラム幅：25』、一番右のカラムは『カラム幅：8』にします。
・一番左のカラムの中にある『＋』をクリックすると左のパネルに『ウィジェット一覧』が表示されます。Elementorでは、このウィジェットを組み合わせてデザインを作成していきます。まずは、ウィジェット一覧の『基本』項目から『画像』のウィジェットを見つけましょう。見つけたらドラッグ＆ドロップで一番左のカラムの中に入れます。
・左のパネルに画像の編集画面が表示されます。『コンテンツ』タブを選択し、『画像の選択』の項目から画像を挿入します。『画像の選択』の下にある画像マーク(山と太陽を模したグレースケールの画像)にカーソルを合わせます。すると『画像の選択』と出るのでクリックします。クリックするとメディアライブラリが開きます。
・ロゴマークを入れます。サイトロゴを設定したときに入れたロゴマークを使用してもいいし、新しくアップロードしても良いです。既にアップロードした画像を使用するときは、メディアを挿入の下の『メディアライブラリ』をクリックして入れたいロゴマークを選んでチェックしたら(青枠・青いチェックマークが出てたらOK)右下の青ボタン『選択』をクリックします。すると、カラムの中にロゴが入ります。
・ロゴが入ったら、左パネルのスタイルタブを選択して『配置』と『幅』を設定します。『配置』は『中央』、『幅』の設定は値の入力ボックスに『75』と入れます。
・『高度な設定』のタブを開きます。『マージン』という項目の下に『上・右・下・左』とそれぞれ数字(値)を入力するボックスがあります。ボックスの一番右にグレーのボタン『🔗(値をまとめてリンク)』があります。このままでは、『上・右・下・左』の値がリンクされてしまいます。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の値だけ入力ボックスに『10』と入れます。
・左から2番目のカラムを編集します。先ほどと同じように『＋』をクリックしてウィジェット一覧を表示させます。今回は下の方までスクロールして『Ultimate Addons』の項目から『ナビゲーションメニュー』をカラムの中に入れます。左のカラムに『ナビゲーションメニューを編集』が表示されたらコンテンツタブをクリックして『メニュー』項目の選択ボックスから『メインメニュー』を選択します。
・次はスタイルをクリックして『メインメニュー』の設定をおこないます。『水平方向のパディング』の値を『16』、『垂直方向のパディング』の値を『30』、『項目間の間隔』を『3』に設定します。
・タイポグラフィの項目の『ペンアイコン』をクリックするとタイポグラフィの設定パネルが表示されます。『フォント』は選択ボックスをクリックすると一番上に検索窓が出てくるのでそこに『jp』と入力しましょう。すると『Noto Serif JP』というフォントがでてくるのでそれを選びます。
・『サイズ』は『15』と入力します。
・タイポグラフィの下に『標準』『ホバー』『有効』のボタンがあるのでまずは、『標準』を選択します。その下の『文字色』の設定をおこないます。グレーの正方形をクリックするとカラーピッカーが出てきます。一番下の色コードの入力フォームに『747474』と入力してください。
・次は『標準』の右横にある『ホバー』のボタンをクリックしてください。『ホバー』は、ナビゲーションメニューにカーソルを合わせると色が変えられる設定です。
先ほどと同じように色が付いた正方形をクリックしてカラーピッカーを表示させます。色コードの入力フォームに『C59F78』と入れます。
・左パネルのメニュータブ『コンテンツ』を開き、『レイアウト』の設定をします。まずは『配置』の設定です。『｜←』『→｜←』『→｜』『←｜→』の4つのアイコンが並んでいますが、一番左から『左』『中央』『右』『ストレッチ』という設定の順番になっています。『→｜←』を選択して配置を中央にします。
・メニュータブの『高度な設定』を開いて『マージン』を設定します。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の値だけ入力ボックスに『10』と入れます。
・左から3番目のカラムを設定していきます。カラムの『＋』をクリックしてウィジェット一覧を開き、『基本』の項目から『内部セクション』をドラッグ＆ドロップでカラムの中に入れます。１つのカラムの中に二つカラムが入っている状態になります。
・中に入れたカラムの幅を調整していきます。まずは左のカラムのカラムアイコンをクリックして左パネルの『レイアウト』をクリックして『カラム幅』を『25』にします。次は、右のカラムも同じ流れで『カラム幅』を『75』にします。
・次は左カラムに『アイコン』を挿入します。『＋』をクリックでウィジェット一覧を表示させ、『基本』から『アイコン』のウィジェットをドラッグ＆ドロップで入れると『★』がカラムの中に入ります。
・左パネルの『アイコン』設定からアイコンを変更します。『★』が表示されている所にカーソルを合わせると『アイコンライブラリー』のボタンが表示されるのでそこをクリックします。
・多種多様なアイコン一覧が表示されます。上の検索フォームからアイコンを検索できますが、キーワードを英語で入力する必要があります。今回は電話のマークを入れたいので『phone』と検索すると電話のアイコンが出てきます。使用したいアイコンをクリックするとアイコンが変更されます。
・左パネルの『スタイル』からアイコンの設定をします。『配置』は『右』にしてください。その下のボタンは『普通』を選択し、次はメインの色を設定します。水色の正方形をクリックしてカラーピッカーの色コードの入力フォームに『3DA7B3』と入力してください。
『サイズ』は『35』に設定します。
・『高度な設定』を開いて『マージン』を設定します。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の値だけ入力ボックスに『15』と入れます。
・次は、アイコンウィジェットの右横のカラムを設定します。ここには電話番号を入れます。『＋』をクリックでウィジェット一覧を表示させ、『基本』から『見出し』のウィジェットをドラッグ＆ドロップで入れましょう。
・左パネルのメニュータブ、『スタイル』から設定していきます。『配置』は『左』にします。『タイポグラフィ』の設定は以下の通りです。
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：25
太さ：700 (Bold)
・文字色設定の上にあるボタンは『普通』を選択します。『文字色』は今までと同じように四角をクリックしてカラーピッカーを表示し、色コードの入力フォームに『747474』と入力してください。
・ここまで設定出来たら左パネルのメニュータブ、『コンテンツ』から『タイトル』を入れます。『タイトル』には、電話番号を入力します。『000-123-456』と入れてください。
・『高度な設定』を開いて『マージン』を設定します。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の値だけ入力ボックスに『15』と入れます。
・次は、一番右のカラムを設定していきます。ウィジェットを入れる前に、カラムアイコンをクリックして左パネルのメニュータブ『スタイル』から背景色を設定します。
・『普通』ボタンを選択し、その下『Background Type』の文字の右側にあるブラシマークの『クラシック』をクリックします。すると、色の設定項目が出てくるので『赤い斜線』の四角をクリックしてカラーピッカーを表示させ、色コードの入力フォームに『AF9578』と入れます。
・背景色が入ったらカラム内の『＋』をクリックしてウィジェット一覧を開き、『基本』から『アイコン』ウィジェットをドラッグ＆ドロップで入れます。
・左パネルの『アイコン』設定からアイコンを変更します。『★』が表示されている所にカーソルを合わせると『アイコンライブラリー』のボタンが表示されるのでクリックします。
・『検索フォーム』に『calendar』と入れてカレンダーのアイコンを選択します。
・左パネルの『スタイル』からアイコンの設定をします。『配置』は『中央』にしてください。その下のボタンは『普通』を選択し、次はメインの色を設定します。水色の正方形をクリックしてカラーピッカーを開きます。カラーピッカーのカラー選択エリア(グラデーションの四角形のエリア)内にある、丸いカーソルを左上端の白い部分にドラッグしてもっていくと、背景色が『白』に設定できます。カラーピッカーの一番下の色コードの入力フォームに『#FFFFFF』と入っていればOKです。『サイズ』は『50』に設定します。
・『高度な設定』を開いて『マージン』を設定します。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』の値だけ入力ボックスに『10』と入れます。
・カレンダーアイコンの下にテキストを入れます。最初にセクションを出した時と同じでグレーの点線のボックスの中の『＋』のボタンをクリックします。
・『＋』をクリックすると、『SELECT YOUR STRUCTURE』の文字の下にセクションのレイアウトが出てくるので、上段の一番左のレイアウトを選択しましょう。
・新しく追加したセクション内の『＋』をクリックして『ウィジェット一覧』を開き、『基本』から『テキストエディター』のウィジェットをドラッグ＆ドロップでカレンダーアイコンの下にもっていきます。アイコンの下に文章が出てきたらOKです。
・左パネルのメニュータブ、『スタイル』から設定していきます。『配置』は『中央』にします。『タイポグラフィ』の設定は以下の通りです。
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：15
太さ：700 (Bold)
・文字色設定の上のボタンは『普通』を選択します。文字色を設定したいので、カラーピッカーを開きます。カラーピッカーのカラー選択エリア(グラデーションの四角形のエリア)内にある、丸いカーソルを左上端の白い部分にドラッグしてもっていくと、背景色が『白』に設定できます。カラーピッカーの一番下の色コードの入力フォームに『#FFFFFF』と入っていればOKです。
・左パネルのメニュータブ『コンテンツ』から、テキストをいれます。『テキストエディター』に入っている文章を消して『予約する』と入れましょう。
・『高度な設定』を開いて『マージン』を設定します。今回は『上』と『下』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上』と『下』の値をそれぞれ入力ボックスに『-15』と入れます。
・これで、デスクトップ版のヘッダーのデザインは完成です。先ほど出した空のセクションにカーソルを合わせるとピンクタブが表示されます。『×(削除)』をクリックして空のセクションは削除しておいてください。
・左パネルの一番下に『更新』ボタンがあるので、ここまでの作業を保存しておきましょう。
・左パネルの右側面に『>』マークのタブがあり、クリックするとパネルが非表示になるので、フルスクリーンでデザインを確認できるようになります。
レスポンシブ設定～タブレット～
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックするとタブレット用の編集画面に切り替わります。
・カラム幅の調整をしていきます。ロゴが入っているカラムのカラムアイコンをクリックして左パネルのレイアウトから『幅：90』に変更します。
・次に、横線が並んでいる『メニューアイコン』が入ったカラムをクリックしてカラム幅を『10』に設定します。
・ロゴをクリックしてスタイルから『幅：25』にします。次に『高度な設定』を開いて『マージン』を設定します。今回は『上』『右』『左』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上：10』『右：-10』『左：50』に設定します。
・メニューアイコンをクリックしてコンテンツからレイアウト設定をします。下の方にある『メニューアイコン』の変更をします。『アイコンライブラリー』を開いて『Bars』という3本線のアイコンに設定しましょう。
・スタイルを開いて『メインメニュー』の設定をします。『水平方向のパディング：30』、『垂直方向のパディング：15』『項目間の間隔：15』『行間隔：10』に設定します。
・次はスタイル設定メニューの下にある『ドロップダウン』の設定をします。真ん中あたりにある『水平方向のパディング：30』『垂直方向のパディング：20』『上部の距離：10』に設定します。
・下にある『Menu Trigger ＆ Close Icon』の設定をします。『アイコンサイズ：30』『色』をカラーピッカーから『747474』に設定をします。
・電話番号のところにカーソルを合わせると、内部セクションのピンクタブが出てくるので、『：：：』をクリックして左パネルの『高度な設定』を開き、『レスポンシブ』の設定をします。『表示状態』という項目があるので、『Tablet Portraitで隠す』『モバイル縦向きで隠す』のスイッチをクリックして『非表示』にします。
・次は、『予約する』のアイコンが入ったカラムのカラムアイコンをクリックして、同じように左パネルの『高度な設定』からレスポンシブ設定をします。こちらも『表示状態』の『Tablet Portraitで隠す』『モバイル縦向きで隠す』のスイッチをクリックして『非表示』にします。
・ここまでできたら、左パネルの『更新』ボタンを押して編集を保存します。
レスポンシブ設定～スマートフォン～
・ページ上部のスマホアイコンをクリックするとモバイル縦向きの設定ができるようになります。
・ロゴをクリックして、左パネルのスタイルから『幅：50』にします。
・ロゴが入ったカラムをクリックして、『カラム幅：85』にします。メニューアイコンが入っている方のカラムは、『カラム幅：15』にします。
・もう一度、ロゴマークをクリックして左パネルのスタイルから『配置』を『左』にします。次に『高度な設定』を開いて『マージン』を設定します。今回は『上』だけ値を入力したいので、『🔗』をクリックして、個別に設定できるようにします。ボタンがグレーから白になればOKです。『上：10』に設定します。
・メニューアイコンをクリックして左パネルのスタイルからメインメニューの設定をします。『水平方向のパディング：25』、『垂直方向のパディング：25』『項目間の間隔：0』『行間隔：8』に設定します。
・ドロップダウンの設定をします。『水平方向のパディング：15』『垂直方向のパディング：20』『上部の距離：10』に設定します。
・『Menu Trigger ＆ Close Icon』から『アイコンサイズ：25』にします。
・『ドロップダウン』の設定から、ドロップダウンメニューに『Box Shadow』をつけます。『Box Shadow』の設定項目の右にある『ペンマーク』をクリックすると、『Box Shadow』の設定パネルが出てきます。それぞれの項目に以下の値を入力します。
水平：5
垂直：5
ぼかし：10
スプレッド：0
・『Box Shadow』の設定パネルの一番上に『色』の設定があります。右の四角形をクリックするとカラーピッカーが出てくるので、一番下の色コードの入力フォームに『rgba(198, 198, 198, 0.5)』と入れましょう。コピー＆ペーストして入れてください。
・スマートフォン版の設定は以上です。左パネルの更新ボタンを押して編集内容を保存しておきましょう。
・一度、ページ上部のデスクトップのアイコン(PCアイコン)をクリックして、全体のデザインが確認出来たら左パネルの左上にある『ハンバーガーメニュー(3本線のメニューアイコン)』をクリックします。メニューが出てくるのでその中から『終了』をクリックしてElementorの編集画面から出ます。
