Wordpressには無料とは思えない高性能のページビルダープラグインElementorがあります。このプラグインには、無料で使えるテンプレートの他、サイト運営や記事更新のために欲しい機能が詰め込まれています。この記事では、プラグインのインストールから初期設定、投稿、編集、テンプレートの使い方など、初めての方でもすぐに使える基本的な操作方法を紹介しています。
Elementorなら記事更新が劇的に効率化できる
この記事を検索して見つけてくださった方の中には、WordPressで作るホームページをもっとかっこよくすることや、簡単かつ効率的に記事を更新したいと思っている方が多いのではないでしょうか。Elementorを使えば、WordPressで「こんなことができたらいいな」と思うようなことがかなり解決できます。まずはその特長を紹介していきます。
公開画面を編集する感覚でプレビュー不要
最大の特徴はなんといってもこれです。
「WordPress」「エディタ」「公開画面」「直接編集」「ビジュアルエディタ」「テーマ反映」「リアルタイムプレビュー」「直感的」「ページビルダー」「プラグイン」 「Windows Live Wraiter最新版」「realtime preview」などなど
私がやりたかったことの1つ目は、実際の公開画面を見ながら記事を編集することです。ホームページビルダーなど、HTMLで作成するサイトの場合は編集する画面と公開する画面での見え方に大きな違いはありません。ところが、WordPressの場合、記事編集エディタと公開画面でデザインが異なってしまいます。編集しているときに実際の見え方を確認するためには、いちいちプレビューをしなければいけませんでした。その手間を省きたくて、リアルタイムプレビューのプラグインを入れてみたり、ビジュアルエディタを公開画面に近づける努力を続けてみたりしました。一時期は、Windows Live Wraiterを使った時期もありました。同じことを思う人が多いようで、ネット上にはプラグインや、テーマの編集の情報が多数存在しています。しかし、どれもこれも完全にとはいきませんでした。
Elementorの最大の特長は、編集画面にテーマのCSSがすべて反映しているので、レイアウトもデザインもすべて公開画面と同じという点です。広告やアクセス解析の他、プラグインで出力されるものも全て反映しています。
Active Previewというプラグインを使うと簡単で、いちいちプレビューボタンを押さなくても、HTMLを入力したらそれを反映させて表示できるようにすることは可能です。HTMLの知識があれば細かいことまで編集可能で、CSSを使ったページのデザインも可能です。ただ、 HTMLの知識がない家族もホームページが更新できるようにしたいし、途中で更新ボタンを押したときにカーソルの位置がトップに戻ってしまうとか、何かと難しいんですよね。Elementorなら全て解決できるからやっぱりすごいプラグインですよ。
Windows Live Writer（WLW）との違いは？
Windows Live Writerは、ブログの記事更新が捗るということでWordPressユーザーの間で人気でした。サイトのテーマを取得するので、公開画面を直接する感覚で更新できることや、ローカルに保存して作業ができるので、インターネットに接続していなところでも記事が準備できること、画像の挿入もドラッグ＆ドロップでできることなどが魅力的でした。しかし、2012年にサポートが終了してしまい、その後はバージョンアップもしていません。今でも根強いユーザーがいて、ネット検索をすればダウンロード方法や使い方を知ることができます。ところが、下記のようなデメリットがありました。
ElementorはWordPressのプラグインなので、インターネットに接続できて編集画面にログインさえできれば、世界中どこでも同じ環境で記事の更新ができます。さらに、WLWが公開画面に「近い」というならば、Elementorは「公開画面と100％同じ」といって過言ではありません。背景、広告やサイドバーを含めたすべてが公開画面と同じように表示されています。
レイアウトの編集やCSSの追加も簡単！
カラムの編集や画像の挿入、記事の配置などは全てドラッグ＆ドロップでできます。Wordや一太郎などに近い感覚で更新できるので、ホームページ初心者の方でhtmlやcssの知識が無くてもある程度おしゃれなページを作成することができます。CSSクラスを追記することで、あらかじめ用意しておいたデザインを反映させることもできるので、個性的で美しいサイトにすることも簡単です。
テンプレート機能を使えばひな形登録が可能！
よく使う定型文や記事の雛形をテンプレートとして登録したいと思うことはありませんか。AddQuicktagやTinyMCE Templatesも試しましたし、Duplicate Postも使っていました。しかし！Elementorにはもともと便利なテンプレート機能が付いていますので、このようなプラグインは使う必要がありません。
ページをまるごと雛形として登録することも、一部分のみを登録することもクリックひとつでできます。他のサイトで使いたい場合はエクスポートもできるので便利です。もちろん、アフィリエイトなどの広告タグも登録しておけば好きなところに挿入できますし、ページの型が決まっているような場合は、それを雛形にして登録しておけば、毎回ゼロから作り直す必要がなくなります。記事更新が驚くほど楽になりますよね。
Elementorを使う上でのデメリットは？
では、この素晴らしいプラグイン。何かデメリットはないのでしょうか。便利なものには必ず副作用がつきものです。心配ですよね。
サイトが重くなればSEOに悪影響では？
さて、Elementorを有効化したり無効化したりして比較してみました。この時点ではElementorを有効化するとタイトルの余白がなくなるという不具合があったので、検査したサイトがElementorで表示されているのかそうではないのかが視覚的にも確認できる状態で検査できました。
Elementor無効の状態の評価
私が運営する別サイトでの検証結果です。PageSpeed Insightsも少し前のバージョンですので見え方は違いますが、パソコンは90点。モバイルは81点です。タイトル部分も文字の上下に余白があって「通常」の見え方ですので、Elementorは無効の状態です。
Elementor有効の状態の評価
今度はタイトルの文字の上下の余白がありません。Elementorが機能して表示された状態です。点数的には全く変化なしということがわかります。
Elementorの機能を停止したら思いっきり点数が跳ね上がったページがあるぞ。しかも、「Elementorをやめただけで検索順位が上がった」なんていう記事も見つけたぞ。どうなんだ。
Elementorを使っても高得点出せるよん！画像スライダーやエフェクトを使って表示するようなものを多用すると点数が悪化するのはあるけどね。でも、画像が適切に処理されていればある程度防げるし、そもそもそれってElementorに責任はないよね？
ElementorはSEOに「悪影響」ということは明らかな根拠がない情報なのね。実際に、当サイトでも検索で上位に表示されているページはたくさんあります。まぁ、逆に「よい」と言える根拠もないわけです。少なくとも、Google PageSpeed Insightsで点数が変わらないなら、そこまで劇的に順位に影響するとも思えませんね。
サーバーの容量を喰うのでは？
レイアウトを自由にアレンジできるということは、そのための情報がどこかに保存されているということですよね。データの容量は大丈夫なのか心配になりました。気にせず更新し続けて、気付けば容量不足ということでは困ります。さて、調べてみたところデータベースの容量は特別増えているということはないようです。
Elementorは個別に文字の色やエフェクトなどかなり自在にCSSをカスタマイズできるじゃないか。その情報はいったいどこにあるんだ？
WordPrsssで画像などをアップする際に保存されるuploadsフォルダの中にelementor/cssというディレクトリが作成されています。その中に各投稿のCSSが保存されていますよ。そこをチェックすると、3KB程度のものから80KBのものまであります。群を抜いて大きい80KBのページは見出し各種を紹介するためにかなりのパーツを使っています。どうやら、セクションやカラム、スペーサーなどの設定が多いとCSSの容量は大きくなっていくようです。そうは言っても、写真1枚載せることを考えたら全く気にしなくていいレベルの容量です。
結論から言えば、Elementorを使ったからといって容量が喰うということはないのね。
Elementorが使えなくなったときどうなるの
最後に、Elementorが廃止されたらどうなるかということです。当然、Elementorで作成した記事はElementorで編集しなければいけません。Elementorを停止したり、削除したりするとどうなるかということですが、CSSが反映しなくなり、見た目が少々残念になります。ただ、記事はなくなりませんので安心してください。世の中に「絶対」はありませんが、Elementorは進化していますし、これからも確実にユーザーは増えていくと思います。開発のペースは落ちてもElementorそのものが無くなることはないのではないかと思います。
Elementorは世界中で使われている人気急上昇中のプラグインだからそう簡単には無くなりそうにないわね。
Elementorのインストール方法
では、安心して使えることが分かったところで、実際の使い方について紹介していきます。普段WordPressを使っている人にとっては簡単です。一応、WordPress超初心者向けにも書いていますので、分かる人は飛ばしてください。
Elementorをインストール
① 管理ページ（ダッシュボード）にログイン
Elementorのインストール方法は、他のプラグインと同じです。まず、ダッシュボードにログインをします。
② プラグインにアクセス
次に左側のサイドバーを見ます。「プラグイン」という項目がありますのでクリックして一覧を確認します。下のキャプチャはwpXサーバーの自動インストール機能でWordPressをインストールした時の、初期の状態の画面です。
初めて見る人のために簡単に紹介します。最初からいくつかプラグインがインストールされています。例えば、WP Multibyte Patchというプラグインですが、WordPressは外国製なので日本語表示で予期せぬ不具合が出る場合があります。それを未然に修正してくれるものです。また、Akismet Anti-Spam (アンチスパム)というプラグインは、その名の通りスパムコメントをカットしてくれる優秀なプラグインです。 どちらも有効化しておくと安心です。
③ Elementorを検索してインストール
プラグインの「新規追加」ボタンをクリックし、キーワードに「Elementor」と入力します。おそらくトップに「Elementor Page Builder」というものが表示されると思いますので、「今すぐインストール」をクリックします。
④ プラグインを有効化
数十秒でインストールが完了し、先ほどクリックしたところが「有効化」に変わります。素直にクリックして有効化します。これで、最初の作業は終了です。
Elementorの初期設定
① Elementor Page Builderの『設定』へアクセス
有効化が終わったらダッシュボードのサイドバーにあるElementorから設定画面を開きます。プラグイン一覧からも設定画面を開くことができます。
② Generalタブの中の中で2か所にチェック
私が2年ほど使って、設定で変更した方がよいと思ったところはたった2か所です。Generalタブの中にある、Disable Global ColorsとDisable Global Fontsにチェックを入れるところです。この項目にチェックを入れると、Elementor独自の色やフォントの設定が無効になり、自分のテーマの設定で表示するようになります。
③「変更を保存」で準備完了
他にも、スタイルや詳細がありますがデフォルトのままで問題ありません。「変更を保存」して準備完了です。
投稿・固定ページを新規追加・編集する方法
お待たせいたしました。ようやくここからは実際の記事投稿の話です。ElementorはWordPressの『投稿』（ブログのようにどんどん記事を追加するもの）と、『固定ページ』（プライバシーポリシーやお問い合わせページなどのように何度も見るもの）のどちらでも使えます。記事をElementorで更新したい場合は、ダッシュボードで投稿の新規追加をするか、既存の投稿にアクセスします。既存の投稿を編集する場合は「編集」をクリックします。ここまでは、通常の記事更新と同じですね。
「Elementorで編集」の画面に切り替える
すると、新しく「Elementorで編集」ボタンが出現していますのでクリックします。
既存の記事であっても、新規の記事であっても、「Elementorで編集」をクリックします。すると、Elementorでの編集画面になります。タイトルやアイキャッチ画像はダッシュボードで変更してもいいですし、後ほどElementorの編集画面でもできます。
「セクション」の追加
見出しやテキスト、画像などの要素を配置する場所がセクションです。セクションはコンテンツのある程度のまとまりと思っていて大丈夫です。SEO的にはセクションには見出しが１つはあったほうがいいらしいのですが、まずは気にせずやってみましょう。
画面中央の「+」のところをクリックします。また、直接左のウィジェットを、「ウィジェットをここにドラッグ」の枠の中にドラッグするだけでもセクションにコンテンツの追加することができます。（バージョンアップで表示されるアイコンやデザイン、機能が変わることがあります。）
すでにコンテンツ（セクション）を作成していて間に追加したい場合は、マウスカーソルをセクションに乗せると水色の枠が表示され、「+」をクリックすればセクションを増やすことができます。ボタンが増えた場合はクリックしてみると機能がわかります。
また、セクションを追加する際、下のような「構造」を選択できます。
ホームページ作りでは、このような「段組」みのことをカラムと言います。カラムは後からでも追加や削除が可能ですし、幅の割合もマウスでドラッグすると変更できます。レスポンシブデザインになっているので、パソコンでは2カラムでも、画面が縦に細長いスマホでみると1カラムになるようになっています。好みの問題ですが、私はほとんどの場合一番左上の1カラムを選んでいます。クリックすると下のような枠が出ます。
「見出し」を追加する
要素（ウィジェット）が見当たらないときは、筆記体のElementorの右側あたりの電話番号のボタンみたいなところをクリックすると要素が選べるようになります。Elementorにはプロ（有料版）もあり機能が増えます。私は無料版を使っていますが、機能は十分だと思います。
例えば（T）見出しをドラッグ＆ドロップしてみます。
このようにホームページに挿入されます。ウィジェットエリアで様々な編集が可能です。コンテンツタブで内容を編集、HTMLタグで見出しの大きさも変更できます。ちなみに、H2＞H3と数字が大きくなるにしたがって、より下の階層とみなしますので、記事を構造的に考えて見出しを付けていきましょう。
さらに、スタイルタブで文字の色を白にして、詳細タブでボーダー対応や、囲み、ボックスシャドウなどを変更すると、こんな感じのおしゃれな見出しに変更ができます。気に入ったデザインは「テンプレート」として保存して他の記事で呼び出すことが可能です。CSSを指定してデザインを変えることもできます。
「画像」を追加する
同様に、ウィジェットの中から「画像」をドラッグ＆ドロップします。そして、ウィジェットエリアの「画像の選択」をクリックし、ホームページに載せたい画像を選択します。画像は自分のパソコンからアップロードします。
メディアの挿入画面では、ファイルを選択するか、その画面にファイルをドロップするとサーバーにアップロードされます。今回はフリー素材の写真ACよりダウンロードしたカメラを持った女性を入れてみます。
代替テキストや画像のサイズなどいろいろ細かいことはありますが、あまり気にせずに「投稿に挿入」をして画像を反映させましょう。
このような感じになります。画像にリンクをつけることや、画像が表示されるときや、マウスを乗せたときにアニメーション効果をつけることも簡単です。
詳細でボーダーを編集してみます。例えば、ボーダータイプ1本線、幅を9pxで色を白にします。ボックスシャドウを「はい」にして、少し影をつけるとまるで白い縁で囲んだかのように表示することができます。このようにCSSの知識がなくてもコード不要で結構おしゃれにできますよね。
「テキスト」を追加する
見出し、画像と来たら次は文章ですね。もう仕組みはお分かりいただけたと思います。文章もウィジェットから挿入しますので、テキストエディターをドラッグ＆ドロップしてください。
Elementorの初期の段階ではテキストエディターという部分でのみ記事の編集が可能でしたが、バージョンアップして記事のエリアに直接入力できるようになりました。公開画面上に直接打ち込んでいるような感覚で編集できるのでWordpressユーザーにとっては革命です。Windows Live Writerやホームページビルダーなどでもここまでのことはできませんでした。最強です。
「記事を公開」する
最後は、左下のウィジェットエリア最下部にある「更新」を忘れずにクリックします。どんな感じに仕上がったのか、目玉のアイコンをクリックしてプレビューを見るか、新しく更新したページにアクセスすれば公開している画面を見ることができます。
E lementorは無料プランでも十分に威力を発揮できます。今まで紹介したものだけでもおつりがくるような感じですが、ここではさらにElementorの「テンプレート」機能について紹介します。これもまた見事です。
記事編集の効率化「テンプレート」の使用方法
テンプレート機能にはページを丸ごと登録してしまう「ページテンプレート」と、セクションごとに登録する「テンプレート」の２種類あります。
オリジナルのテンプレート
よく使う記事の型を登録しておくと非常に便利です。例えば、お店レポート。「写真」「概要」「住所」「レビュー」「地図」などと掲載したい情報はだいたい決まってくると思います。ホームページビルダーなら『名前を付けて保存』みたいなことをしていたと思いますが、Elementorならクリックひとつです。
しかも、目次やAdsense広告などといったパーツの登録も可能です。AddQuicktagとか、TinyMCE Templatesなどいろいろと試しましたがElementorに勝るものはありませんでした。いや、Elementorが出てくるまではどれも記事作成の効率化に寄与していたんですよ。でも、それに代わり、さらに進化する形で機能が備わっていますので、もうElementorのテンプレート機能でやりたいことはほぼ全てできると思います。テンプレートのエクスポートやインポートができます。他のサイトで作成したテンプレートを他のホームページでも使えます。これも、複数のサイトを運営するものにとっては便利な機能の ひとつです。
Elementor独自のテンプレート
「テンプレートの追加」を選択します。すると、デフォルトでかなりたくさんのテンプレートが出てきます。一部はpro版（お金を払った人用）ですが、ちゃんと無料版もありますので試してみましょう。下はほんの一例です。
サイトのトップページに使えそうなものから、ページの一部分に使うものまでいろいろなものがあります。アイコンや色、文字、画像などすべて簡単に入れ替えたりカスタマイズしたりできます。ホームページ作りが初めての方は、このテンプレートを上手に組み合わせてやってみてもいいと思います。かなり素敵なサイトが仕上がりそうですね。
Elementorで発生する可能性のある不具合と対策
さて、すべて順調に話は進んできたのですが、使用するテーマとの相性によっては予期せぬ不具合が出る場合があります。過去に私が経験した現象と、その原因や対策について紹介します。
勝手にspanタグが挿入されて文字サイズが変わる
記事更新中に、backspaceで行を詰めたところ、それ以降の文の文字サイズが勝手に変わったぞ。なんじゃこれ。テキストモードにしてHTMLを確認すると、spanタグが挿入されているじゃないか。
ネット情報では、chromeとの相性のようです。確かにIEなどで記事を更新したらこの問題は発生しません。でも、使い慣れたブラウザがchromeだったら何とかしたですよね。そこでいろいろと条件を変えて検証したところ次のようなことがわかりました！
【原因】 backgroundで色を付けるCSSを書いている
body{
font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
background:#edf3fb;←背景色のCSS これが原因の1つ目
color:#171844;
}テーマのCSSのbackgroundを削除すると、<span style=”background-color: initial;”>は出てこなくなりました。親テーマか子テーマのどちらかでbackgroundを指定すると、文をbackspaceで記事を詰めたときに、<span>が挿入されてしまうのです。
私は背景に画像を使っていますので、backgroundは削除しました。
背景に画像を使う場合のCSS例
{background: url(images/bg/note.gif) repeat;}【原因】段落（p）の文字サイズをemで指定している
これも影響は大ですね。もう、backspaceをするたびに文字サイズが大きくなるのでかなりイライラします。これはテーマのデフォルトの文字サイズが小さいと思って、自分でサイズを大きくした場合に起こっていたようです。
.main-conts p{
line-height: 2.2em;
font-size: 1.2em;←文字サイズのCSS これが原因②20pxに
margin-bottom:0px;
}解決方法は簡単で、文字サイズをpxで指定したら大丈夫です。ちなみに、bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100％なら「1em=16px」が基準になります。どこかで指定していると、１文字分が１emなので相対的に変化していきます。わりとem（エム）を使っているテーマが多いのでこのトラブルに巻き込まれている方は多いかもしれません。
【原因】文字サイズを変更するスタイルが追加されている
②の方法で解決しない事例が他のテーマで発生しました。いろいろとやっていくうちに、やはりテーマのCSSにあるfont-size：100%を削除するとこの現象は起こらなくなります。何か意味があって設定されている数字。削除したことによってサイトにどのような影響があるのか若干心配ですが、問題は解決しています。
今回はbackgroundと文字サイズの件でしたが、他にも挿入されるタグがあるかもしれませんね。その場合もまずはテーマのCSSをチェックしてみてください。このような不具合もいつかは解決すると思いますが、最初は自力でなんとかするしかないと思います。
余白が自動修正されてしまう
お使いのテーマによっては、Elementorによってデザインが崩れることがあります。例えば、次のような場合は どちらがお好みですか？余白がある方はデフォルトの状態ですが、プラグインを有効化すると余白がない状態です。Elementorで勝手に修正されてしまっているのです。
chromeの検証機能を使ってCSSをチェックすると次のようなことがわかりました。
【原因】 Elementorのfrontend.min.cssで余白0が追記
解決方法は、!important；で強制的にCSSを上書きする。
/*余白自動修正の停止*/
.elementor-widget-heading .elementor-heading-title {
padding: 20px 10px!important;
margin-bottom: 20px!important;
line-height: 1!important;}
.elementor-text-editor {margin-bottom: 10px;}これで問題は解決です。以上のように、Elementorは便利ですが、唯一の欠点はテーマやブラウザによってCSSの不具合が生じることがあるということです。ただ、必ず解決方法はありますので、あきらめることはないと思います。この点を理解してぜひ使っていきましょう。