【Elementorを使ったWordPressサイト制作⑤】セクションの作り方その１
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを作ります。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
はじめに：セクションの構造を確認ー「見出し」を作ります
今回作っているwebページのデザインはこちらです。
今回はこの中の「セクション①」を作っていきます。
作業に入る前に、セクション①の構造を詳しく見ておきましょう。
今回は、
・「見出し」
・「画像と小見出しの組み合わせが３つ」
・「ボタン」
の３つの中から、「見出し」部分を作っていきます。
【見出しの作り方①】英語の見出しを作りましょう
Elementorでテキストを入力できるウィジェットは、おもに次の２つです。
・見出し
・テキストエディター
どちらを使っても大丈夫ですが、今回は、
・英語→見出し
・日本語→テキストエディター
を使っていきます。
左のウィジェット一覧から、「見出し」を選びます。
「見出し」をクリックすると、見出しが右側の編集画面に入りました。
「Elementor」の文字の下にある「コンテンツ」の画面では、文字を入力して、中央揃えにしておきます。
次に「スタイル」を選んで、フォントと色を設定しましょう。
・フォント：Arial Bold 48px
・カラー：#01406E
（以前、グローバルフォント・グローバルカラーで登録している方は、地球儀マークから情報を呼び出せます）
【セクションの作り方②】日本語見出しを作りましょう
次に日本語部分を「テキストエディター」で入力します。
「見出しを編集」の右脇にある９つの点から、ウィジェット一覧へ戻ります。
「テキストエディター」をクリックすると、編集画面にテキストが追加されました。
左側に、もともと入っている文章を消して、「制作実績」と入力します。
「スタイル」に移動して、フォント・色・文字揃えを設定します。
・フォント：Noto sans JP Bold 14px
・色：#01406E
・文字揃え：中央揃え
に設定すると、次のように表示されます。
【見出しの作り方③】余白を調整しましょう
最後に、余白を整えておきます。
余白は、「スタイル」の右となりにある「高度な設定」から変更が可能です。
まずは、上の「見出し」を次のように設定します。
今回は、「マージン」の「上」を50pxにしました。
ここで注意しておきたいのは数字を入れる前に、チェーンのマークをはずしておくこと。
グレーになっている時には、上下左右すべてに同じ数字が入るようになっています。
今回は、上だけに数字を入れたいので、チェーンのマークははずしておきましょう。
同じように、下の「テキストエディター」も「高度な変更」から余白を整えます。
先ほどと同じように、チェーンマークをはずしてから、「マージン」の「上」を-30pxにします。
すべて終了したら「更新」ボタンを押しておきましょう。
まとめ：「見出し」が完成しました！
今回の作業はこれで終了です。
それでは出来上がりを「プレビュー」で見てみましょう。
（「更新」ボタンの隣にある「目」のマークです）
画面をスクロールすると、見出しが出てきます。
ここまでご覧いただきありがとうございます。
引き続き、Elementorを使って「セクション①」を作っていきます。
ご自身のポートフォリオやLPなど、自作で頑張ってみたい！という方はぜひ次回もご覧ください。
どうぞよろしくお願いいたします。
