【Elementorを使ったWordPressサイト制作⑨】フッターの作り方その１
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを完成させます。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
今回、作っているwebページのデザインはこちらです。
今回から、フッターを作っていきます。
はじめに：フッターのレイアウトを確認しましょう
フッターは、さまざまなウィジェットが入っていますので、まずはそれらを確認してみます。
また、配置としては、大まかに次のように考えられます。
大きな赤いコンテナが２つあって、上のコンテナには４つ青いコンテナが入っているイメージです。
それでは、実際に作っていきましょう。
【フッターのレイアウト①】コンテナを準備しましょう
最初に、先ほど確認した形のコンテナを作ります。
コンテナの「＋」マークを押して、次の画面を出します。
ここでは、右上の４つ縦並びのコンテナを選択。
このようにできあがりました。
下のコンテナは、ウィジェットが１つで直接コンテナに入れられるので、ここでは作成しません。
今回、コンテナに背景色があるので、設定しておきます。
コンテナが選択されている状態（ピンク色の枠がついている状態）のまま、「コンテナを編集」のすぐ下にある「スタイル」を選びます。
「Backgroud Type」の一番左を選択し、
・「色」:#EEEEEE
と入力して終了です。
【フッターのレイアウト②】１つ目のコンテナに必要なウィジェットを入れましょう
次に、１つ目のコンテナにウィジェットを置いていきます。
・一番左のウィジェット
「画像」と「テキストエディター」を縦並びに入れます。
・右から２番目のウィジェット
「テキストエディター」を１つ入れます。
・一番右のウィジェット
「ボタン」を１つ入れます。
ウィジェットメニューが見つからない場合は、「elementor」などと書いてある部分の右脇の９つの点マークを選んでください。
このような形になりました。
共通するウィジェットはデザインを整えてからコピーするので、今回はこれだけ入れておきます。
【フッターのレイアウト③】２つ目のコンテナを作成しましょう
１つ目のコンテナの下に、「テキストエディター」を追加します。
全体の背景色を整えるために、テキストエディターを追加したコンテナを選びます。
カーソルをコンテナあたりにあてると、中央上にピンクのマークが出てきます。
中央の９つの点のマークを選ぶと、コンテナを編集することができます。
上にある「スタイル」から、「背景」を選択。
・「Background Type」を一番左を選びます
・「色」：#04105E
これで、フッター部分の背景色はすべて設定できました。
まとめ：これでフッターのレイアウトが完成しました
フッターに限らず、elementorはコンテナの配置が基本になります。
できるだけシンプルにコンテナのレイアウトを考えて、その中にウィジェットを入れるように配慮すると、サイトが作りやすいと思います。
ここまでご覧いただきありがとうございました。
次回は、フッターのウィジェットを整えていきます。
引き続きよろしくお願いいたします。
