こんにちは、ユキです＾＾
WordPressのElementorでは、まず「セクション」を追加して、そのセクションの中に
「ウィジェット」を配置していくっていうのが基本的なWebページの作り方よ。
でもセクションの中に配置するウィジェットの1つに「インナーセクション」っていうものが
あって、セクションの中にセクションを入れる意味がよく分かんないってことがあるんじゃ
ないかしら。
そこでElementorでWebページを作る際に使うセクションとインナーセクションの違いや
そもそもセクションやウィジェットとは何なのかなどについて詳しく見ていくわね。
セクションは商品棚、ウィジェットは商品
冒頭でも書いたように、ElementorでWebページを作るには、まず編集画面内に
セクションを追加して、追加したセクションの中にウィジェットを入れていくわ。
基本的にはこれを繰り返してWebページを作っていくんだけど、
・セクション＝商品棚
・ウィジェット＝商品
だと考えると分かりやすいのよ。
スーパーとかコンビニなどのお店では、どこに何が置いてあるか分かりやすくしたり、
お客さんが商品を取りやすくしたりするのに商品棚に商品を並べてるじゃない。
Webページも同じで、まず商品棚となるセクションを並べておいて、
そこに商品となるウィジェットを置いていくことで整理されて見やすくなるわ。
またWebページを作る方としても、自由にウィジェットを配置できるよりはセクションの
中にしかウィジェットが置けないというルールがあった方が作りやすかったりするのよね。
ウィジェットの1つであるインナーセクションとは
セクションが商品棚でウィジェットが商品だとすると、ウィジェットの中にある
「インナーセクション」は何なのかってことになるわ。
インナーセクションはセクションの中に配置するセクションのことで、
セクションの中の「仕切り」だと考えると分かりやすいんじゃないかしら。
例えばWordPressの公式サイトで料金プランのページを見ると、一番上に見出し、
次に簡単な紹介文、無料プランがあって、その下に
・パーソナル
・プレミアム
・ビジネス
・eコマース
という4つのプランを横に並べて表示してるわ。
そして4プランが横に並んだ下にはまた紹介文があって、という構成になってるのよね。
このようにWebページの1部分でウィジェットを横に並べるような場合に、
仕切りとなるインナーセクションを使うの。
WordPressの料金プランページのようなWebページを作るには、まず1つセクションを
追加して、その中に見出しと簡単な紹介文となるテキストのウィジェットを入れるのよ。
そのテキストの下に横に4分割したインナーセクションを入れて、
インナーセクション内に各プランの料金や特徴などのテキストのウィジェットを入れる。
そして4分割したインナーセクションの下に、また紹介文のテキストのウィジェットを
入れることで、料金プランの部分だけ横に4分割されたWebページができるってわけ。
だからセクションは大きな商品棚で、その商品棚に整然と商品を並べるための仕切りが
インナーセクションといった感じなのね。
カラムって何？
インナーセクションを使うとセクション内を横に分割できるという話をしたら、
「カラム」についての説明も避けられないわ。
カラムは、簡単に言うと、セクションを横に分割した際の1かたまりのことなの。
先のWordPressの料金プランページを例にすると、
パーソナルを始めとした4つのプランを横に並べて表示してるじゃない。
あれはインナーセクションを4カラムに分割して、
1つのカラムに1つのプランに関するテキストを入れてるのよ。
だからセクションやインナーセクションを分割しないと1カラム、2分割だと2カラム、
3分割だと3カラムとなるのよ。
またWordPressの料金プランページでは同じ幅で4カラムが並んでるけど、
左右どちらかの端のカラムの幅を狭めたり広げたりなどといったこともできるわ。
ちなみにWordPressでは最大6カラムまで使えるんだけど、他のノーコードツールだと、
3カラムが使えれば良い方で、中には1カラムのみの場合もあるのよねぇ。
インナーセクションを使わなくてもセクションを横に分割できるが・・・
テキストなのウィジェットを横に並べるのに、
インナーセクションを使わないとセクションを横に分割できないってわけじゃないの。
大きな商品棚であるセクションそのものを、
最大6カラムまで横に分割することもできるようになってるわ。
ただセクションそのものを横に分割しちゃうと、そのセクション内は全て横に分割した
状態でウィジェットを配置することになるのよねぇ。
また先のWordPressの料金プランページを例にすると、料金プランを横に並べるのに
セクション自体を4カラムにしちゃうと、上の見出しや下の紹介文も4分割に
なっちゃうってわけ。
4カラム必要なのは料金プランの部分だけで、それ以外の部分は1カラムで良いなど
セクション内で必要なカラム数が違う場合にインナーセクションを使うのね。
インナーセクションを使わずにセクションを細かく追加する
WordPressの料金プランページのように一部分だけ4カラムにするのは、
インナーセクションを使わずにセクションだけでもできなくはないのよ。
まず1カラムのセクションを追加して、その中に見出しと簡単な紹介文、
無料プランを入れる。
次に4カラムのセクションを追加して、
パーソナルを始めとした4プランの料金や特徴をテキストで入力する。
そしてまた1カラムのセクションを追加して紹介文を入れると、
インナーセクションを使わなくても上から1カラム-4カラム-1カラムという配置になった
Webページが作れるの。
この方法で一部分だけ複数カラムに分割したWebページを作っても、
多少手間はかかるかもしれないけど、全く問題は無いわ。
ただElementorでは1セクションを保存しておいて、
別のWebページを作る時にテンプレートとして使うことができるようになってるのよ。
だからインナーセクションを使って上から1カラム-4カラム-1カラムのセクションを作って
保存しておけば、次に同じようなWebページを作る際に1からセクションを
作り直さなくても良いのね。
インナーセクションの中にインナーセクションを配置することはできない
Elementorのウィジェットは基本的にセクション内に配置するもので、
ウィジェットの中にウィジェットを配置するってことはできないの。
だからセクション内にインナーセクションを配置して、
そのインナーセクションの中にさらにインナーセクションを配置することはできないわ。
例えばWordPressの料金プランページで言うと、
インナーセクションを使ってパーソナルを始めとした4プランを横に並べてるわよね。
（実際にインナーセクションを使ってるかどうかは分からないけど・・・）
1つのプランについて記載してるカラムの中に、
もう1つインナーセクションを入れて横に分割することはできないってことなの。
WordPressの料金プランページでは、
各プランごとにできること→できないことの順に縦一列で記載されてるじゃない。
それをインナーセクションの中にインナーセクションを入れて
できること できないこと
・ ・
・ ・
・ ・
といったように横に並べることはできないってことよ。
そうしたい場合は料金プランページを3つのセクションで作り、4プランを横に並べる
4カラムのセクションの1カラムごとにインナーセクションを入れるようにすれば良いわ。
インナーセクションの使いすぎはダメ？
絶対にダメってわけじゃないんだけど、1つのWebページを作るのに
インナーセクションを使いすぎるのはあまり良くないのよ。
インナーセクションをたくさん使うと、Webページ1ページに含まれる要素は
インナーセクションを一切使わない場合よりも多くなるわ。
そうするとWebページの表示速度が僅かに遅くなって、
Googleなどの検索表示順位で不利になっちゃうかもしれないのよね。
要するにインナーセクションをたくさん使ったWebページは、
Googleなど関連ワードが検索されても上位に表示されにくい可能性があるってこと。
実際にWebページの表示速度は、
Googleなどでは検索表示順位を左右する要素の1つになってるの。
検索表示順位が下がると閲覧数も伸びなくなるから、
Webページを作る際にはあまりインナーセクションを使いすぎない方が良いのね。
Elementorの基本であるセクションの使い方
ElementorでWebページを作る際に基本となるのが、「セクション」の使い方よ。
お店でも、どこに商品を陳列するかも大事だけど、
商品棚をどのように配置するかはもっと重要なの。
実際にスーパーやコンビニなんかだと、
お客さんの動線を考えて商品棚が配置されてたりするわ。
だからユーザーが見やすいWebページを作るには、
お店で言うところの商品棚に当たるセクションの使い方が重要ってわけ。
Elementorではセクションは単に配置するだけじゃなくて、セクションの高さや幅を
変えたり、セクション内に入れるウィジェットの位置を調整したりすることもできるのね。
セクションのレイアウトを変更する
Elementorでは、高さや幅などWebページを構成するセクションのレイアウトを
変更できるようになってるわ。
Elementorの編集画面で「ウィジェットをここにドラッグ」の欄にある「＋」ボタンを押すと、
新しいセクションが追加されるわ。
セクションは1つずつ水色のラインで囲まれてて上部分にメニュータブが付いてるん
だけど、このメニュータブをクリックするとセクションの編集画面が表示されるの。
この編集画面を使うことで、セクションの
・大きさ
・幅
・高さ
・セクション内のカラム同士の隙間
なんかを調整することができるのよ。
伸縮セクション
セクション編集画面でレイアウトの一番上にあるのが「伸縮セクション」で、
これをONにすると無条件にセクションの幅をElementorの編集画面いっぱいに
広げることができるの。
WordPressでElementorを使ってWebページを作る場合、最初に
・デフォルト
・Elementorキャンバス
・Elementor全幅
から基本的なページ構成を選択することになるわ。
キャンバスや全幅だとサイドメニューは無いから、
セクションの幅は自動的に画面いっぱいになるのよ。
でもデフォルトだとサイドメニューが付いてるから、
追加したセクションはサイドメニュー分を除いた幅でしか表示できないのね。
伸縮セクションを使うと、デフォルトのページ構成でもサイドメニューを無視して
セクションの幅を画面いっぱいにすることができるの。
ただ、テンプレートを編集してWebページを作る場合は使うこともあるけど、
1からWebページを作っていく場合はあまり伸縮セクションを使う機会は無いのよねぇ。
コンテンツの幅
次は「コンテンツの幅」で、これはセクション内のコンテンツすなわちカラムの幅を
調整するものよ。
「全幅」を選択するとセクションの幅いっぱいにカラムが広がり、
「ボックス」を選ぶとカラムの幅を調整することができるの。
例えばセクション内に文章を入力する場合、あまり横に広がってると読みにくかったり
するから、カラムの幅を少し狭くして文章を縦長にして読みやすくするといったように
使うのね。
カラムの隙間
「カラムの隙間」は、セクションを複数のカラムに分割してる場合、
そのカラム同士の隙間を狭めたり広げたりするのに使うわ。
カラムの隙間には
・デフォルト
・隙間なし
・狭い
・拡張
・広い
・さらに幅広
の6種類あり、隙間なしから下に行くに連れてカラム間の隙間が広くなって、
デフォルトは狭いと拡張の間ぐらいの隙間の広さとなってるの。
例えばWordPressの料金プランページのように、
料金プランを横に並べる場合はカラム間に少し隙間がある方が見やすいわね。
でもあんまり隙間が広すぎると今度はプラン同士を比較しにくくなるから、
狭いかデフォルトぐらいが適当なんじゃないかしら。
同じサイズの画像を貼り付ける場合なんかは、
反対にカラム間の隙間を失くした方が見やすかったりするわよ。
実際にWebページを作る際は、どのぐらいの広さが見やすいか確認しながら、
カラム間の隙間を決めてみてね。
高さ
「高さ」はそのものズバリ、セクションの高さを調整する項目で
・デフォルト
・画面幅に合わせる
・最小の高さ
の3つから選べるわ。
「デフォルト」を選ぶと、そのセクション内に配置されてるウィジットの大きさに合わせた
セクションの高さになるわ。
なのでデフォルトだと「セクションの高さ＝ウィジットの高さ」になるってわけね。
「画面幅に合わせる」は、中身のウィジットとは関係無く、
編集画面でスクロールせずに表示できる目一杯の高さに設定されるの。
最後の「最小の高さ」を選ぶと、セクションの高さの数値を指定することができるのよ。
ただしセクション内に配置されてるウィジェットの影響を受けるから、ウィジェットの高さ
よりも小さい数値を設定するとウィジェットの高さに合わせられちゃうのね。
例えばセクションに配置してるウィジェットの高さが350ピクセルの場合、
セクションの高さを300ピクセルに設定しても、ウィジェットの高さに合わせて
350ピクセルになるってわけ。
カラム位置
「カラム位置」では、セクション内でカラムを
・上
・中央
・下
のどこに置くかを決めるのよ。
例えばセクション内にセクションより少し小さいサイズの画像を貼り付けたとして、
カラム位置を中央にすると、上下に多少のスペースができるわ。
カラム位置を上にすると画像下に大きなスペースができるし、
下にすると上に大きなスペースができるわね。
空いたスペースにインナーセクションを配置して、
画像のタイトルや関連するテキストなんかが付け加えられるの。
カラム位置の選択肢にはもう1つ「ストレッチ」というものがあって、
これはカラムの指定範囲がセクションの高さと一緒になるのよ。
ちょっと分かりにくいんだけど、カラム位置を上や下にしてできたスペースには
インナーセクションなど他のウィジェットを配置することができるわ。
でもカラム位置をストレッチにすると、カラムに配置してるウィジェットの大きさによっては
上下にスペースができるけど、そのスペースに他のウィジェットを配置することは
できないの。
具体的にどういった時に使うのかはよく分かんないけど、
カラムとカラムの上下間に一定の間隔を保ちたい場合なんかに使うのかしらね。
コンテンツ位置
「コンテンツ位置」は、
セクション内に配置するコンテンツ（ウィジェット）の位置を調整するのものなの。
先のカラム位置と同じように上・中央・下に配置できるんだけど、
ここでコンテンツ位置を調整しても先のカラム位置の影響を受けちゃうのよ。
要するに、コンテンツ位置を下に設定してもカラム位置が上になってると、
セクションの上にウィジェットが配置されることになるわ。
だからElementorでWebページを作る場合、セクション内に配置するウィジットの位置は
コンテンツ位置じゃなくてカラム位置で調整する方が良いかもしれないわね。
HTMLタグ
「HTMLタグ」は、そのセクションがWebページ内で何に当たるものなのかを
HTMLコードを使って設定することができるものよ。
例えば
・header→ヘッダー
・footer→フッター
・main→本文
・article→記事
・aside→サイドバー
などといったように設定できるの。
例えば複数人で1つのWebページを作る場合なんかは、
HTMLタグでセクションを定義付けておくと分かりやすいわ。
でも1人で作る場合には、HTMLタグを設定しなくてもセクションの定義付けは
できるから、デフォルト（section）のままにしておいても特に問題は無いわよ。
構成
最後の「構成」では、カラム同士の大きさの割合を変えたり、カラムに加えた変更を
リセットしたりすることができるの。
例えばセクション内にカラムが横に2つ並んでるとして、左を多くして右を小さくしたり、
反対に右を大きくして左を小さくしたりすることが構成でできるのよ。
カラムが3つ以上の場合、構成を使って調整することで、
1つずつ大きさの割合を変えることも可能だわ。
またカラムの大きさは位置を色々と変えてる内にムチャクチャになっちゃって、
一旦初期状態に戻してやり直したいってことあるでしょ。
そういった場合は構成の項目にある「リセット」を選ぶことで、
カラムに加えた変更がリセットされた最初からやり直すことができるのね。
セクションのスタイルを変更
セクションの編集画面の上部にあるタブをレイアウトからスタイルに切り替えることで、
セクションに色んなエフェクトを加えることができるのよ。
セクションごとに背景の色を変えたり、セクションの上にマウスのポインタが来ると
色が変わるようにしたり、セクションの背景に動画やスライドショーも使えるわ。
スタイルタブのセクション編集画面の1番上にある「背景」の項目で、「普通」を選ぶと
ポインタの位置によってセクションの背景が変わったりしない通常表示になるの。
「ホバー」を選ぶと、ポイントが重なった時にセクションの背景を変えられるのよ。
ポインタを持って行くことでセクションの背景が変わると、Webページを使う側としては
マウスでWebページのどこを選択してるのかが分かりやすいわね。
背景タイプ
「背景タイプ」ではセクションの背景の設定ができるわ。
背景タイプで「クラシック」を選ぶと、セクションの背景を単色にすることもできるし、
好きな画像をセクションの背景として使うこともできるのよ。
「グラデーション」を選ぶと、セクションの背景色がグラデーションになるわ。
上から下、下から上、右から左、左から右といった単純なグラデーションだけじゃなくて、
セクション中央から水の波紋が広がるようなグラデーションを付けることも可能よ。
「動画」を選んだ場合は、「動画リンク」の欄にYouTube動画のURLを入力するだけで
セクションの背景が動画になるのね。
動画の開始時間と終了時間が設定できるから、
動画の一部だけを抜き出してセクションの背景として使うこともできるのよ。
またPlay Onceの項目を「はい」にすると背景の動画は1回流れるだけ、
「いいえ」にすると動画が終了したらまた最初から繰り返し再生されることになるわ。
さらにPlay On Mobileにチェックを入れておけば、スマホやタブレットでWebページに
アクセスしてもセクションの背景として動画が再生されるの。
「背景フォールバック」で画像を設定しておくと、電波状況などでセクションの背景に
設定した動画が流れない場合でも代わりに設定した動画が表示されるのね。
セクションの背景をスライドショーに
背景タイプで一番右のアイコンを選択すると、
セクションの背景としてスライドショーを設定することができるのよ。
「画像が選択されていません」の欄で複数枚の画像を選択するだけで、
セクションの背景がスライドショーに変わるわ。
その下の項目の「無限ループ」をONにすると、
Webページが表示されてる間は止まることなくスライドショーが流れ続けるの。
「Transition」はスライドショーの画像が切り替わる際に
・Fade・・・前の画像が徐々に消えて、次の画像が徐々に現れる
・Slide Right、Left・・・次の画像が右もしくは左から流れてきて前の画像と入れ替わる
・Slide Up、Down・・・次の画像が上もしくは下から流れてきて前の画像と入れ替わる
といったエフェクトを付けられるのね。
また「Ken Burns Effect」をONにすると、スライドショーの画像に
少しずつフェードアウトしたりズームインしたりするエフェクトが付けられるのよ。
背景オーバーレイとボーダー
「背景オーバーレイ」ではセクションの背景のみにレイヤーをかけられるの。
セクション内にテキストウィジェットを配置してて背景を画像や動画にすると、
文字が背景の画像や動画によって読みにくくなることがあるわ。
そこでセクションの背景にだけレイヤーをかけてぼやけさせたり色調を変えることで、
背景の画像や動画によって文字が読みにくくなることを防げたりするのよ。
また「ボーダー」ではセクションの周辺に枠線を付けることができるわ。
単に枠線を付けるだけじゃなくて、枠線の種類を破線や点線にできるし、
セクションの角を丸くできたりもするのよね。
またセクションに影を付けて、
セクションが少し浮き上がってるように演出することもボーダーの項目でできるわよ。
まとめ
Elementorのセクションについて、
インナーセクションとの違いや色んな編集の仕方を紹介したわ。
セクションだけでWebページを作ることもできるんだけど、
インナーセクションを駆使することでWebページのデザインの幅が広がるわよ。
またセクションに色んな編集やエフェクトを加えることもElementorでは簡単に
できるから、Elementorを使って本格的なWebページ制作に挑戦してみてね。
