【Elementorを使ったWordPressサイト制作⑥】セクションの作り方その２
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを作ります。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
はじめに：ブロックはElementorの「カラム」をベースに作っていきます。
今回作っているwebページのデザインはこちらです。
前回から「セクション①」を作成しており、今回は、画像と小見出しで構成されている部分（今回は「ブロック」と呼びます）を作っていきます。
ブロックは画像と小見出しのペアが３つあるので、まず１つのペアを「コンテナ」で作って、「コンテナ」を３つに複製する方法を使います。
ではさっそく作っていきましょう。
【ブロックの作り方①】画像を設定しましょう
前回の作成の続きから始めます。
見出しの下にある「＋」マークをクリックします。
クリックすると、次のような画面になりますので、２つ横並びのもの（画像ではグレーの部分）を選んでください。
このような四角が編集画面に追加されました。
この２つの四角の部分を「コンテナ」と呼びます。
２つの四角を入れた大きい部分も「コンテナ」で、Elementorでは、すべてのウィジェットが「コンテナ」に入った状態でレイアウトされます。
では、小さいコンテナに画像を追加していきます。
左側のウィジェットメニューから「画像」を選んだまま、左側のカラムまで持っていきましょう。
左側の「画像を選択」をクリックして、画像を選びましょう。
これで画像が配置されました。
【ブロックの作り方②】テキストを設定しましょう
左上の「画像を編集」の右脇にある９つの点マークをクリックして、ウィジェットメニュー画面に戻ります。
今回は、テキストは「テキストエディター」で追加します。
左側の「ビジュアル」部分に「制作例」と入力。
また、「テキストエディターを編集」の真下にある「スタイル」に移動して、次のように設定します。
配置：中央揃え
文字色：＃333333
タイポグラフィ：Noto sans JP Bold 18px
（以前、グローバルフォント・グローバルカラーで登録している方は、地球儀マークから情報を呼び出せます）
これで１つのコンテナができあがりました。
【ブロックの作り方③】コンテナを複製しましょう
最後に、コンテナを複製して横並びにします。
コンテナにポインター（矢印）をのせて、灰色の四角マークを出します。
灰色の四角マークを右クリックしてみてください。
操作のメニュー画面が出てきますので、「複製」を選択。
コンテナが横並びに２つ複製されました。
同じ方法で、もうひとつ追加します。
最後に、空っぽのコンテナは必要ないので、空っぽのコンテナを選びます。
右クリックから、一番下の「削除」で削除しましょう。
これで完成です。
まとめ：同じものを複数作るときには、「コンテナ」を活用しましょう
最後にプレビュー画面で、確認してみましょう。
今回のように、同じ構造のものを複数作るときには、１つ１つ作るのではなく、最初に基本のコンテナを作ったら複製する方法が便利です。
ここまでご覧いただきありがとうございます。
次はいよいよ、「セクション①」の完成です。
ご自身のポートフォリオやLPなど、自分で作ってみたい！という方はぜひ次回もご覧ください。
どうぞよろしくお願いいたします。
