「WordPress便利なプラグイン Elementor（エレメンター）」のご紹介
2020/02/12
目 次
１ はじめに
ホームページ（WordPress）を使ってブログを書こうと思っても、思うように、レイアウトが上手くいかなかったり、文字の改行ができなかったり、どうにもならないことはありませんでしょうか
自身も何度もなく、「この一文字を右にできれば！」、「この写真何でこんなにでかい」など画面上で止まったことが幾多とあります。
これを解決してくれる為に、大きな力を発揮してくれるプラグインがあります。
それはエレメンター（Elmentor Page Builder） です。
２ プラグインのインストール
インストールするとこのような表示がプラグイン一覧に出ます。
３ 直感的で使い易い管理画面
管理画面はこのようなものです（左側）。分かり易いアイコンがあり、何を右側の文章の各テーブルの中に挿入したいのか、項目毎にでています。
４ 作業は左のアイコンで示される項目を右側の文章レイアウト中に入れる流れです。
右側の枠の中に＋マークがあるので、そこに新しいテーブル（縦方向）に枠を作ることができます。
そこに左側でカラム（横方向の枠）を複数作り、その中にタイトルや、文章、写真などを取り込んでいけます。
５ 制作例（タイトル、文章、画像を挿入）
下記の例では縦にテーブル（縦）を３つ作り、各々「タイトル」、「文章」、「写真」という掲載内容の異なるものを載せています。
ここで何が良いかというと
①タイトルはh1,h2タグなので独立させることにより、文章のレイアウトの影 響を受けなく記入可能
➁文章は、段落をつけたい場合など、通常の投稿ページでは、CSSで指定を追加しないとできませんが、それが不要。
③画像は独立した横枠（カラム）になっており、もし、１枚でなく2枚張りたい場合は2枚張ることができ、大きさもカスタマイズが可能です。
このように、このプラグインでは一気に解決してくれるものが多いです
④ 各テーブル毎、カラム毎の罫線や幅などのレイアウトを変更でできます。
各テーブル毎、各カラムこのように枠の中のスペース（padding）、外のスペース（margin）を変更することも可能です。
さらに、ポップアップやフェイドイン等のアニメーションを付けることも可能です
６ 文章のレイアウト方法
文字はこのように、ぶら下げインデントをしたい場合も、通常では、＜ｐ style＝“color：yellow,”＞ <p style=“padding-left: 30px;”>等のCSSの追加をする必要がありますが、わざわざstyle.cssや管理画面での変更など不要となります。
（ここではPタグで文章の大枠をくくることで、一文字下げるぶら下げインデントが可能になったり、タグ内でstyleプロパティーでアクションの命令をすることが可能となっている）
７ 画像を横枠に入れるカラムの設定方法
カラムはこのように２，３カラムなど幾つか選ぶことができます。
８ 注意点
このプラグインは無料でとても使い易いのですが、注意点があります。
それは、レイアウト設計に影響を及す、強いプラグインを入れた場合に、競合し、全てのレイアウトが崩れることがあることです。
自身も一度、全てのレイアウトが崩れ、大変焦りましたが、バックアップをとっていたので、なんとか復旧できた想い出があります。
あまり称賛されてないプラグインやCSSを従事る可能性のあるショートコードの埋め込みなとも注意が必要です。
以上です。最後までお読みいただき、ありがとうございます。
参考に読ませていただいたサイト
・TokoAruga.com 様 URL https://tokoaruga.com/blogging-online-courses/
・人生再出発ドットコム様https://saisyuppatu.com/elementor-function-introduction-2/
