初心者でもワードプレスのelementorプラグインで超簡単にサイトを作る方法

スポンサーリンク
ワードプレス
この記事は約10分で読めます。
elementorHP参照

この記事は未経験者・初心者でもHTMLやCSSなどが分からなくてもサイトを制作出来る方法をご紹介しています。
筆者も実際にこの作り方で10を超えるクライアントのサイト制作を行ってきました。これを覚えれば明日からサイトを量産できますし、社内・社外の人からの評価を得る事が出来ると思います。

【こんな人に向けた記事です。】
・サイト制作初心者・未経験者でこれからサイトを作りたい人
・HTML・CSSが今いちわからない人
・今すぐにサイトを制作して運用したい人
・プロ並みのデザインでサイトを作りたい人
・お金をかけないでサイトを作りたい人

スポンサーリンク

サイト制作に必要なプラグイン

この記事では既にワードプレスをインストールしてサイト構築の環境が整っている事を前提に進めていきたいと思います。

・elementor(無料) 

このelementorというプラグインは無料でも使えますが、有料にするとより機能が追加されて利用する事が可能です。今回は無料verでご説明します。この段階ではまずはelementorというプラグインを使えば簡単にサイト制作が出来るページビルダー!!と思っていて下さい。
ページビルダーとは、ドラッグ&ドロップで直感的にページレイアウトを作成出来たり、色々なウイジェット(昨日)を組み込むことでプロフェッショナルな見た目・機能を持つサイトを制作できる仕組みです。

主な機能

  • 有効化するとelementor独自のエディターが実装される
  • ドラック&ドロップなど直感的に操作でき、HTML、CSSが使えなくても独自のサイトを制作する機能が存在する
  • WordPressに適用しているテーマのデザインにかかわらず、自由にページレイアウトを変更できる

elementorのインストール

elementorのプラグインダウンロード操作方法

elementorを使うと爆速でサイトが作れる

elementorのテンプレート使用例

少し番外編になりますがelementorを使うとどんな事が可能なのか?elementorの凄さの1つをまずはご覧頂きたいと思います。爆速のサイト制作方法です。
elementorには豊富なテンプレートが用意されています。
無料で使えるテンプレートも多数存在し、ボタン2.3クリックでテンプレートが読み込まれてサイトが出来上がります。
後は任意で画像やテキストなどの内容を変更していけば1ページのサイトの完成です!!めちゃくちゃ早いですよね。
※初回テンプレートを読み込む際はユーザー登録を行わなければ行けませんが、簡単に終わりますので登録して先に進むことをおススメ致します。

テンプレートを使用したサイト構築を説明しましたが、自分でレイアウトを決めてサイトを作っていきたいという人は後々ご説明致します。

elementorの機能一覧

まずはサイト制作をする際に便利なelementorの機能を一覧で見てみましょう。
どういう機能が使えるのかで、自分が作りたいサイトに必要な機能があるだろうか?など確認する事が可能です。動画・画像付きで説明しています。

elementorの機能一覧

【ベーシック】
・Inner Section

Inner Sectionのイメージ

・見出し
h1~h6の見出しが設定可能です。

・画像
画像が挿入可能です。 ただし画像のサイズの大きさによってはワードプレス自体にアップロードできない可能性もございます。

・テキストエディター
通常はテキストを追加するときはこの機能を使います。コードエディターにも対応しているので、html.cssをいじれる人は便利です。

・動画
動画を挿入できます。ただし動画のサイズの大きさによってはワードプレス自体にアップロードできない可能性もございます。

・ボタン
詳細はこちら!などのボタンをドラック・ドロップで作れます。
またアイコンも任意のアイコンに変更可能です。
デザインも簡単に変更する事が出来ます。

ボタンの作成方法

・区切り線
コンテンツの区切りをつけたい時などに使用します。

・スペーサー
任意の広さのスペースを入れる事が出来ます。

・Googleマップ
住所を入力するだけでGoogleマップを埋め込むことが出来ます。
高さやズームなども任意で変更が可能です。サイトの必須コンテンツともいえるのでとても便利ですね!

・アイコン
Font Awesomeというアイコンが無料で利用可能なWebアイコンフォントを利用する事が出来ます。とても種類が豊富なのでワンランクアップしたデザインを作りたい時は便利ですね。

【一般】
・画像ボックス
画像と見出しと説明文がワンセットになっています。


・アイコンボックス
アイコンボックスも画像ボックスと同様の機能を持っています。

・Star Rating
0-10までの☆の数を設定する事が出来ます。レビューなどを載せる時などはとても便利です。小数点第一まで設定が可能なので、例えば4.7などの設定もする事が出来ます。

・画像カルーセル
画像のスライドショーが作成可能です。自動でスライドさせたり、スライドの時間を設定したり、一度に表示される枚数を設定したりと柔軟な対応が可能です。画像のサイズを合わせないと下記のように見栄えが悪くなるのでご注意ください!

・Basic Gallery
画像のギャラリーを作る事が可能です。クリックするとライトボックス(画像が浮き上がる)のように見る事が出来ます。画像の大きさや、画像間の幅も設定できます。

・アイコンリスト
アイコンを自由に変更してリストを作成する事が出来ます。また、リストにはリンクも設定できます。リスト同士の幅の広さやアイコンの色など柔軟にカスタマイズ可能です。

・カウンター
設定した最小値から最大値の値まで順に数字が増えていきます。
例えば現在のお申込数が100だった場合、0-100と設定すれば、数字がカウントされていき100で止まります。

・プログレスバー
100の内指定した数まで棒が伸びます。

・お客様の声
コメントと画像・名前などの設定が可能です。画像が必要なければ削除も出来ます。

・タブ
それぞれのタブをクリックすると内容も切り替わります。サイト制作において非常によく使う機能です。

・アコーディオン
こちらもタブと同じようにサイト制作で非常によく使う機能となっています。
一番上のコンテンツは予め開いており、下のコンテンツはクリックすると開かれるような仕組みとなっています。

・切り替え
アコーディオンと似た機能となりますが、コンテンツははじめ閉じており、見出しをクリックすると中身を確認する事が出来ます。Q&Aなどのコンテンツを作る時に便利ですね。

・ソーシャルアイコン
ソーシャルメディアのアイコンを設置できます。アイコンは下記の一覧から選ぶことが可能です。リンクも設定できるので、必須アイテムとなります。

・アラート
ユーザーは右上の×ボタンでテキストを削除する事が出来ます。何か確認したい事や注意事項などある場合に利用します。

・Sound Cloud
SoundCloudという音楽配信サービスの音楽を埋め込むことができます。

・ショートコード
プラグインなどで生成されるショートコードを埋め込むことで、
機能が追加されます。

・HTML
HTMLで何か編集したい場合はこの機能を利用します。

・メニューアンカー
参考記事がありますのでこちらからご確認下さい!

Elementorメニューアンカー 【完全マニュアル】 | Elementor Fan
Elementorメニューアンカー 完全マニュアル!意外と知らなかった?!細かい設定方法と応用技。長めのサイトにぴったりなウェジェットを使いこなそう。リンクで表示する再の場所の決め方や他のページから指定の場所にリンクさせる方法までメニューアンカーを徹底解説!

・サイドバー
ワードプレスのウィジェット機能からもサイドバーは作れますが、elementorでもサイドバーを作って設定する事が可能です。

・Read More
投稿記事に”続きを読む”のウィジェットを追加可能です。

自分でレイアウトを組んでサイトを制作する流れ(ここから本番)

まずは固定ページの設定を行う

固定ページを新規作成しましょう。下記の画像のようにタイトルとテンプレートの設定を行います。
テンプレートはワードプレスで使用しているテーマによって変わってきますが、
主に3つ種類があります。
テンプレートは固定ページの編集画面の右側、ページ属性→テンプレートから変更できます。

デフォルトテンプレート
(ヘッダー、タイトル、サイドバー、フッターがある基本的な固定ページ)

elementor キャンバス
(ヘッダー、タイトル、サイドバー、フッター無しのランディングページ向け)

elementor 全幅
(デフォルトテンプレートのサイドバー無しバージョン)

elementorキャンバスのレイアウトにデフォルトのヘッダー・フッターが付いている。

ここまでで、作りたいページのベースとなるレイアウトを設定できましたでしょうか?ちなみに筆者はelementor全幅がサイト制作の時に一番使います。

セクションとカラムの概念

実際にelementorを使う際に必要な概念としてセクションとカラムがあります。下記の画像をご覧ください。基本的にはこのセクションとカラムを組み合わせてサイトを制作していきます。

セクションは横に繋がっている1つのブロックで、カラムはセクションの中に入っている箱のようなイメージです。下記の場合カラムは3カラムとなります。
このようにセクションを作って、カラムを配置しレイアウトを作っていきます。
セクションとカラムの作り方は下記の動画を参考にしてみて下さい。

セクションとカラムの作り方

セクションやカラムは増やす・減らす、複製する、削除する事も可能です。
セクションを複製すると、セクション内にあるカラムやカラムの中にあるコンテンツも全て複製されます。
セクションを削除するとセクション内のカラムやコンテンツ全てが削除されます。
カラムをコピーするとセクション内のカラムが1つ複製されます。また、カラムを削除しても他のカラムは削除されません。
動画でセクションの複製や、カラムの複製、削除の操作を説明していますのでご確認下さい。

セクションやカラムの複製・削除

elementorのエディターを使ってページを構築する

それでは代表的な機能(ウィジェット)を使って簡易的なHPを作りたいと思います。

+ボタンを押してセクションを作ります。また、左のエレメントのウィジェットを右枠にドラックする事も可能です。

見出しを設置したら左のエレメント画面が見出し編集の画面に切り替わります。
上部タブはコンテンツ/スタイル/詳細の3つに分かれており、
コンテンツは見出しのテキストを変更したり、h1~h6の見出しに変更出来たり、テキストの配置を変更できます。
スタイルは見出しのフォントの色を変えたり、大きさを変えたりなど書式に関する部分を変更できます。詳細は要素(コンテンツ)毎の距離を変更したり、アニメーションを付けたりなど出来ます。

見出しタグの使いかた
アニメーションの設定方法

任意のコンテンツを追加していきます。コンテンツを追加する時はセクションとカラムを思い出して操作してみて下さい。
また、スタイルと詳細タブで様々なデザインを作る事が出来るのでまずはいじって機能を覚えてみて下さい。

ウィジェットの追加

PC・タブレット・モバイルでデザインを使い分けられる

elementorにはデバイスによってコンテンツの表示を変える事が出来ます。PCでは4カラムのコンテンツは見やすいですが、モバイルで見ると4カラムが縦に並んでしまう為縦長で見にくくなる傾向があります。そういう時に下記の動画のテクニックが使えるのでデバイスごとに表示形式を変えてみて下さい。
※尚ワードプレス自体が既にモバイル対応しているので、elementorでは、表示形式を変える事でより見やすいサイトを作る事が出来ます。

いかがでしたでしょうか?
未経験者・初心者でも簡単にプロ並みのサイト制作を行う為にはelementorのプラグインはマストツールです。
1時間程度機能を触る事で様々な事が直感的に理解できるような仕組みとなっているので初めての方にお勧めです。
プロ版はより多くの機能が使えるようになっていますので、またご紹介させて頂きます。

最後にサイト制作をする前に自分が作りたいデザインと似ているサイトを選んで参考にする事で、デザインを近づける事が出来ます。いきなりelementorを使い始めてもどのようなデザインにするのか決まっていないといろいろと悩んで時間がかかってしまいます。
それではサイト制作をお楽しみください!!

コメント

タイトルとURLをコピーしました