こんにちは、ユキです＾＾
プログラミングコードを書かなくてもWebサイトが作れちゃうノーコード、
ノーコードの中でも比較的使いやすいと言われてるのが「WordPress」よ。
ノーコードで比較的Webサイトが作りやすいWordPressで、
さらにWebサイトが制作を手軽にしてくれるのが「Elementor」というプラグインなの。
WordPressでWebサイトを作るのにElementorを使ってみたいけど
使い方が分からないって人も居るかもしれないわ。
そこでWordPressのページビルダー系プラグインであるElementorの使い方について、
詳しく見ていきましょう。
Elementorの使い方
WordPressでのElementorの使い方としては
1.Elementorをインストール
2.Elementorに基本設定を施す
3.固定ページを作る
4.固定ページを編集する
5.作ったページを公開する
というのが大まかな流れとなるわ。
この流れはElementor特有のものじゃなくて、Webサイトを作る際にはWordPressや
Elementorを使う使わないに関わらずこういった流れになるのが一般的よ。
ただし厳密に言うと、Elementorを使って行うのは4の「固定ページを編集する」までで、
5の公開はWordPressで行う作業なんだけどね。
Elementorを使ってWebサイトを作る前にやっておくべきこと
まず最初はElementorのインストール方法、といきたいところだけど、Elementorを
使ってWebサイトを作る前に1つやっておかないといけないことがあるのよ。
これはElementorと言うよりも、WordPressを使ってWebサイトを作る前に
やっておかないといけないことと言っても良いわ。
それは、作ったWebサイトを公開する「サーバー」と、
作ったWebサイトのURLとなる「ドメイン」を調達することなの。
WordPress以外のノーコードツールではWebサイトの制作から公開まで一括で
できたりするんだけど、WordPressでできるのはWebサイトの制作だけ。
だからWordPressで作ったWebサイトを公開するには、
必要なサーバーとドメインは自分で用意しなきゃいけないのよ。
サーバーは自分で立てられるものの通信に関する相当な知識を要するから、
レンタルするのが一般的だわ。
ドメインはお金を払って取得することになるんだけど、サーバーとは別に取得しても
良いし、サーバーをレンタルする会社で取得することもできるの。
金銭的にはどっちがお得かは言いにくいけど、何かしらトラブルが発生した場合は
サーバーとドメインを一括で調達しておいた方が対処はしやすいんじゃないかしら。
WordPress自体は無料で使うこともできるしElementorも無料で使えるけど、サーバーの
レンタルとドメインの取得にはお金がかかるわ。
だからElementorを使えば無料でWebサイトが作れるものの、
それを公開するにはお金がかかるから注意してね。
WordPressにElementorをインストール
まず最初にElementorをインストールするだけど、ElementorはWordPressの
プラグインだから、当然WordPressがパソコンにインストールされてる必要があるわ。
公式サイトでWordPressをダウンロード・インストールして起動・ログインしたら、
「ダッシュボード」から「プラグイン」を選んで「新規追加」へ進むの。
そして「Elementor」とキーワード検索、ヒットした「Elementor Page Builder」の
「今すぐインストール」をクリックして「有効化」を選べばOK。
インストールが完了したら、ダッシュボードのプラグインの項目で「インストール済みの
プラグイン」を選択肢て、Elementorがインストールされてることを確認しておきましょう。
Elementorに基本設定を施す
WordPressにElementorをインストールしたら、
次はElementorに基本設定を施していくわ。
と言っても、デフォルトのままで何の問題も無いから、
無理にElementorの設定をいじる必要は無いのよねぇ。
しいて変更する箇所と言えば「コンテンツの幅」の項目ぐらいかしら。
コンテンツの幅はデフォルトだとパソコン画面に合わせたサイズになってるから、
スマホやタブレット専用のWebサイトを作るんだったらコンテンツの幅を
変えておかないといけないわよ。
ただパソコン用のWebサイトを作って、それをスマホ用やタブレット用に
サイズ変更する場合は特にコンテンツの幅は変更しなくても大丈夫。
それ以外の項目についても初めてElementorを使う場合には変更する必要は無くて、
Elementorの使い方に慣れてきたら、自分のWebサイトの作り方にあった設定に
変更しましょう。
固定ページを作る
Elementorに基本設定を施したら、いよいよ実際にWebサイトを作っていくことになるわ。
Elementorの管理画面から「固定ページ」→「新規追加」を選ぶと、
固定ページの編集画面が表示されるの。
編集画面が表示されたら、まずは
・ページタイトル
・パーマネントリンク
・ページ属性
の3つを決めるのよ。
「ページタイトル」はそのものズバリWebサイトのタイトルのこと。
これから作るWebサイトの種類によっては画面に表示されないこともあるんだけど、
ブラウザ上部のタブに表示されるわ。
それに関連ワードが検索された時の表示順位にも関わってくるから、
できればWebサイトの内容に関連したタイトルを付けた方が良いわよ。
パーマネントリンクはWebサイトのURL
「パーマネントリンク」は、これから作るWebサイトのURLのことよ。
トップページだったら「http://www.○○○」となるけど、Webサイトの中のページを作る際は
「http://www.○○○/×××」とドメインの後に続く部分を設定することになるわ。
ここでWebサイトのURLを設定することになるから、
事前にドメインを取得しておく必要があるのよ。
ドメインの後に続く部分にひらがなやカタカナ、漢字などの日本語を使っても
良いんだけど、アルファベットで表記するのが一般的ね。
URLに日本語が含まれてても検索で不利になることは無いものの、
リンクを貼った時にちょっと分かりにくくなっちゃうのよ。
例えばGoogleなどのブラウザでアクセスした場合は、
画面上部のURL表示欄にはちゃんと日本語を含むURLが表示されるわ。
でも自分の作ったWebサイトを紹介するのにTwitterなんかに貼り付けると、
日本語の部分が「%A1%B2」といったように記号と英数字に置き換えられちゃうの。
ドメインの後に訳の分からない記号や英数字が並んでるURLって何だか怪しそうに
見えるわよね。
そのためURLに日本語を使うと、せっかく作った自分の作ったWebサイトへのリンクを
踏んでもらえなくなる可能性が高くなるってわけ。
だからできればURLには日本語を使わずに、
ローマ字表記で構わないから半角英数字を使うようにしましょう。
ページ属性はページの大まかなデザイン
「ページ属性」はこれから作るページの大まかなデザインのことで、
用意されてるテンプレートから選ぶことになるわ。
Elementorに用意されてるページ属性のテンプレートは
・デフォルトテンプレート
・Elementor キャンパス
・Elementor 全幅
・フロントページ
・全幅
の5種類よ。
それぞれの違いは
・サイドバー
・ナビメニュー
・見出しタイトル
の有無で、
・デフォルトテンプレート→全部有
・Elementor キャンパス→全部無
・Elementor 全幅→ナビメニューのみ有
・フロントページ→見出しタイトルのみ無
・全幅→サイドバーのみ無
となってるわ。
ちなみに「サイドバー」は画面の左右どちらかもしくは両方にあるメニュー、
「ナビメニュー」は画面上部にあるメニューのことよ。
例えばAmazonのショッピングサイトで「本」のカテゴリーページを開いたとすると、
画面左のおすすめとかジャンルとかが縦に並んでるのがサイドバーね。
画面上部の詳細検索やジャンル一覧なんかが横に並んでるのが、
ナビメニューということになるわ。
バナーを貼って広告収入を得たいならサイドバーがあるデフォルトテンプレートか
フロントページ、といったように自分の作りたいWebサイトに合ったテンプレートを
選ぶと良いわよ。
タイトル・URL・ページ属性を決めたら一旦保存
タイトル・URL・ページ属性の3つを決めたら、
そのままページの編集に移るんじゃなくて、一旦内容を保存するの。
保存せずにページの編集に移っちゃうと、ページ属性の変更が反映されないのよ。
だから、タイトルとURLは特に関係なくて、ページ属性を決定したり変更したりした
場合は一旦内容を保存して反映させる必要があるってわけ。
タイトル・URL・ページ属性を決めたら、一度Elementorを閉じてWordPressの
編集画面に戻り、画面右にある「公開」の項目内の「下書きとして保存」をクリックすれば
OKよ。
ただし「公開」のボタンをクリックしちゃうと、
タイトルとページ属性を決めただけのページが公開されることになるから気を付けてね。
固定ページを編集する
WordPressの編集画面で下書きとして保存してページ属性の変更を反映させたら、
「Elementorで編集」ボタンをクリックして固定ページを編集していくのよ。
編集画面に移ると、画面左にウィジェットというWebサイトページを作るための
あらかじめ用意された部品が並んでいて、画面右にWebサイトページを作る
作業スペースがあるの。
まずは画面右の作業スペース内の「ウィジェットをここにドラッグ」にあるプラスマークを
クリックして、セクションを追加しましょう。
セクションを追加すると「構造の選択」って表示が出て、
ページを横に何分割するかを選ぶことになるわ。
WordPress以外のノーコードツールだとページを横に分割できなかったりするんだけど、
WordPressだと最大で6分割まで可能なのよ。
追加したセクションにポインタを持って行くと、
セクションの上部にバツとマルが6個並んだアイコンが表示されるの。
バツでセクション自体を削除したりセクションの分割数を減らしたりできるし、
マルで増やすこともできるから、編集しながらセクションやセクションの分割数は
変更すると良いわ。
ドラッグ&ドロップでウィジェットを追加
セクションを追加したら、画面左に並んでるウィジェットから必要なものを選び、
ドラッグ&ドロップで追加したセクションに組み込んでいくの。
例えばページに見出しを付けるんだったら、画面左にある「見出し」のウィジェットに
ポインタを重ねて、マウスの左ボタンを押したまま追加したセクションのところまで
ポインタを持って行くのよ。
セクションのところでマウスの左ボタンを離せば、
作業スペースのセクションに見出しのウィジェットを組み込むことができるわ。
見出しのウィジェットに文字を書き込むには、セクションに組み込んだ見出しの
ウィジェットにポイントを重ねて、表示されたペンのマークを右クリック、
「編集」を選ぶと見出しのウィジェットに文字が書き込めるのね。
ちなみにペンのマークを右クリックして「削除」を選ぶと、
セクションに組み込んだウィジェットを削除することができるわよ。
後はセクションを追加して、画面左から使いたいウィジェットを選んでドラッグ&ドロップで
セクションに組み込み、必要なら文字を入力する、を繰り返して思い通りの
Webサイトページを作っていくのよ。
Elementorで使えるウィジェット
Elementorでは全部で約30個のウィジェットが使えるようになってるわ。
セクションの中にもう1つセクションを配置することができる「内部セクション」、
ページに見出しが付けられる「見出し」。
好きな画像が貼り付けられる「画像」、
自由に文章を入力したテキストボックスが追加できる「テキストエディター」。
YouTubeやVimeoなどの動画をページに埋め込む「動画」、
リンクなどのボタンが設置できる「ボタン」。
色んな種類や色、太さの横線が追加できる「区切り線」、
セクションとセクションの間に空白を作る「スペーサー」。
お店の場所なんかを紹介するのにGoogleマップが追加できる「Googleマップ」、
用意されている中から好きなアイコンが表示させられる「アイコン」。
画像に見出しと説明文が付けられる「画像ボックス」、
アイコンに見出しと説明文が付けられる「アイコンボックス」。
3つ星や5つ星といったお店などの評価を表す星が表示できる「Star Rating」、
画像を横に複数枚並べてスライド表示させられる「画像カルーセル」。
登録した画像が一覧で表示できる「画像ギャラリー」、
アイコンと文章がセットになったものを縦に並べることができる「アイコンリスト」。
指定した数字が表示される「カウンター」、
作業の進捗状況などを表す横棒グラフみたいなバーが設置できる「プログレスバー」。
自分の作ったWebサイトに対するネットのコメントやレビューが掲載できる「推薦文」、
タブに説明文などのテキストが追加できる「タブ」。
Q&Aで質問文だけ表示させておき、質問文をクリックすると下に質問に対する回答が
表示されて、もう1度クリックすると回答を隠して質問文だけを表示させられる
「アコーディオン」「切り替え」。
TwitterなどSNSのアイコンを表示させてリンクも付けられる「ソーシャルアイコン」、
文字や背景の色を変えて文章を目立たせることができる「アラート」。
SoundCloudというサービスの音声が埋め込める「SoundCloud」、よく利用する一連の
処理をすぐに呼び出せる短いコードが埋め込める「ショートコード」。
HTMLを使ったプログラミングコードが埋め込める「HTML」、HTMLウィジェットを
使うことでElementorに無いウィジェットを自作して追加することができるのよ。
ページ内の特定位置にジャンプするためのアンカーリンクが設置できる
「メニューアンカー」、Webサイトのページにサイドバーを追加する「サイドバー」。
最初は前段部分の文章だけ表示させておき、続きを読むボタンをクリックすることで
全文が表示されるようにできる「Read More」といったウィジェットがあるわ。
ウィジェットの追加・削除は簡単にできるから、
よく分からないウィジェットはとりあえず追加してみて効果を確認してみてね。
ページの編集はこまめに保存
ウィジェットを追加・削除したり、テキストを書き込んだりしてElementorを使って
Webサイトページを編集するんだけど、編集中はこまめに保存しておいた方が良いわよ。
落雷などによる停電でパソコンの電源が落ちるかもしれないし、
間違ってWordPressを落としちゃうなんてこともあるかもしれない。
またパソコンに何かしらちょっとした不具合が発生してWordPressが固まって、
落とさざるをえないなんてことがあるかもしれないわ。
Elementorを使って保存せずに編集作業を続けてると、不可抗力によってパソコンや
WordPressが落ちると、それまでの編集作業が全て無駄になっちゃうの。
実際に私もWordでこういった記事を書いてる時に何らかの原因でWordが落ちて、
時間をかけて書いた文章が半分ぐらい消えたことがあったわね。
Wordは自動保存の機能があるからまだマシだけど、
Elementorの場合は自動保存の機能が無いから保存せずに編集作業を続けてると、
何か拍子にパソコンやWordPressが落ちた場合のリスクが大きすぎるわ。
だから、1個変更を加えるごとになんて極端なことは言わないけど、
できるだけこまめに保存しながら編集作業を行うのがおすすめよ。
作ったWebサイトページをインターネット上に公開する
Elementorで編集作業を行ってWebサイトページを作り上げたら、
それをインターネット上に公開するのよ。
Elementorを使うのはページの編集作業で終わり、
完成したページをインターネット上に公開するのはWordPressの方で行うの。
Webサイトページが完成したらElementorを閉じてWordPressの編集画面に戻り、
画面右上の「公開」の項目の中にある「プレビュー」を選択してみてね。
そうすると、Elementorで作ったWebサイトページを実際に公開した場合の
プレビューを見ることができるわ。
Elementorで実際の完成画面を見ながら編集作業したから大丈夫だとは思うけど、
プレビューで作ったWebサイトページに表示が変な箇所などが無いかを
一応チェックしましょう。
プレビューで問題が無いことを確認したら、「公開」の項目内にある「公開」ボタンを
クリックすれば作ったWebサイトページがインターネット上に公開されるわよ。
公開したら、Googleなどのブラウザに自分が作ったWebサイトのURLを入力して、
実際にアクセスできるかを確認してみてね。
他のプラグインを併用すればElementorだけで作れないページが作れる
Elementorの基礎的な使い方を紹介したけど、Elementorを使い慣れてきたら
他のプラグインと併用してElementorだけだと作れないページを作ってみると
良いんじゃないかしら。
Elementorはどちらかと言うとブログサイトを作るのに適してるプラグインで、
閲覧者から質問を受けたりするお問い合わせページを作ることはできないのよ。
また自分が作ったものをWebサイトで販売したり、それこそブログを有料で
配信したりなど、ページに決済機能を付けるのもElementorだけだと無理だわ。
お問い合わせページを作るんだったら、Elementorと「Contact Foam7」という
WordPress用のプラグインを併用すると良いわね。
ページに決済機能を付けるなら、Elementorで作った販売ページに、
WoocommerceやWelCartなんかを使って決済機能を付ければ良いの。
ElementorとContact Foam7を併用してお問い合わせページを作る
ElementorとContact Foam7を併用してお問い合わせページを作るには、
Elementorの「ショートコード」ウィジェットが大きな役割を果たすことになるのよ。
Contact Foam7の詳しい使い方は省略するけど、
Contact Foam7でお問い合わせフォームのショートコードを作成するの。
Contact Foam7でお問い合わせフォームを作ると、
フォーム一覧に作ったお問い合わせフォームのショートコードが表示されるわ。
作ったWebサイトページにElementorでセクションを追加して、そこにショートコードの
ウィジェットを組み込み、Contact Foam7で作ったお問い合わせフォームの
ショートコードをショートコードウィジェットに書き込めばOK。
それで上手くいかない場合は、お問い合わせフォームのショートコードの前後に
「」を付けるdo_shortcord関数を使ってみてね。
Webサイトに決済機能を付けるならセキュリティ対策は万全に
ElementorとWoocommerceやWelCartなんかを併用してWebサイトに決済機能を
付けるんだったら、Webサイトのセキュリティ対策は万全にしなきゃダメよ。
決済機能を付けてなくても、Elementorで作ったWebサイトをインターネット上に
公開するなら万全のセキュリティ対策を施した方が良いわね。
何と言っても通信内容が暗号化されて、万が一第三者に通信内容を見られても情報が
抜き取られる心配が無い「SSL対応」は決済機能が付いたWebサイトでは必須だわ。
ただ自分で作ったWebサイトをSSL設定するのって結構難しいから、
販売サイトを作るんだったら専門家にお願いしてSSL設定してもらうのがおすすめよ。
またサーバーをレンタルしてる会社の中には、オプションでWebサイトのSSL設定を
してくれるところがあるから、そういうオプションがある会社でサーバーを
レンタルするのも1つの方法ね。
まとめ
WordPressのページビルダー系プラグインであるElementorの使い方について、
詳しく紹介したわ。
基本的にはセクションを追加して、ウィジェットをドラッグ&ドロップで
組み込んでいくだけの簡単な作業でWebサイトが作れちゃうのね。
これまでWebサイト制作はプログラマー以外にはハードルが高かったけど、
WordPressでElementorを使えばプログラマーでなくてもWebサイトが作れるわ。
だから「こんなサイトを作ってみたい」という希望を持ってるなら、ぜひWordPressと
Elementorを使って思い通りのWebサイト制作にチャレンジしてみてね。
