【Elementorを使ったWordPressサイト制作おまけ】フッターの作り方その3
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回まで、WordPressのプラグイン「Elementor」を使ったサイト構築の方法をお伝えしてきました。
最後まで一通り完成しましたが、実際に作ってみた方は、最初に用意したデザインと少しフッターの感じが違っていることに気づかれたのではないでしょうか？
今回は、フッターの修正を例として、Elementorの細かな設定をご紹介していきます。
「Elementor」でできることはわかったけど、もう少し使いこなしてみたいという方は、ぜひ参考になさってみてください。
はじめに：デザインとElementorの画面の違いは、「サイズ」の違い
それでは早速、デザインとElementorで作ったサイトのフッター部分を見比べてみます。
デザインのフッター部分
Elementorで作ったサイトのフッター部分
基本的な文字などは同じですが、個々のサイズがだいぶ違います。
今回は、修正を３点に絞りました。
①ボタンをもう少し横長にしたい
②「COCO」のロゴが大きすぎる
③上にゆとりがない感じがする
では、次からそれぞれのサイズを修正していきます。
【Elementorでのサイズ調整方法①】コンテナ幅を調整
まずは、「①ボタンをもう少し横長にしたい」を解決します。
ボタンが横に伸ばせないのは、隣のメニューナビが入っているコンテナとボタンのコンテナが幅25％になっているためです。
（コンテナとは、「画像」などが入った箱の部分のことを指します）
こちらがメニュー部分のコンテナ幅。
こちらがボタンのコンテナ幅。
どちらも25%なので、ボタンを伸ばすことができません。
そのため、メニューのコンテナを小さく、ボタンのコンテナを大きくします。
メニューのコンテナは幅14%に。
ボタンのコンテナ幅は36%に設定しました。
ですが、ボタン幅は変わっていません。
実は、ボタンそのものの設定を変える必要があり、コンテナだけでは不十分です。
ボタンに関しては、後ほど完成させます。
【Elementorでのサイズ調整方法②】ウィジェットをサイズ指定
次に、「②「COCO」のロゴが大きすぎる」という部分を修正します。
コンテナ幅の変更でもできそうですが、今回は、画像そのもののサイズを変更することにしました。
「画像」を選択したら、左上の「スタイル」へ移動します。
「幅」を110pxに設定。
ここで単位が「px」になっていることを確認してください。
単位はそれぞれの項目の右上にあり、「％」「px」などが選択できます。
今回はpxを使っていますが、ご自身の使いやすい単位で調整してみてください。
これで画像のサイズが変更できました。
【Elementorでのサイズ調整方法③】余白は「マージン」か「パディング」
最後に、「③上にゆとりがない感じがする」問題を解決しましょう。
上に余白がないために、そのように見えています。
余白を作るために使うのが、「マージン」と「パディング」。
ざっくり言うと、「マージン」は外側の余白、「パディング」は内側の余白です。
今回は、フッター全体のコンテナ（グレーの背景部分）に余白をつけることにします。
このコンテナの「マージン」はグレー部分の外側、「パディング」がグレー部分の内側です。
「マージン」「パディング」の設定は、左上の「高度な設定」からできます。
今回はパディングを50pxに設定しました。
最後に、ボタンの設定もしておきます。
ボタンのサイズは「パディング」で設定します。
ボタンの場合は、「高度な設定」ではなく、左上の「スタイル」を選択してください。
右側のリンクボタンをはずすと、上下左右それぞれの設定ができるようになります。
今回は上下10px、左右90pxに設定しました。
これで完成です。
まとめ：Elementorのさまざまな「サイズ設定」の方法を使ってみましょう
これで、Elementorの基本的な使い方は一通りご紹介いたしました。
もちろん、Elementorでは他にもさまざまなことができます。
ぜひElementorを使って、webサイトを作ってみてください。
ここまでご覧いただきありがとうございました。
もしwebサイト制作でお困りのことがございましたら、ご相談ください。
ご相談のメッセージは無料で受付しておりますので、お気軽にお声がけいただけたらと思います。
