Elementorで記事を更新する

 WordpressのプラグインElementorには、無料で使えるテンプレートの他、サイト運営や記事更新のために欲しい機能がかなり詰め込まれています。この記事では、プラグインのインストールから初期設定、投稿、編集、テンプレートの使い方など、初めての方でもすぐに使える基本的な操作方法を紹介しています。

プレビュー不要。「公開画面」と「編集画面」が同じ!

WordPressのエディタって実際の公開画面と違うよね。いちいちプレビューするのも面倒だな。⇒Elementorで解決

 Elementorの最大の特長は、編集画面はテーマのCSSがすべて反映しているので、レイアウトもデザインもすべて公開画面と同じです。ビジュアルエディタを公開画面に近づける努力はもう必要ありませんし、テキストエディタで入力した後でプレビューをする必要もありません。

Elementor ウィジェット挿入エリア

Windows Live Writer(WLW)って便利だったよね。Elementorならそれ以上!

 そうそう、ブログの記事更新が捗るということでWordPressユーザーの間で人気でした。しかし、サポートが終了した2012年以降はバージョンアップもしていません。便利だったのに!と一時期がっかりしましたが、結論を言えばElementorの方が多機能で簡単便利です。そして、思い出していただきたいのですが、WLWはブログのテーマをダウンロードすることによって見た目を公開画面に近づけるため、トップページがアレンジされているようなWordPressのテーマだとなかなかうまくいきませんでした。何とか苦労してできても、違うパソコンではまた設定しなければいけませんでした。ElementorはWordPressのプラグインなのでログインさえできれば世界中どこでも同じ環境で記事の更新ができます。さらに、WLWが公開画面に「近い」というならば、Elementorは「公開画面と100%同じ」といって過言ではありません。背景、広告やサイドバーを含めたすべてが公開画面と同じように表示されています。

レイアウトの編集やCSSの追加も簡単!

CSSやカラムの編集がうまくいっているのかいちいちプレビューするのが面倒だよね。Elementorで解決

  カラムの編集や画像の挿入、記事の配置などは全てドラッグ&ドロップでできます。ホームページ初心者の方でhtmlやcssの知識が無くてもおしゃれなページを作成することができます。まさに、ページビルダーであり、最強の記事更新エディタです。テキストエディタとビジュアルエディタを行き来したり、プレビューで確かめながら編集する必要はもうありません。一時はその手間を少しでも軽減しようと、realtime previewなどのプラグインで対応しようと頑張りましたが、それも当然不要です。

テンプレート機能で雛形登録が可能!

 よく使う定型文や記事の雛形をテンプレートとして登録したい。Elementorで解決

 WordPressのプラグインでもありましたが、CSSが反映しなかったりプレビューが使えなかったりと微妙でした。そもそも雛形を作るのが面倒だったり、逆に登録が増えるとテンプレートを探すのが手間だったり・・・。結論。Elementorなら一発解決!

 ページをまるごと雛形として登録したり、一部分のみを登録したりクリックひとつでできます。エクスポートもできるので簡単便利です。アフィリエイトなどの広告タグも登録しておけば好きなところに挿入できますし、タイトルや項目などで枠組みの決まっている記事などは、それを呼び出して記事を更新できるので驚くほど捗ります。まさに最強!Elementor万歳!

▶ スポンサードリンク

Elementorのインストールと初期設定

 では、この素晴らしいプラグインをどのように導入したらいいのでしょうか。WordPressをある程度使用して慣れている方はこの辺りは読み飛ばしてください。この記事では、初心者のでもすぐに使えるように少々詳しく説明しています。

プラグインのインストール方法

① 管理ページ(ダッシュボード)にログイン

 Elementorのインストール方法は、他のプラグインと同じです。まず、ダッシュボードにログインをします。

② プラグインにアクセス 

 次に左側のサイドバーを見ます。「プラグイン」という項目がありますのでクリックして一覧を確認します。下のキャプチャはwpXサーバーの自動インストール機能でWordPressをインストールした時の、初期の状態の画面です。

プラグインの管理画面

 (初めて見る方へ)既にプラグインがいくつかインストールされています。例えば、WP Multibyte Patchというプラグインですが、WordPressは外国製なので日本語表示で予期せぬ不具合が出る場合があります。それを未然に修正してくれるものです。有効化しておくと安心です。

 また、Akismet Anti-Spam (アンチスパム)というプラグインは、その名の通りスパムコメントをカットしてくれる優秀なプラグインです。APIキーというものを取得する必要がありますので別の記事で紹介します。

③ Elementorを検索してインストール

 このようにWordPressの機能を追加するものがプラグインです。話しは少しそれましたが、プラグインの「新規追加」ボタンをクリックし、キーワードに「Elementor」と入力します。おそらくトップに「Elementor Page Builder」というものがトップに表示されると思いますので、「今すぐインストール」をクリックします。

Elementorを検索する
Elementorを有効化する

④ プラグインを有効化

 数十秒でインストールが完了し、先ほどクリックしたところが「有効化」に変わります。素直にクリックして有効化します。 Elementorのうたい文句は、最も高度なフロントエンド・ドラッグ & ドロップ・ページビルダーということです。どんなテーマやページ、デザインにも対応しています。凄いですねぇ、でも本当に便利です。 ここまでで、最初の作業は終了です。次は設定をしていきます。

Elementorの初期設定

① Elementor Page Builderの『設定』へアクセス

有効化が終わったらダッシュボードのサイドバーにあるElementorから設定画面を開きます。プラグイン一覧からも設定画面を開くことができます。

Elementorの設定はここから

② Generalタブの中の中で2か所にチェック

 細かいところはいろいろありますが、私が2年ほど使ってみて変更した方が使いやすいと思ったところはたった2か所です。Generalタブの中にある、Disable Global ColorsとDisable Global Fontsにチェックを入れるところです。この項目にチェックを入れると、Elementor独自の色やフォントの設定が無効になり、自分のテーマの設定で表示するようになります。

 ElementorのテーマやCSSをいろいろアレンジして、今後オリジナルのホームページに仕上げていくときには邪魔になります。データトラッキングの使用は書いてある通りで、チェックを入れるも入れないも自由です。お好きなようにどうぞ。(CSSを使った投稿の追加は こちら

Elementorの設定画面

③「変更を保存」で準備完了

 他にも、スタイルや詳細がありますがデフォルトのままで問題ありません。「変更を保存」して準備完了です。使っていくうちに気になることがあれば調べてみると良いと思います。私は特に変更していません。

Elementorで発生する可能性のある不具合と対策

 さて、早速記事の更新と行きたいのですが、使用するテーマとの相性によっては予期せぬ不具合が出る場合があります。過去に私が経験した「現象」とその「原因・対策」について紹介します。

余白が自動修正されてしまう

 お使いのテーマによっては、Elementorを有効化したことでデザインが崩れることがあります。私の場合、アクセス増やアフィリエイトでの成果を期待して賢威というテンプレートを使っています。この賢威ですが、バージョンが8になったところで次のような問題が発生しました。

① 不具合と感じる現象の解説

 左のものは、見出しの余白が無いので見づらいですよね。Elementorで修正されてしまっているのです。

余白がカットされた表示
理想的な表示

② 原因と対策

 原因はElementorのfrontend.min.cssというスタイルによって余白0が追記されることでした。

elementorで上書きされるcss

 なので、paddingとmarginをさらに上書きするCSSを子テーマのCSSに追記しました。

  1. /*余白自動修正の停止*/
  2. .elementor-widget-heading .elementor-heading-title {
  3. padding: 20px 10px!important;
  4. margin-bottom: 20px!important;
  5. line-height: 1!important;}
  6. .elementor-text-editor {margin-bottom: 10px;}

これで問題は解決です。

Back spaceを使うと不要なタグが挿入される件

困っている女性

① 不具合と感じる現象の解説

 もうひとつの問題点。それは、Elementorのテキストエディタで入力中に、BackSpeceキーで行を詰めると、自動的にタグが挿入されるという問題点です。その内容によっては、その部分の文字のサイズが変わってしまうなんてことも。不要なタグを削除するという面倒な問題が発生します。ただ、この問題は常に起こるわけではなく、テーマ側で文字サイズを設定するCSSがem表示であったり、%などで2重に設定したりしているときに起こります。

このテキストを変更するには編集ボタンをクリックしてください。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

この文章を英文の前でbackspaceキーを押し、前の段落とつないだとします。すると詰めたところに<span style~>が挿入される場合があります。

不要なspanタグ

 見た目には影響がないのですが、このようなタグがどんどん増えていくのはなんとなく気持ちのよいものではありませんよね。

② 原因と対策

不要なspanタグが挿入されている

1  テーマのCSSで文字サイズをem指定している

 まず、1つ目の事例ですが、テーマのCSSで文字サイズをemやrem指定しているときにおこることが分かりました。CSSを見てみましょう。このように、スタイルのCSSで文字サイズをrem表示していると、backspaceで行を詰めたときspanタグが挿入されるのです。この情報は検索してもなかなかヒットしないので、解決策を見つけるのにとても苦労しました。font-sizeの1.6emを16pxに直すと下のようになりました。赤いところが改行して行を詰めたところです。無駄なタグは挿入されていないですよね。これが1つ目の原因・対策事例です。

  1. .main-conts p{
  2. line-height: 2.2em;
  3. font-size: 1.2em;←文字サイズのCSS これが原因②20pxに
  4. margin-bottom:0px;
  5. }

 backspaceをするたびに文字サイズが大きくなるのでかなりイライラします。テーマのデフォルトの文字サイズが小さいと思って、大きくした場合に起こっていたようです。これは、文字サイズをpxで指定したら解決しました。bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。どこかで指定していると、1文字分が1emなので相対的に変化していきます。わりとem(エム)を使っているテーマが多いのでこのトラブルに巻き込まれている方は多いかも知れません。chromeを使っていてそれをやめるというのもまた難しいですよね。それならCSSを書き換えたほうが楽だと思います。

メインコンテンツの文字サイズと行間の設定
不要なspanは挿入されていない

2 文字サイズを変更するスタイルが追加されている

 2つ目の事例です。WordPressテーマRUMBLE(TCD058)を使っていたときのことです。賢威とは違って、文字サイズをpx設定にしただけでは問題が解決しませんでした。確認すると、文字サイズを設定するスタイルが他にもありました。

font-size:100%が原因

 このfont-size:100%を削除するとElementorで問題と感じている現象は起こらなくなります。ただ、何か意味があって設定されている数字。一見削除しても問題は見られなかったのですが、削除したことによってサイトにどのような影響があるのか検証が必要ですね。以上のように、テーマによっては若干の修正が必要な場合がありました。それ以上に恩恵は大きいですけどね。

▶ スポンサードリンク

投稿・固定ページを新規追加・編集する方法

 ElementorはWordPressの『投稿』(ブログのようにどんどん記事を追加するもの)と、『固定ページ』(プライバシーポリシーや沿革のように何度も見るもの)のどちらでも使えます。記事をElementorで更新したい場合は、ダッシュボードで投稿の新規追加をするか、既存の投稿にアクセスします。既存の投稿を編集する場合は「編集」をクリックします。ここまでは、通常の記事更新と同じですね。

「Elementorで編集」の画面に切り替える

WordPressで記事を新規投稿する

 すると、新しく「Elementorで編集」ボタンが出現していますのでクリックします。

WordPressで記事を投稿する

 既存の記事であっても、新規の記事であっても、「Elementorで編集」をクリックします。すると、Elementorでの編集画面になります。タイトルやアイキャッチ画像はダッシュボードで変更してもいいですし、後ほどElementorの編集画面でもできます。

新しい「セクション」の追加

 見出しやテキスト、画像などの要素を配置する場所がセクションです。セクションはコンテンツのある程度のまとまりと思っていて大丈夫です。SEO的にはセクションには見出しが1つはあったほうがいいらしいのですが、まずは気にせずやってみましょう。

Elementor ウィジェット挿入エリア

 画面中央の「+」のところをクリックします。また、直接左のウィジェットを、「ウィジェットをここにドラッグ」の枠の中にドラッグするだけでもセクションにコンテンツの追加することができます。(バージョンアップで表示されるアイコンやデザイン、機能が変わることがあります。)

 すでにコンテンツ(セクション)を作成していて間に追加したい場合は、マウスカーソルをセクションに乗せると水色の枠が表示され、「+」をクリックすればセクションを増やすことができます。ボタンが増えた場合はクリックしてみると機能がわかります。

Elementorでセクションを追加するボタン

また、セクションを追加する際、下のような「構造」を選択できます。

Elementorでセクションを増やす

 ホームページ作りでは、このような「段組」みのことをカラムと言います。カラムは後からでも追加や削除が可能ですし、幅の割合もマウスでドラッグすると変更できます。レスポンシブデザインになっているので、パソコンでは2カラムでも、画面が縦に細長いスマホでみると1カラムになるようになっています。好みの問題ですが、私はほとんどの場合一番左上の1カラムを選んでいます。クリックすると下のような枠が出ます。

セクションのエリア

「見出し」を追加する

 要素(ウィジェット)が見当たらないときは、筆記体のElementorの右側あたりの電話番号のボタンみたいなところをクリックすると要素が選べるようになります。Elementorにはプロ(有料版)もあり機能が増えます。私は無料版を使っていますが、機能は十分だと思います。

 例えば(T)見出しをドラッグ&ドロップしてみます。

Elementorで見出しを入力

 このようにホームページに挿入されます。ウィジェットエリアで様々な編集が可能です。コンテンツタブで内容を編集、HTMLタグで見出しの大きさも変更できます。ちなみに、H2>H3と数字が大きくなるにしたがって、より下の階層とみなしますので、記事を構造的に考えて見出しを付けていきましょう。

Elementorで見出しに枠をつける

 さらに、スタイルタブで文字の色を白にして、詳細タブでボーダー対応や、囲み、ボックスシャドウなどを変更すると、こんな感じのおしゃれな見出しに変更ができます。気に入ったデザインは「テンプレート」として保存して他の記事で呼び出すことが可能です。CSSを指定してデザインを変えることもできます。

WordPress ElementorはCSS追加も可能な最新エディタ

「画像」を追加する

 同様に、ウィジェットの中から「画像」をドラッグ&ドロップします。そして、ウィジェットエリアの「画像の選択」をクリックし、ホームページに載せたい画像を選択します。画像は自分のパソコンからアップロードします。

 メディアの挿入画面では、ファイルを選択するか、その画面にファイルをドロップするとサーバーにアップロードされます。今回はフリー素材の写真ACよりダウンロードしたカメラを持った女性を入れてみます。

Elementorで画像ウィジェットを挿入する
Elementorで画像を挿入する

 代替テキストや画像のサイズなどいろいろ細かいことはありますが、あまり気にせずに「投稿に挿入」をして画像を反映させましょう。

 このような感じになります。画像にリンクをつけることや、画像が表示されるときや、マウスを乗せたときにアニメーション効果をつけることも簡単です。

Elementorで画像を挿入

 詳細でボーダーを編集してみます。例えば、ボーダータイプ1本線、幅を9pxで色を白にします。ボックスシャドウを「はい」にして、少し影をつけるとまるで白い縁で囲んだかのように表示することができます。このようにCSSの知識がなくてもコード不要で結構おしゃれにできますよね。

Elementorで画像に枠をつける

「テキスト」を追加する

 見出し、画像と来たら次は文章ですね。もう仕組みはお分かりいただけたと思います。文章もウィジェットから挿入しますので、テキストエディターをドラッグ&ドロップしてください。

Elementorでテキストを入力

 Elementorの初期の段階ではテキストエディターという部分でのみ記事の編集が可能でしたが、バージョンアップして記事のエリアに直接入力できるようになりました。公開画面上に直接打ち込んでいるような感覚で編集できるのでWordpressユーザーにとっては革命です。Windows Live Writerやホームページビルダーなどでもここまでのことはできませんでした。最強です。

「記事を公開」する

 最後は、左下のウィジェットエリア最下部にある「更新」を忘れずにクリックします。どんな感じに仕上がったのか、目玉のアイコンをクリックしてプレビューを見るか、新しく更新したページにアクセスすれば公開している画面を見ることができます。

 Elementorは無料プランでも十分に威力を発揮できます。今まで紹介したものだけでもおつりがくるような感じですが、ここではさらにElementorの「テンプレート」機能について紹介します。これもまた見事です。

▶ スポンサードリンク

記事編集の効率化「テンプレート」の使用方法

 テンプレート機能にはページを丸ごと登録してしまう「ページテンプレート」と、セクションごとに登録する「テンプレート」の2種類あります。

Elementorの投稿画面

オリジナルのテンプレート

 よく使う記事の型を登録しておくと非常に便利です。例えば、お店レポート。「写真」「概要」「住所」「レビュー」「地図」などと掲載したい情報はだいたい決まってくると思います。ホームページビルダーなら『名前を付けて保存』みたいなことをしていたと思いますが、Elementorならクリックひとつです。

Elementorのオリジナルテンプレート

 しかも、目次やAdsense広告などといったパーツの登録も可能です。AddQuicktagとか、TinyMCE Templatesなどいろいろと試しましたがElementorに勝るものはありませんでした。いや、Elementorが出てくるまではどれも記事作成の効率化に寄与していたんですよ。でも、それに代わり、さらに進化する形で機能が備わっていますので、もうElementorのテンプレート機能でやりたいことはほぼ全てできると思います。テンプレートのエクスポートやインポートができます。他のサイトで作成したテンプレートを他のホームページでも使えます。これも、複数のサイトを運営するものにとっては便利な機能のひとつです。

Elementor独自のテンプレート

 「テンプレートの追加」を選択します。すると、デフォルトでかなりたくさんのテンプレートが出てきます。一部はpro版(お金を払った人用)ですが、ちゃんと無料版もありますので試してみましょう。下はほんの一例です。

Elementorで選択可能なテンプレート

 サイトのトップページに使えそうなものから、ページの一部分に使うものまでいろいろなものがあります。アイコンや色、文字、画像などすべて簡単に入れ替えたりカスタマイズしたりできます。ホームページ作りが初めての方は、このテンプレートを上手に組み合わせてやってみてもいいと思います。かなり素敵なサイトが仕上がりそうですね。