【Elementorを使ったWordPressサイト制作③】サイトの基本設定
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現するお手伝いをする」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回から、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回から、Elementorを使って、実際にサイトを作ってみます。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、ご自身のサーバーでWordPressとElementorが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
今回作成するサイトデザインはこちらです。
はじめに：Elementorの基本設定をしましょう
Elementorは、自由に編集ができる便利なプラグインですが、いくつか先に準備をしておいたほうが、後の作業がしやすくなります。
今回作ろうとしているサイトで、やっておいた方が良い基本設定を、いくつかご紹介しますので、ぜひ参考にしてみてください。
【Elementorの初期設定①】色の設定
では、Elementorの基本設定を出す手順からご紹介します。
Elementorの編集画面の、左上の３本線をクリック。
一番上の「サイト設定」を選択します。
「グローバルカラー」で色の設定を、「グローバルフォント」でフォントの設定をします。
今回は、色の設定をしたいので、「グローバルカラー」を選択。
それぞれの部分をクリックすると変更できますので、今回は次のように登録しました。
色の設定は色番号でも、画面上で選んでも大丈夫です。
設定が終わったら「更新」をクリックしておきます。
【Elementorの初期設定②】フォントの設定
グローバルフォントでは、文字の種類・大きさ・太さなどを設定します。
先ほどの「グローバルフォント」を選択しましょう。
こちらも「グローバルカラー」と同じように設定ができます。
今回設定したのは、次の４種類です。
・見出し：Arial Bold 48px
・見出し（日本語部分）：Noto sans JP Bold 14px
・ボタン・商品名：Noto sans JP Bold 18px
・テキスト：Noto sans JP Regular 16px
設定が終わったら、「更新」ボタンをクリックして終了します。
【Elementorの初期設定③】レイアウトの設定
最後にレイアウトの設定をします。
Elementorの編集画面の左下の歯車マーク→「固定ページレイアウト」をクリック。
何もない状態からスタートしたいときには、「Elementor Canvas」から始めます。
まとめ：Elementorの設定が終わったら、他の素材の準備もしておきましょう
Elementorの設定は以上で終わりです。
他に必要な画像やロゴなど、素材を準備しておくとサイト制作がスムーズにできます。
ここまでご覧いただきありがとうございます。
引き続き、Elementorを使ってサイトを作っていきます。
ご自身のポートフォリオやLPなど、自作で頑張ってみたい！という方はぜひご覧ください。
引き続きどうぞよろしくお願いいたします。
