WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementor(エレメンター)設定 完全マニュアル

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
settei_thumbnail

Elementor(エレメンター)設定 完全マニュアル

Elementorの基本設定について意外と見落としがちな部分なので、ひとつひとつご紹介していきたいと思います。ただ、この部分は基本的にはデフォルトでも良いかと思っており、より便利に使いたい!他にどんな機能があるか知りたい!と思っている方向けです。また、この基本設定は使いこなすと制作時に有意に働きますので、中級以上を目指す方はマスターしておくと良いかもしれません。

まだ、Elementor自体インストールしていない方はこちらをご覧下さい。

Elementorをインストールし、有効化すると、左のメインナビゲーションに「Elementor」と「Templates」が追加されます。

Install_elementor

ここは無料版も有料版も変わりありません。それぞれの画面、機能について見ていきたいと思います。

「Elementor」メニューについて

Elementorメニュー内容は以下になります。

<無料版>
・設定
・権限グループ管理ツール
・ツール
・システム情報
・Getting Started
・Get Help
・カスタムフォント
・★プロ版にする

<Pro版>
・設定
・Custom Fonts
・権限グループ管理ツール
・ツール
・システム情報
・Getting Startted
・Get Help
・License

それぞれのメニューを見ていきたいと思います。

今回は「設定」について解説

setting
無料版の場合、「一般」「スタイル」「詳細」に大きく分かれます。

【一般】

一般は無料版もPro版も同じです。
ippan
①投稿タイプ
投稿と固定ページそれぞれにチェックを入れる事ができます。これは、投稿と固定ページでElementorの機能を使うかどうかを選択するもので、両方にチェックを入れておきます。

②デフォルトカラーを無効化
”このチェックボックスをオンにすると、Elementor のデフォルト色が無効化され、テーマの色を継承します。”とあり、そのまんまの意味となります。テーマのカラーセットが好きな方はチェックを入れる事で、テーマのカラーが維持されます。

③デフォルトフォントを無効化
”このチェックボックスをオンにすると、Elementor のデフォルトフォントが無効化され、テーマのフォントを継承します。”と、②とまったく同じ意味です。

④Elementor を改善する
使用状況データのトラッキングに関する許諾となり、Elementorがますます安定的に便利になる為に皆さん協力しましょう!ので、チェックお願い致します。

この「一般」で変更を加えた場合、必ず下部の「変更を保存」を押しましょう!

【スタイル】

このスタイルも無料版・プロ版同じです。
style

①デフォルトの汎用フォント
“選択されているフォントが使用できない場合に使用されるフォントの一覧です。”と説明があるとおり、Elementorの編集時に設定したフォントが閲覧者側の環境(ブラウザなど)で表示出来ない場合のフォントという意味です。

②コンテンツの幅
これは見て頂いた方が早いので、下の画像をご覧ください。
haba_hikakuコンテンツ幅とは、ブラウザにおけるコンテンツを見せれる幅を意味します。Elementorの編集画面で個別に設定が可能ですが、デフォルト値として設定する事が出来ます。ホームページによって幅は一定の場合、都度都度設定するのが面倒な場合などはここで設定しておくと楽です。

③ウィジェット間のスペース
これも画像を見て頂くと早いです。
widget_space
緑がウィジェットです。その緑と緑の間のスペースの事を意味しています。もっと厳密に言うなら、同一カラム内の隣接するウィジェットの間です。ちなみに、カスタムポジショニングでインライン(横並び)にした場合は、このウィジェットは無視されるようです。
widgetspace2

④選択範囲をフィットするよう引き伸ばす
”広がったセクションがフィットする親エレメントのセレクタを入力してください。(例:#parent-element, .wrapper等)。「ページ幅にフィット」欄は空欄としてください。”

(中級者以上の方向け)
これは少し難しい話しになります。例えば既存のテーマをを活かして構築するとした場合、通常であれば伸縮セクションをオンにした場合、下の画像の様に際限なく、伸縮してしまいます。「あ」がとなりのカラム(検索部分)を突き抜けて右隅まで表示されているのがわかりますでしょうか。
all_s2

一方、この④を設定してあげる事で、伸縮セクションをオンにしたとしても、きちんとテーマのカラム内に収まります。
all_s1
個人的にはページビルダー時代の名残と考えており、今となってはあまり使いません。が、クライアントのおサイトを制作する方などは覚えておくと良いかもしれません。ちなみに、指定の方法はCSSのセレクタを使います。

⑤ページタイトルセレクター
“Elementor がページタイトルを隠します。このオプションは “h1.entry-title” セレクタを使用しているテーマで動作します。他のセレクタを使用している場合は、上の欄に入力してください。”とあります。既存のテーマをベースに作られる場合、テーマにタイトルと認識させる為のCSS指定となります。これもほとんど使わないので、デフォルトで良いと思います。

⑥タブレットのブレークポイント
Elementorはスマートフォンやタブレットに柔軟に対応出来る仕組みをもっています。しかし、スマホやタブレットのサイズは規定はなく、機種によって様々です。なので、ブラウザの幅を基準に設定します。一般的にパソコン(ノートも含む)のブラウザ幅サイズは1920px、1366px、1280pxが主流です。次にタブレットですが、iPadの横幅は1024pxなので、これを基準にしても良さそうです。最後にスマートフォンですが、幅750pxが一般的の様です。上記を加味すると、タブレットはデフォルトん1025pxで良いと思います。

⑦モバイルのブレークポイント
⑥で説明したのと同様に、デフォルト設定が768pxなので、しばらくの間はデフォルトで問題ない気がしますが、どんどん新しいスマホが出てきていますので、たまにトレンドなど気にした方が良さそうです。

⑧画像 Lightbox
まず、Lightboxとはなにか説明したいと思います。画像をクリックすると、画面の背景が黒または半透明の黒になり、画像だけが中央に表示されるのを見た事ありませんか?
ozisan
こんな感じです。w

おじさん
おじさん
わかりずらいのに俺を使うな・・・

すみません(汗)これがLightBoxになります。これをデフォルトで機能させるかどうかについての設定です。なので、画像ウィジェット等をクリックしても何も変化させたくない場合は、チェックを外しておきます。

また、記載してある方法
“Lightbox のデザインをカスタマイズするには、左上のハンバーガーアイコン > 全般設定 > Lightbox から設定します。”で、このLightBoxのデザインを設定する事が出来ます。(この方法は別の機会に)

【連携】※Pro版のみ

ざっくり説明するならば、ここは外部サービス・ツールとElementorを連携させる為の設定画面と思って下さい。

①reCAPTCHA (v2)
reCAPTCHA

こんなの見た事ありませんか?これがreCAPTCHA(リキャプチャ)と言い、問い合わせフォームなどに良く使われるものです。ロボットやスパムなどからの不正な登録を防ぐ為の機能です。これはPro版のフォームウィジェットで設定出来ます。しかし、ここで連携の設定をしないと使えません。

まず、GoogleのreCAPTCHAサイト(https://www.google.com/recaptcha/intro/v3.html)に行き、各種設定をします。URLやメールアドレスを入れる簡単な設定です。入力を終えると、Site Kye(サイトキー)とSecret Key(シークレットキー)が発行されますので、Elementor>設定>連携のreCAPTCHAに入力します。設定はこれで完了です。ちなみに実際フォームウィジェットで実装したのがこちらになります。

recap

②donReach
簡単に言うと、よくブログなどで見かけるSNSアイコンの上や横に表示される数字(シェア数)です。これを表示させる為のサービス?機能みたいです。正直使った事がなく(汗)もし、使いたいけど分からないという方がいましたらご連絡下さい!調査というか研究します。

③Facebook SDK
主にFacebookページに関するオプション機能が使えます。特にFacebookページとホームページを横断したアナリティクスなどが可能になります。FBからのトラフィックが多い方などは設定した方が良いですね。

④MailChimp
お猿のアイコンでおなじみ?のメール配信サービスとの連携です。(https://mailchimp.com/)※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑤Drip
ECサイトのマーケティング支援サービスで、ユーザートラッキンなどをサポートするサービスの様です。(https://www.drip.com/)※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑥ActiveCampaign
メールマーケティングサービスで、獲得リストに対しメール配信の最適化を自動で行ってくれるサービスです。(https://www.activecampaign.com/)※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑦GetResponse
⑥と同様にメールマーケティングなどを自動的に行えるサービスの様です。(https://www.getresponse.jp)※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑧ConvertKit
メールマーケティング関連のサービスです。開封率などをレポート化し、メールマーケティングの最適化支援サービス(https://convertkit.com/)※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑨MailerLite
④⑥⑦⑧そしてこの⑨MailerLiteもメールマーケティング支援系のサービスです。(https://www.mailerlite.com)海外ではメールマーケティングの重要性は高く多くのサービスが存在し、同時にElementorも連携が強化されています。気になる方はチェックしてみて下さい!※すみません利用していないので、詳細はご自身でご確認お願い致します。

⑩TypeKit Web Fonts by Adobe
Adobeフォントがサイトで使える様に出来ます。現在、調査中で、後日記事にしたいと思います!早く教えろ〜とお急ぎの方がいましたらご一報ください(笑)
詳しい設定方法は一旦こちらをご覧下さい(https://helpx.adobe.com/jp/fonts/using/add-fonts-website.html

 

【詳細】

無料版・Pro版共通です。

①CSS 印刷設定
”すべての生成スタイルシートに外部 CSS を使用します。サイトパフォーマンスをより良くするには、こちらを選択してください (推奨)。”とあります。選択肢としては、「外部ファイル」「内部埋め込み」の2種から選択となります。言葉の通り、CSSファイルを別途外部ファイルとして存在させるか、HTMLファイルにCSSを埋め込んでしまう方法です。外部ファイルとしてHTMLとは別に読み込ませる方法が一般的です。

「内部埋め込み」を選択した場合、”内部 CSS をページヘッダに埋め込んで使用します。サーバー設定との相性が悪い場合のトラブルシューティングと、開発環境の管理に利用します。”とあり、不具合が発生した際に内部埋め込みにすると良さそうですが、自分は一度も使った事がありません。

個人的には極端にパフォーマンスが悪い、エラーが起きない限り、「外部ファイル」で良いと思います。

②エディター読み込みツールのメソッドを切り替える
これはお使いのサーバーとの関係で、エラーが発生する場合に使用します。どうしてもElementorは長いプログラムコードを使用する為、サーバーによっては読み切れない(タイムアウト)場合があります。

エディターなどが真っ白になったまま・・・などの場合、「有効にする」を選択する事で、改善される場合もあります。

また、日頃よりエディターが開くのが遅いなどの場合も、有効にする事で、速度があがる場合があります。

③Editing Handles
ウィジェットなどの設定ボタン表示を、以前のバージョンの形式に変える事が出来ます。
widget_settingicon_now
widget_settingicon_now2
これが現在Elementor(バージョン 2.5時点)の表示です。このEditing Handlesを「表示にする」事で、以前の表示になります。
widget_settingicon_old
widget_settingicon_old2
以前からお使いの方で、戻したい方は「表示にする」を設定しましょう。

 

まとめ

今回はElementorの「設定」を解説致しました。使いこなすと便利になったり、トラブルシューティングになったりするので、ぜひ把握だけでもしておくと良いかもです。

また、Pro版のみの「連携」は数は少ないものの、「reCAPTCHA」「Facebook SDK」は便利なので、Pro版にした暁には是非使ってみて下さい。Adobe Fontも少し設定がややこしいですが、使えるとデザインの幅が広がり、これを使えるだけでもPro版にする価値はあるかと思います!

Pro版にするかでご検討の方は是非参考にしてみてはいがでしょうか。

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。