プラグイン「elementor」について紹介します。
Elementor 基本エレメント
①コラム
②見出し
③画像
④テキストエディタ
⑤動画
⑥ボタン
⑦区切り線
⑧スペーサー
⑨Googleマップ
⑩アイコン
①コラム
今これがコラムを使った状態。
基本的な事として、elementorは「セクション」と「カラム」で構成されます。
セクションとは、本文中の画面幅いっぱいの状態。そのセクションを「カラム」と呼ばれるもので縦割りに分割します。
これがセクション幅。
例えば縦に２つ縦に４つと割れたセクションカラムを用意します。そうすると、その上に見出しなどを付けようとすると、当然2分割4分割された状態でした挿入できません。
そこでコラムの登場。
通常は分割していないセクションの下に２分割カラムにしたセクションなどを入れればいいのですが、それではどうしても、セクション同士の隙間が生まれます。
コラムは１ブロックのセクションの中に棚を入れるような物。
こうすることで、見出しなどとカラムの隙間なく並べる事が可能になります。
②見出し
これは見出し要素です
見にくいですが、これが見出し。通常のテキストでも見出しを入れれますが、見出しを一つのブロックとして挿入できます。ただし注意点としてstyle.cssなどで（私もこれ）見出しの幅や中の文字を変えてる場合、上に出ている「これは見出し要素です」のように正しく反映されません。
そんな時はテキストエディタで見出しを作りましょう。
③画像④テキストエディタ⑤動画
これは説明不要ですね。①の猫の画像が③です。
画像では様々なアクションや、リンクを埋め込んだり透過できたりします。
アクションについてはこちらを。
⇒プラグイン【Elementor】導入と便利な機能の紹介を今日は少しだけ
④は今書いてるこの部分。
⑤は画像と同じように動画を入れれます。自動再生を設定出来たりします。基本的にはYouTubeのリンクを貼るだけ。
⑥ボタン
ここをクリック こんな感じ 大きさもかえれるよ 画像と同じでこんな動きも
当然押したらリンクに飛べるようにできます。文字数でボタンの大きさも変わりますし、色も自分で指定できるので、SNSボタンも作れますね。
⑦区切り線
良くある線ですね。二重線や破線など選べますし、太さも変えられます。
色も変えられます。
⑧スペーサー
これです（笑）
スペースを入れるだけなので見えませんが、改行ではなくスペーサーを見出しとこのテキストエディタの間に入れてます。
スペースの幅を自由に決めれますので、カラムなどで分割した画像の高さを合わせたりなど、改行では細かく調整できない時に使うのでしょう。
⑨Googleマップ
住所を指定すれば、そこを中心に表示されるグーグルマップ。
スクロールを出来なくしたりなど、地図を表示する際に、わざわざ書かなくてもいい。
最初に表示される際のズームや高さも設定できるので、様々な使い方が出来そう。
⑩アイコン
内蔵されているアイコン集。
何個あるんだろう…というほどの数があり、それぞれ上のように線を付けたり丸で囲んだりできます。
一番右のAmazonのアイコンがそうなってますが、画像のようにアクションも指定できます。
さらに当然のように色も変えられ、当たり前ですがリンクも貼れる。
サイズも自由に変えられます。
Elementor 一般エレメント
①画像ボックス
②アイコンボックス
③画像ギャラリー
④画像カーセル
⑤アイコンリスト
⑥カウンター
⑦プログレスバー
⑧お客様の声
⑨タブ
⑩アコーディオン
⑪切り替え
⑫ソーシャルアイコン
⑬アラート
⑭SoundCloud
⑮ショートコード
⑯HTML
⑰メニューアンカー
⑱サイドバー
①画像ボックス②アイコンボックス
これは見出しです
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
これは見出しです
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
これがアイコンボックスと画像ボックス。
画像orアイコン+見出し+テキストボックスがセットになったのも。
当然見出しの種類も選択できるし、アイコンや画像に関しても今まで通り。
③画像ギャラリー
こんな感じで画像を並べれます。またすべての画像がまとまりになっていて、一つのリンクになっています。当然画像の個数を選べます。
④画像カーセル
よく見る奴です。
すべてでリンク先は一つしか選べませんが、限られたスペースでこういうギミックを付けてカッコいいページを作りたいならありでしょう。
⑤アイコンリスト
- リストアイテム #1
- リストアイテム #2
- リストアイテム #3
それぞれに大量にあるアイコンを割り当てた上で、すべてにリンクが付けれます。
⑥カウンター
1 クールな番号
使い方が良く分かりませんが、自分が設定した数字から、自分が設定した数字までを高速でカウントしてくれます。
何かを入れ込んだりは出来ません(;´∀｀)
⑦プログレスバー
スキル とか ウェブデザイナー あれ 60%
こんな感じでバーを設置できるだけです。
言葉を入れて、自分でスペースを大量に入れれば、何かの比較のように見せられます。
⑧お客様の声
お客様の声風な 
John Doe Designer
画像や名前、その他内容まで自分で記入できる、まるでお客様の声。
商品紹介ページならこういうのもアリですね。
⑨タブ
タブ #1 タブ #2 タブ #3 タブ #4 タブ #1
タブ①どう？
タブ #2
タブ2どう？
タブ #3
タブ3どう？
タブ #4
タブ4どう？
こんな感じ。
タブの内容もメニューも当然自由に変えられます。
Yahooみたい(*￣∇￣*)
⑩アコーディオン
アコーディオン #1
コンテンツアイテムです。このテキストを変更するには、 編集をクリックします。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
アコーディオン #2
コンテンツアイテムです。このテキストを変更するには、 編集をクリックします。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
タブの縦バージョンです。
面倒になって来たので言葉数少ないのは突っ込まないでください（笑）
⑪切り替え
切り替え #1
コンテンツアイテムです。このテキストを変更するには、 編集をクリックします。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
切り替え #1
コンテンツアイテムです。このテキストを変更するには、 編集をクリックします。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
切り替え #2
コンテンツアイテムです。このテキストを変更するには、 編集をクリックします。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
アコーディオンの表示が違うバージョンです。
機能は一緒。
⑫ソーシャルアイコン
こんな感じのソーシャルアイコンがありました。
他にももうちょっとあるのですが、あまり日本になじみのないものもあります。
一つ一つにリンクを振り分けられます。無いボタンに関しては、先ほどのボタンで代用するなりすればいいですね。
⑬アラート
警告ですこれは説明です。編集ボタンをクリックしてテキストを変更してください。
アラート…どう使うんだろ(;´∀｀)
これ自体に何かあるって感じでもないので、間違った情報や入力ミスの場合、どこかに表示させる感じなのかな？
⑭SoundCloud
全然なじみがないですが、URL入力欄やいいねボタン購入ボタンなど、各表示非表示設定できるので、音楽を流したり、時には売ったりできるのでしょうかね(;´∀｀)
⑮ショートコード
これは使ってます。
スクリプト系プラグインを記述する際やfunction.phpで何か記入したものは、HTMLではなくショートコード使った方が良いです。
私の場合、記事本文中のアドセンス広告をショートコードにし張り付けてます。
理由は良く分かりませんが、そのままHTMLやテキストエディタなどを利用して張り付けるとエラーが出る。
また他のプラグインの機能も並行して使えませんが、ショートコードにして挿入すれば使える感じですね。
⑯HTML
HTMLを入力する欄が出ます。
ひとつの塊として出せるので、例えば広告などは、これを使って出します。アドセンスはなんかできませんが、ASP他社のはこれで出来ますし、何度も使うものや、記事中でコピーするときなどは、HTMLを記入したコレを複製することが簡単に出来るので使えます。
⑰メニューアンカー
私のような素人には使い方が分かりません(;´∀｀)
ただ、ほとんどすべてのこれまで登場した機能に、CSSIDやCSSクラスを書き込む項目があるのですが、このメニューアンカーは、「この ID は1ページ内で使う CSS ID になります。# は含めないでください。」とあるので、今まで使ってきた機能にCSSIDを割り振って呼び出す的なものなのかな？
流石に使いきれない機能がこのあたりから山のように出てきます(;´∀｀)
⑱サイドバー
サイドバーウィジェットに登録してあるテキストなどを、そのまま本文中に呼び出すことが出来ます。上はサイドバートップにあったものを呼び出しました。それぞれ使っているテーマによったり、function.phpの記述によるでしょうが、私は記事本文中（function.php）とサイドバーウィジェット、サイドバースクロール、広告など使わせていただいているstinger8の項目を全て呼び出すことが可能なようです…
今気が付きました…ショートコードにして張り付けましたが、記事本文中のfunction.phpはアドセンス用なので、これ呼び出したら使えたりするのかな(;´∀｀)
ここからは、私にとっても未知の領域汗
一応紹介しておきます。
Elementor WordPressエレメント
①固定ページ
②カレンダー
③アーカイブ
④メタ情報
⑤検索
⑥テキスト
⑦カテゴリー
⑧最近の投稿
⑨最近のコメント
⑩RSS
⑪タググラウンド
⑫カスタムメニュー
⑬Recent Posts With Thumbnails
⑭Akismetウィジェット
⑮TOD+
⑯WordpressPopularPosts
①固定ページ
半信半疑で突っ込んでみたら分かりました。
固定ページ一覧を出力できるみたい。
②～⑯までまとめて紹介
始めて使ってみてこのWordpressの項目の意味が分かりました。
サイドバーウィジェットの左側にある項目、これをサイドバーの代わりに本文中に挿入できるって事ですね。
ですので、使っているプラグインによって、このメニューの項目の数は人それぞれでしょう。
例えば
おお！これは使える。
先ほどのサイドバーは、サイドバーやfunction.phpにて設定してある項目を表示する物。
こちらは、サイドバーに挿入してはいないけど、ウィジェット欄にあるものを本文中に呼び出すもの。
今これは「最近の投稿」を呼び出し、
その後にfunction.phpで「記事本文中」に呼び出していたアドセンス広告を呼び出してみました。
こうやればアドセンスをショートコードにしなくても使えるじゃん…(;^ω^)
これは良い…記事にして初めて意味が分かった（笑）
分からないから触らないようにしていたのです…今まで…
最後に（よくある保存エラーも）
今回記事にすることで、私自身知らなかった機能が発掘できました。
また今回紹介した機能以外にも、ページセッティングや著者の設定なども、これとはまた違う方法で弄れます。
さらに今回紹介した機能についてですが、実はかなり端折ってます。
機能自体はすべて紹介しましたが、その機能個々についての設定できる項目はまだまだあります。
マージンを入れて位置調整出来たり、それぞれ背景色や文字色の設定が出来たりと、山ほどあり過ぎて、個々の設定に関しては、大まかな部分だけ紹介させていただくことにしました。
だってとんでもない量になるんだもん(;^ω^)
あと注意点としてですが、記事中にある事でもエラーで保存できなかったりしますが、マージンを弄ると保存できない事が実に多い。
これは私の良そうですが、設定したマージンが、サイト本来の設定したBodyの幅より飛び出してしまうなど、見た目上収まっていても記述上矛盾が生じてしまった場合に、エラーによる保存不可状態になるんだと思います。
このプラグインで記事を書く際は、ちょこちょこ保存ボタンを押すことをおススメします。
理由として、エラーで保存が出来ないと返してくれる場合はいいのですが、時には保存中のままフリーズすることがあるからです。
この場合、保存ができない状態となる為、「戻る」しか選択肢はありません。
当然保存されてない情報は、全部消える事に。。。
自動で定期的に裏で保存してくれてるなんて事もないので、忘れずちょいちょい保存を押し上書きを重ねる事をお勧めします。
そんなプラグインですが、テンプレートで無料で使えるカッコいい表示などもありますし、まだまだ紹介しきれていないので、この記事で「いいな」と思ったら、自分で入れて色々弄って遊んでみてください。
ではヾ(＠⌒ー⌒＠)ノ
※エックスサーバーに移転しました！宜しければこちらの記事も読んでください！
変えた理由↓
移転完全マニュアル↓
コメント