みなさんこんにちは、プロクラスの村瀬です。
今回はWordPressのプラグインで投稿や固定ページの作成でよく使用する「Elementor」の機能、「Flexbox Container」の使い方についてご紹介いたします。
目次
Elementor（エレメンター）とは？
WordPressで使用できるプラグインで、直感的にサイトのレイアウトの調整や様々な設定をすることが出来ます。主にサイト内の投稿記事や固定ページを編集する際に活躍します。管理画面から簡単にカスタマイズできるので、コーディングの知識がなくても比較的扱いやすくチャレンジしやすいプラグインだと思います。
Flexbox Containerの使いどころ
レスポンシブの調整がしやすくなります。例えばPCの際は写真などを横に4つ並べて表示し、スマホの際は2つずつ並べて表示したい場面があるかと思いますが、その調整がコーディングをしなくても簡単に表現できてしまいます！
Elementorをインストール
まずはWordPressの左のバーの中の「プラグイン」をクリックし、検索窓から「Elementor」を検索してインストールします。しばらくすると有効化のボタンが表示されるのでクリックしてください。
Elementorの編集画面
投稿ページ、もしくは固定ページ編集画面に移動し、新規作成か編集したい記事を選択します。編集画面内に「Elementorで編集」という青いボタンがあるのでクリックしてください。
しばらくすると、以下のようなElementorの編集画面が表示されます。
コンテナの設置
次に要素を並べる為のコンテナを設置します。画像内のプラスマークをクリックするとコンテナの追加ができます。
続いて「Flexbox」の方をクリックし、希望のレイアウトに近いものを選択します。今回は横に4つ要素が並んでいるものを選択してみます。
するとこのようにコンテナが設置されます。
コンテナの中身の設定
コンテナの中身を設置していきます。それぞれに画像を入れていきます。左上の四角がたくさん並んでいるボタンをクリックすると様々な要素を選択できるメニューが表示されます。画像をドラッグしてコンテナの中に入れ込んでみましょう。
画像を入れ込めたら、コンテナを選択します。コンテナはピンクの枠のタブの真ん中にあるアイコンをクリックすると選択できます。左のメニューがコンテナの編集に切り替わるので、レイアウトのタブが選択されているのを確認し、「Wrap」の欄にある折り返しをしているアイコンをクリックしてください。
次にスマホ時には画像が2つ並びになるように幅を指定します。画像を囲んでいる枠を選択し、左のメニューがレイアウトのタブが選択されているのを確認します。「幅」のすぐ左にパソコンのアイコンがあるのでクリックし、スマホのアイコンを選択します。
スマホでの見た目調整画面に切り替わります。何もしていない状態だと写真が縦に1列の状態で並んでいるかと思います。それぞれの写真の枠の「幅」を50％で指定していくと、2つ並びで表示されるようになります。調整が完了したら公開ボタンか下書き保存をしてください。
いかがでしたでしょうか。簡単に調整ができますので、ぜひElementorの「Flexbox Container」機能を使ってページをカスタマイズしてみてくださいね。