2017.05.08プラグイン「elementor」について紹介します。基本エレメント1コラム2見出し3画像4テキストエディタ5動画6ボタン7区切り線8スペーサー9Googleマップ10アイコン1コラム今これがコラムを使った状態。基本的な事として、elementorは「セクション」と「カラム」で構成されます。セクションとは、本文中の画面幅いっぱいの状態。そのセクションを「カラム」と呼ばれるもので縦割りに分割します。縦に2つ縦に4つと割れたセクションカラムを用意します。すると、その上に見出しなどを付けようとすると、当然2分割4分割された状態でした挿入できません。通常は分割していないセクションの下に2分割カラムにしたセクションなどを入れればいいのですが、それではどうしても、セクション同士の隙間が生まれます。コラムは1ブロックのセクションの中に棚を入れるような物。することで、見出しなどとカラムの隙間なく並べる事が可能になります。2見出しこれは見出し要素です見にくいですが、これが見出し。通常のテキストでも見出しを入れれますが、見出しを一つのブロックとして挿入できます。注意点としてstyle.cssなどで(私もこれ)見出しの幅や中の文字を変えてる場合、上に出ている「これは見出し要素です」のように正しく反映されません。そんな時はテキストエディタで見出しを作りましょう。3画像4テキストエディタ5動画これは説明不要ですね。1の猫の画像が3です。画像では様々なアクションや、リンクを埋め込んだり透過できたりします。アクションについてはこちらを。⇒プラグイン【Elementor】導入と便利な機能の紹介を今日は少しだけ4は今書いてるこの部分。5は画像と同じように動画を入れれます。自動再生を設定出来たりします。基本的にはYouTubeのリンクを貼るだけ。画像と同じでこんな動きも当然押したらリンクに飛べるようにできます。文字数でボタンの大きさも変わりますし、色も自分で指定できるので、SNSボタンも作れますね。二重線や破線など選べますし、太さも変えられます。8スペーサーこれです(笑)スペースを入れるだけなので見えませんが、改行ではなくスペーサーを見出しとこのテキストエディタの間に入れてます。スペースの幅を自由に決めれますので、カラムなどで分割した画像の高さを合わせたりなど、改行では細かく調整できない時に使うのでしょう。9Googleマップ住所を指定すれば、そこを中心に表示されるグーグルマップ。スクロールを出来なくしたりなど、地図を表示する際に、わざわざ書かなくてもいい。最初に表示される際のズームや高さも設定できるので、様々な使い方が出来そう。10アイコン内蔵されているアイコン集。何個あるんだろう...というほどの数があり、それぞれ上のように線を付けたり丸で囲んだりできます。右のAmazonのアイコンがそうなってますが、画像のようにアクションも指定できます。当然のように色も変えられ、当たり前ですがリンクも貼れる。サイズも自由に変えられます。一般エレメント1画像ボックス2アイコンボックス3画像ギャラリー4画像カーセル5アイコンリスト6カウンター7プログレスバー8お客様の声9タブ10アコーディオン11切り替え12ソーシャルアイコン13アラート14SoundCloud15ショートコード16HTML17メニューアンカー18サイドバー1画像ボックス2アイコンボックスこれは見出しですこのテキストを変更するには編集ボタンをクリックしてください。leo.これは見出しですこのテキストを変更するには編集ボタンをクリックしてください。leo.これがアイコンボックスと画像ボックス。画像orアイコン+見出し+テキストボックスがセットになったのも。見出しの種類も選択できるし、アイコンや画像に関しても今まで通り。3画像ギャラリーこんな感じで画像を並べれます。すべての画像がまとまりになっていて、一つのリンクになっています。画像の個数を選べます。4画像カーセルよく見る奴です。すべてでリンク先は一つしか選べませんが、限られたスペースでこういうギミックを付けてカッコいいページを作りたいならありでしょう。#3それぞれに大量にあるアイコンを割り当てた上で、すべてにリンクが付けれます。使い方が良く分かりませんが、自分が設定した数字から、自分が設定した数字までを高速でカウントしてくれます。60%こんな感じでバーを設置できるだけです。言葉を入れて、自分でスペースを大量に入れれば、何かの比較のように見せられます。Designer画像や名前、その他内容まで自分で記入できる、まるでお客様の声。商品紹介ページならこういうのもアリですね。#4タブ4どう?こんな感じ。タブの内容もメニューも当然自由に変えられます。#1コンテンツアイテムです。編集をクリックします。#2コンテンツアイテムです。編集をクリックします。leo.タブの縦バージョンです。#1コンテンツアイテムです。編集をクリックします。#1コンテンツアイテムです。編集をクリックします。#2コンテンツアイテムです。編集をクリックします。leo.アコーディオンの表示が違うバージョンです。12ソーシャルアイコンこんな感じのソーシャルアイコンがありました。他にももうちょっとあるのですが、あまり日本になじみのないものもあります。一つ一つにリンクを振り分けられます。無いボタンに関しては、先ほどのボタンで代用するなりすればいいですね。13アラート警告ですこれは説明です。編集ボタンをクリックしてテキストを変更してください。́∀`)15ショートコードこれは使ってます。スクリプト系プラグインを記述する際やfunction.phpで何か記入したものは、HTMLではなくショートコード使った方が良いです。私の場合、記事本文中のアドセンス広告をショートコードにし張り付けてます。理由は良く分かりませんが、そのままHTMLやテキストエディタなどを利用して張り付けるとエラーが出る。他のプラグインの機能も並行して使えませんが、ショートコードにして挿入すれば使える感じですね。16HTMLHTMLを入力する欄が出ます。ひとつの塊として出せるので、例えば広告などは、これを使って出します。アドセンスはなんかできませんが、ASP他社のはこれで出来ますし、何度も使うものや、記事中でコピーするときなどは、HTMLを記入したコレを複製することが簡単に出来るので使えます。