【Elementorを使ったWordPressサイト制作④】ファーストビューの作り方
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでファーストビューを作ります。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
はじめに：ファーストビューに必要な素材を確認しましょう
今回は「ファーストビュー」を作っていきます。
全体の完成イメージは次の通りです。
今回のファーストビューでは、
・背景の画像
・ロゴ
の２つの画像素材を使います。
【ファーストビューの作り方①】背景画像を設定
まず、Elementorの管理画面から、コンテナを１つ作ります。
コンテナを設置できたら、左のメニューを次のように設定してください。
「幅」と「最小の高さ」は単位に気をつけてください。
設定ができたら、上の「レイアウト」から「スタイル」をクリックして移動します。
上から順番に
・「Background Type」の左端を選択
・「画像の選択」を選ぶと、画像の選択画面になるので、画像をアップロードして設定
・「位置」で画像の位置を設定
します。
最後に「更新」をクリックしておきましょう。
【ファーストビューの作り方②】ロゴを設定
次にロゴ画像を設定します。
「elementor」のタイトルの右側にある９つの点を選ぶと、個々のパーツ（ウィジェットと呼びます）が出てきます。
「画像」を選択したまま、右側の「＋」マークへドロップ。
次のように、「画像を選択」からロゴ画像を選んで、設定します。
ロゴの下に「Web designer」と文字を入れたいので、また「elementor」の右脇の９つの点マークをクリックして、ウィジェットを呼び出します。
次は「テキストエディター」を選んで、ロゴの真下に入れます。
ロゴの真下がピンクになったのを確認して入れましょう。
テキストは左側のボックスに入力します。
上のメニューを「コンテンツ」から「スタイル」に変更して、配置・文字色・タイポグラフィを選択します。
今回は、「配置」を中央揃えにしました。
また、前回「グローバルカラー」「グローバルフォント」を設定した方は、地球儀マークから情報を呼び出して使うことができます。
ここまでできたら「更新」をクリック。
【ファーストビューの作り方③】背景をカスタマイズ
最後に、スクロール時に背景が固定される動きに設定してみます。
画像のように、コンテナを選んで
・「添付」→固定
・「繰り返し」→繰り返しなし
・「Display size」→カバー
を設定します。
これで、背景が固定され、ページがスクロールされるようになりました。
背景画像は動かず、前のロゴとテキストだけが上に移動しています。
まとめ：完成したらプレビューしてみましょう
全部できあがったら、下の「目」マークからプレビュー画面を確認します。
お疲れさまでした。これでファーストビューが完成です。
ここまでご覧いただきありがとうございます。
次回も引き続きサイトを作成していきます。
ご自身のポートフォリオやLPなど、自作で頑張ってみたい！という方はぜひご覧ください。
どうぞよろしくお願いいたします。
