【Elementorを使ったWordPressサイト制作⑩】フッターの作り方その2
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを完成させます。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
今回、作っているwebページのデザインはこちらです。
前回に続き、フッターを作っていきます。
はじめに：前回作ったコンテナにウィジェットを入れていきます
前回、基礎となるコンテナの作成をしています。
こんな感じで、まだデフォルトのままです。
ここから、それぞれのウィジェットを入れます。
上のコンテナが４つの小さいコンテナに分かれているので、順番に設定していきましょう。
【上のコンテナ作成①】一番左の部分にウィジェットを入れます
一番左の部分は、ロゴ画像と「webデザイナー」というテキストです。
右の編集画面から、それぞれの部分をクリックして左側に編集メニューを呼び出します。
テキスト部分は次のように設定しました。
色：#333333
フォント：noto sans JP 16px Bold
これでこの部分は終了です。
【上のコンテナ作成②】右から２番目の部分にウィジェットを入れます
この部分は、ページ内ナビが３つ縦並びになっています。
まずは一番上のナビメニューを作成します。
「テキストエディターを編集」の下の「コンテンツ」で「制作実績」と入力し、「スタイル」でデザインを調整。
・「文字色」:#333333
・「タイポグラフィ」:Noto sans JP 14px medium
編集画面の「制作実績」の部分を右クリックして、複製などのメニューを呼び出します。
「複製」を選択し、３つメニューを作ります。
それぞれ、テキストを「サービス内容」「よくあるご質問」に変更。
これでこの部分は完成です。
【上のコンテナ作成③】一番の右の部分にウィジェットを入れます
この部分はボタンが２つ縦並びになっています。
前回作ったボタン部分を編集しても良いですが、以前にボタンを作成しているので、コピーしてきても大丈夫です。
（コピーと貼り付けは右クリックで選択できます）
今回は、以前に作成したボタンを貼り付けました。
テキストを「contact」に変更しています。
「スタイル」の設定はこのようになっています。
次に、ボタン部分を右クリックして複製しましょう。
複製できたら、テキストを電話番号に変更しておきます。
背景色などを変更したいので、「スタイル」を選択します。
・「文字色」:#01406E
・「色」：#FFF
・「パディング」:上下10px 左右48px
上のボタンではマウスオーバーの設定がされていますが、今回はなしにしたいので、「マウスオーバー」の設定をデフォルトに戻しておきます。
「マウスオーバー」を選んで、カラーピッカー画面を出します。
矢印がぐるんと回っているようなマークで、デフォルト設定に戻すことができます。
まとめ：下のコンテナにコピーライトをいれて完成です
最後に、下のコンテナにコピーライトを入れます。
「コンテンツ」画面から「©︎2023 COCO」と入力します。
「スタイル」画面に移動して、
・「配置」：中央揃え
・「文字色」:#FFFFFF
・「タイポグラフィ」:Noto sans JP 13px normal
に設定して終了です。
これでフッターが出来上がりました。
ただ、ちょっとロゴが大きかったり、全体のバランスがデザイン案とは違う感じがするので、次回に微調整をして完成させたいと思います。
ここまでご覧いただきありがとうございました。
引き続きよろしくお願いいたします。
