[実践編 Level 14.] WordPress(ワードプレス)|ページビルダープラグイン「Elementor」の使い方① 画像の配置を使いこなそう!

WordPress(ワードプレス)でページを作成していく上で、いくつか方法があるが、ここではページビルダー系のプラグインを使ってサイトを構築していこう。

ページビルダープラグインを使えば、簡単に高品質なサイトが構築可能だ。コーディングなどの難しい知識も必要ないぞ。

このレベルでは、ページビルダープラグインの中でもオススメの「Elementor」の使い方を攻略していく。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

高機能ページビルダープラグイン「Elementor」

ページビルダー系のプラグインはいくつか種類があるが、その中でも私が個人的に使いやすいと感じるのは「Elementor」というプラグインだ。

先ずはインストールして使ってみよう。

プラグイン」→「新規追加」→「Elementor

インストールが完了すると、ダッシュボードのメニュー一覧に「Elementor」の項目が追加される。

「Elementor」はデフォルト設定でも問題なく使えるので、このまま使用していこう。

「Elementor」の使用は「固定ページ」の編集画面から可能だ。

[実践編 Level 13.]でトップページに設定した「固定ページ」の編集画面を開こう。

関連記事

カスタマイザーでレイアウトとカラー設定を変更したら、さらにカスタマイズを進めていこう。現状では、トップページに2つの記事(デフォルトで入っている記事)が投稿されてしまっているので、これを変更して、空のページが表示されるように設定を変える必[…]

固定ページを開くと、編集画面に「Elementorで編集」というアイコンが表示されているはずだ。

ここをクリックして、Elementorの編集画面を開こう。

Elementorの編集画面はとてもシンプルにできている。

左側には「ウィジェット」と呼ばれる各種ツールが有り、このツールを右側のウィジェットエリアにドラッグすることで使用が可能だ。

ページビルダープラグイン「Elementor」編集画面

画像を配置してみよう

手始めに、画像を配置してみよう。

左のウィジェットから「画像」を選択して、編集エリアにドラッグする。

ドラッグすると下記のような画面に切り替わる。

ウィジェットメニューが切り替わるので、「画像の選択」に表示されている「Choose Your image」のアイコンをクリックして画像を差し替えよう。

画像を差し替えたら、設定を調整してみよう。

ここでは、編集に便利なNavigator(ナビゲーション)を呼び出して作業しよう。

編集エリアの画像を「右クリック(Macの場合はcontrol+クリック)」で「Navigator」を選択する。

「Elementor」の編集エリアは3つの層に別れていて、一番上から「セクション」、「カラム」、「ウィジェット」となっている。

Navigator(ナビゲーション)を見えてもらうと分かりやすいかと思う。

【セクション】
編集エリアの「ウィジェットをここに追加」にウィジェットをドラッグ、またはその横にある「+」を押してカラムを作成した際に、自動的に増えていく。

【カラム】
セクションを作成する際にカラムを作った場合のみ有効。

【ウィジェット】
「セクション」または「カラム」にウィジェットを追加する度に増える。
※参考画像は「画像ウィジェット」が配置された状態。

このように3つの層に別れているが、基本的にコンテンツ毎に「セクション」を作っていく感じでOKだ。

では、画像の設定をいじって少し見せ方を変えてみよう。

画像を画面に対して全幅に変更してみよう

画像を全幅にするには、先ずは「Navigator」から「セクション」を選択する。

左にセクション編集の項目が表示させるので、コンテンツの幅を「全幅」に変更する。
続いて、「Navigator」から「画像」を選択。
タブから「スタイル」を選んで、画像の「幅」を100%に変更。

 
 

これで、画像が画面に対して全幅に変更された。

一度、下のメニューバーからプレビュー(目のアイコン)を選んでサイトを表示してみよう。

画像の余白を無くそう

画像の周りに少しばかりの余白ができてしまっているのがわかるだろうか、続いてこの余白を無くしたいと思う。

Navigator」から「セクション」を選択する。

「カラムのすき間」という項目があるので、ここを「すき間なし」に変更。

これで画像のすき間が無くなった。

もし、画像がボヤけてしまう場合は画像のサイズ指定を確認しよう。

画像のサイズ指定を変更しよう

Navigator」から「画像」を選択する。

「画像サイズ」の箇所を「フル」に変更すると、画像がリサイズされずに配置させるので、画像がボヤけたりするのを防ぐことが可能だ。
全幅にする場合、画像のサイズは最低でも2000px以上はあった方がいいだろう。それ以下だと画面上でボヤける可能性があるので、余裕を持って配置することをオススメする。
ただ、あまりサイズが大きいと今度は画像の容量が上がってしまうので、注意が必要だ。
画像の容量サイズは大きくても500KB〜700KB以内には抑えたい。

画像をボックス(固定幅)に変更するには

画像を全幅にしたくない場合は、横幅を固定したボックスに変更しよう。

ちなみに、デフォルトでは固定幅になっているので戻すだけの作業となる。

Navigator」から「セクション」を選択する。

「コンテンツの幅」を「ボックス」に変更すると横幅は固定させる。

下のつまみを動かすか数値を入れると幅が変更できる。

コンテンツの幅は1200px〜900pxくらいがPC上では綺麗に見えるサイズだ。

プレビューをタブレットとスマホに切り替えて確認してみよう

「Elementor」にはPCの他に、タブレットとスマホでの表示がプレビューで確認できる便利な機能が付いている。

切り替えは一番下にある「プレビュー(PCのアイコン)」から可能だ。
[タブレットプレビュー]
[スマホプレビュー]
各ディバイスでの見え方の調整はこのプレビュー画面から可能だ。
「Elementor」では、PC、タブレット、スマホで編集画面が別れている(画面のサイズで区別している)ので、スマホプレビューで編集したものはPCやタブレットには影響しない。
タブレットとスマホの調整はPCのトップページが出来上がってから設定する流れでOKだ。
 ページビルダープラグインは「Elementor」がオススメ
 コンテンツの構築には「ウィジェット」を編集画面にドラッグ
 各ディバイスでのプレビューの切り替えは下のメニューから可能
このように、「Elementor」は感覚的な操作でページを構築できるので、とても操作性の高いページビルダーだ。
まだまだ様々な設定が可能なので、以降のレベルでも、Elementorを使ってトップページの構築を攻略していきたいと思う。
では、冒険者諸君、GOOD QUEST !!