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

Q&A (ベーター版)

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest

Q&A |Elementorおよび、Elementor Pro、WordPressから当サイトに関する内容まで、あらゆるご質問と回答をまとめたページです。知りたい事がない時は、ページ内にある Q&A リクエスト簡易フォームから気軽に質問が可能です。少しでもお役に立てたら幸いです。 

Elementor Proに関する質問

ElementorProテーマビルダー ってテーマが作れるの?

【テーマビルダーとは?】

厳密に言うと、みなさんがWordPressでお使いの「テーマ」を作れる訳ではありません。「テーマの様な」が正しい表現となります。トップページ、ヘッダー、フッター、投稿一覧ページ、投稿ページに固定ページなどを、テンプレートという形で作成する事が出来ます。そのテンプレートはテーマの様に自動的に投稿や固定ページのタイトルや本文、カテゴリーやタグなどがテンプレートに従い表示されます。

おじさん
おじさん
ん〜なんか分かりそうで分からない・・・

おっと!Q&Aにも登場出来るんですね(笑)

別の言い方をすれば、テーマは「全ページデザインセット」だとするとElementorProのテンプレートは「各ページデザインキット」となります。

【テーマみたいに配布出来たりするの?】

これも厳密に言うと、出来ません。テーマの場合は、1ファイルのダウンロードおよびインストールで済みます。でも、ElementorProの場合、セットには出来ません。つまり、ヘッダーのテンプレート、フッターのテンプレート・・・と各パーツのテンプレートを書き出し、それを他のElementorPro搭載のWordPressへ読み込ませる事は可能です。なので、先ほどの例えで「テーマ=デザインセット」に対し、「ElementorProのテンプレート=デザインキット」という表現となります。

しかし、テーマでは自由に変更出来ない箇所が多く、カスタマイズにはプログラミング知識が必要となる一方で、ElementorProの場合は、読み込んだテンプレートを自由にカスタマイズする事が出来る点を考えると、書き出し/読み込みが面倒でも、十分にテーマ≒ElementorProとなります。

 

(参考記事)
【徹底比較】Elementorの無料版と有料版(PRO版)
【VoiceBox】無料版ユーザーからの質問「テーマビルダーって?」

 

ElementorProでパンくずリスト を追加するには?

【パンくずリストとは?】

ElementorProでパンくずリスト  を追加の前に・・・

breadcrumbs

当サイトで言うと、記事ページのヘッダー直下にある赤枠部分がパンくずリストです。SEO的にもパンくずリストの有無は有益との事で、設置する事をオススメします。

【パンくずリストを設置するには?】

条件としてはElementorProである事と、SEO系プラグインで有名な「Yoast SEO」が必要です。他のプラグインを使ってパンくずリストを入れる方法もある様ですが、自分はSEO対策ついでにYoastSEOを使用しています。

1)プラグイン「Yoast SEO」をインストール

2)ダッシュボードのメニューに追加された「SEO(=Yoast)」を開く

3)「Search appearance」を開きます。

searchappearance

4)「パンくずリスト」というタブがあるので、選択

5)パンくずリストを有効にするを「有効」にします。

6)Elementorの編集画面を開きます

7)ウィジェットの中から「breadcrumbs」を設置します。

breadcrumbs-icon

<関連記事>
SEOとElementorについて

 

ElementorProでヘッダーを固定 したい

【Sticky機能】

ElementorProでヘッダーを固定 したい際によく使うのが、Sticky機能です。この機能は「セクション」および「ウィジェット」に設定する事ができます。特にヘッダーを固定させる際によく使う機能です。また、デバイス別(デスクトップ・タブレット・モバイル)に固定する/しないを設定出来ます。

【Sticky設定の仕方】

qa-sticky

1)固定させたい「セクション」または「ウィジェット」を選択

2)「詳細」タブを開く

3)Motion Effects部分を表示(上記画像)

4)Sticky を「上」または「下」に設定(赤枠部分)

5)Sticky Onで、機能反映(=固定化)したいデバイスを設定

(例)モバイルだけ固定する場合は、デスクトップとタブレットを削除

詳しくはこちらの記事を参考にしてください。

Elementor Proでヘッダーを作る

Elementor無料版でHeader(ヘッダー)を自由にする方法

 

ElementorProの更新 って止めたら使えなくなるの?

【更新停止の行方について】

これ結構聞かれるんですが、答えを先に言うと「更新を停止しても使えます」

サポートサービス、バージョンアップデートが受けられなくなります。

Your existing project will remain intact. The only difference is support, updates, and access to premium templates which require renewal.

(Elementor公式サイトからの引用:https://elementor.com/faq/

“(Google翻訳引用)既存のプロジェクトはそのまま残ります。唯一の違いは、サポート、(プラグインの)更新、および更新が必要なプレミアムテンプレートへのアクセスです。”

 

ElementorProのサービスに関する質問

ElementorProの購入・更新・料金・仕様などサービスに関するご質問を中心に回答して参ります。

ElementorProの更新 について

ElementorProは1年毎の利用料を支払い使う事が出来ます。(要は年額性)

【更新をしないとどうなる?】
作ったホームページが見れなくなったりする事はありません。
新たなウィジェットなどを使わない限り、サイトの更新も可能です。
出来なくなる事としては、以下が想定されます。
・Elementorのバージョンアップが出来ない。
・Elementorのサポートが受けられなくなる。
・ElementorProのテンプレートが新規で使えなくなる。

だけです。

【更新方法とメリット】
更新時期が近くと、WordPressの通知に更新時期を知らせるアラートが出ますので、うっかり更新忘れ・・・という事もあまりないかと思います。
また、更新料は初回の料金より25%ディスカウントされるので、更にお得に1年利用する事が出来ます。更新はElementorサイトのマイアカウント内にて行います。

詳しくは、Elementor本家サイトを参考にしてみて下さい。
https://elementor.com/faq/

Elementor無料版に関する質問

Elementor無料版に関する質問 をまとめたグループです。探している内容がもしも見当たらない場合は、Q&Aリクエストよりお気軽にご質問下さい!

ヘッダーを固定したい できるの?

【無料版でヘッダーを固定したい】

出来ます。が、少し設定が難しいです。

1)固定化したいセクションに、CSSクラスを追加
2)テーマ>カスタマイズ>追加CSS
3)固定化するコードを入力(この時に1で追加したクラスIDで指定)
4)制作中のページに戻って動作確認

(参考記事)Elementor無料版でHeader(ヘッダー)を自由にする方法

 

Tips & Idea

Elementorで画像の一部にリンク を貼りたい!

簡単な方法「イメージマップ」を使おう!

Elementorで画像の一部にリンク を貼るにはイメージマップが簡単です。
イメージマップとは?1枚の画像の中に複数のリンクを設定する方法です。これはHTMLの知識が少し必要となります。が、コードは極力避けたい(ノンプログラミング精神?)のが本サイトの裏テーマなので、簡単に出来る方法をご紹介します。

おじさん
おじさん
そんな精神あったんだ・・・

HTML Imagemap Generator」で簡単HTMLコード生成

imagemap1

書いてある通りにイメージマップを設定したい画像をドラッグします。

imagemap2

次に表示された画像のリンクを貼りたい部分を、右上の「短形を描く」「円を描く」・・・など好きな形を選び、囲います。すると、上の画像の様にリンク部分が水色になります。

右のエリアにHTMLが自動生成されるので、メモ帳などに貼り付け、リンクの追加などを行います。

 

Elementor「HTMLウィジェット」

まずは、あらかじめ使う画像はWordPressのメディアにアップロードしておき、画像のURLをゲットします。ゲットしたURLを先ほどのHTMLのコードに反映させ、ElementorのHTMLウィジェットを配置、コンテンツ部分に貼り付けます!

html-w

 

完成はこちら

 

ホバー時のエフェクトや、リンクのアクションなどについては、各自お調べ下さい。

WordPressに関する質問

WordPressを始める にはどうしたらいいの?

【WordPressを使う為に必要なもの】

WordPressを始める 為に必要なものは・・・

・レンタルサーバー
Elementorを使う前提であれば、Elementorのシステム要件を満たせる
サーバーを選んで下さい。詳しくはこちらの記事をご参考にして頂けたらと思います。
Elementorのレンタルサーバー 選び

・ドメイン
ドメインは2種類あります。レンタルサーバーから付与されるドメインと、
自身で取得する独自ドメインがあります。
ドメインについてはElementorの利用には影響しません。

【WordPresを始める手順】

人によって順序は異なりますが、自分の手順の場合、以下となります。

(1)レンタルサーバー選び
(2)レンタルサーバー契約
(3)簡易WordPressのインストール
(4)WordPressへログイン
(4)独自ドメインの取得
(5)独自ドメインの設定(同社ドメイン取得の場合)
(6)再度WordPressへログイン

さらに詳しくはこの記事をご参考にしてみて下さい!
Elementorを使う為の WordPress講座 (準備編)
Elementorを使う為のWordPress 講座2(ログイン)

エラー・不具合に関する質問

エラー・不具合に関する質問 | どんなに優れたツールやプラグインでも不具合は付きもの!そんな時はここをご覧頂けたら解決のヒントが見つかるかも?!もしも該当する質問がなければ、是非Q&Aリクエストからご質問下さい。

ウィジェットをドラッグ&ドロップ出来ない

【事象】

赤色〇の中に禁止マークがついて、ドラッグアンドドロップ(ウィジェットの追加)ができません。

 

【解決策】

絶対ではありませんが、この様にドラッグアンドドロップできない場合、
Microsoftのブラウザ「InternetExplorer」または「Edge」を使用してElementorで編集しているケースがあります。

Elementorの編集時の推奨ブラウザは「Safari」「Chrome」「Firefox」となります。
(Elementorで構築されたページはMicrosoftのブラウザーでも表示されます。)

まずは、ブラウザを変えて試してみて下さい。

メモリやPHPのバージョン ってどうやって確認するの?

【どんな時にメモリやPHPのバージョンを見るの?】

主にエラーが発生した時に確認します。いちいちレンタルサーバーの管理画面などに行かなくてもWordPress上で確認する事が出来ます。

【どこで見れるの?】

WordPressのメニューにある「Elementor」の中の「システム情報」です。
qa-system1

qa-system2

 

【関連情報】

【シリーズ:Elementor不具合対応】エラーが出た時に試したい解決策7選

【シリーズ:Elementor不具合対応】公開ボタンを押すとエラーが出た!

Elementorの不具合・問題 対策マニュアル2019年版

Q&Aリクエストフォーム

現在、新規Q&Aのリクエストは停止しております。復活までしばらくお待ち下さい。

ポップアップ!

vb_header
<注意事項>
・お問い合わせ頂きました内容により、
 ご回答・ご返信出来ない場合がございます。
・ご質問やお悩みに関する内容について、
 記事にて「匿名」にて取り上げさせて頂くことも御座います。
・上記の内容についてご了承・ご同意の上、本フォームよりお送り下さい。

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