【ホームページ革命!】
時代は WordPress × Elementor!
【知識ゼロからのエレメンター講座】
この記事は、動画の音声を書き起こしたものです。
さぁ、今回からホームページが欲しいとお考えの、知識ゼロの方から、ちょっとは分かってるって方まで、全ての方を対象に、丁寧に説明していきたいと思います。
時代は、ワードプレス×エレメンターです。
誰でもホームページが作れちゃいます。
そして、今回から実践編です。
実践編の第1回です。
今回の動画では、エレメンターの基礎的なレクチャーの前に、エレメンターがどれだけ凄いのかってとこを体感していただこうと思います。
これを見れば、とにかくモチベーション上がります。
エレメンターどれだけ自由なんだよと、感じていただけたら嬉しいです。
前回のイントロダクション動画で、事前に用意していただきたい3つの前提作業をお願いしました。
もう一度繰り返すと、
① レンタルサーバーを契約する
② 独自ドメインを取得する
③ ワードプレスを設置する
ということで、ワードプレスの設置まで完了されている方を想定していますけれども、この動画を見てその気になってこれから3条件を用意しようかなという方ももちろん大丈夫です。
これからワードプレス設置まで考えている方におおまかな費用面の目安をご紹介すると、レンタルサーバーは月額、数百円から1000円位のもので充分です。
ポイントは独自ドメインが使用できるか、MySQLの数やギガ数、何よりワードプレスを導入できるかなどありますが、それは調べればネット上にたくさんの情報があるので、ここでは割愛します。
検索してみてください。
独自ドメインについては、.comや.jpなど年間費用が初年度なら、数百円から1000円前後で取得できます。
そしてワードプレスの設置については無料ですから、契約したレンタルサーバーの説明に従って導入してみてください。
そらでは、エレメンターがどれほど優れているのかを体感していただきましょう。
ということで今回は覚えていただく事はありません。
ただご覧になって、エレメンターの簡単さや、自由さを感じてください。
それでは、ワードプレスの管理画面に移ります。
今回、用意したワードプレスはプラグインを何も入れていない、まっさらな状態のものになります。
早速、プラグインであるエレメンターの導入からやってみましょう。
左にあるメニュー欄の中から「プラグイン」にポインターをもっていき、
ポップアップメニューの中から、新規追加をクリックします。
こちらがプラグインの新規追加ページです。
プラグイン検索欄にカーソルをださいて「elementor」と入力してみてください。
語尾が「ter」ではなく、「tor」なので注意してください。
こちらがエレメンターのプラグインになります。
エレメンターウェブサイトビルダーとあります。
ちなみに隣の、エッセンシャルアドオンズフォーエレメンター、こちらはエレメンターを入れた後に、エレメンタターの機能を拡張するプラグインになります。
こちらはエレメンタター講座が進んだあとに、こちらのプラグインを導入して、エッセンシャルの機能を解説していきたいと思います。
ちょっと余談になりますが、これからワードプレスを使っていかれる皆さんは、使うほどに、プラグインをいくつも入れることになると思います。
玉石混合のプラグインの中から、信頼のおけるプラグインを見つける指標として、評価する星の数はみるのはもちろんですが、有効インストール数や最終更新日にも注目してください。
ワードプレスは頻繁にバージョンの更新が行われるので、優秀なプラグインだとしても、新しいバージョンに対応したプラグイン自身の更新が行われていなければ動作に不具合が発生する可能性があります。
最終更新日が最近であることが重要な指標となります。
これはプラグイン制作サイドが作ったきり放置せずに、アクティブであることを示しています。
それではエレメンターのインストールしていこうと思います。
インストールが完了すると、こちら「有効化」のボタンが表示されます。
プラグインをインストールした後は必ず、有効化する必要があります。
さあ、これでワードプレスにエレメンターが導入されました。
こちらのエレメンター動画や完全ガイドをご覧なられる方は、後ほどご覧になってください。
動画では、固定ページをさっそく作っていこうと思います。
ワードプレスの重要な概念として、投稿というものと、固定ページというものがありますけれども、
投稿は、ブログのようなものだと思って下さい。
固定ページは、ホームページやランディングページなど、デザインされた固定したページのことを呼んでいます。
それだは早速、こちらに進んでみます。
そして固定ページの新規追加をします。
別タブで開いてみます。
こちらが固定ページの新規追加ページです。
任意のタイトルを入れて下さい。今回は適当なタイトルを入れます。
そしてこちらページ属性のテンプレートというところに、デフォルトテンプレートとなっていますけれども、こちらのメニューから「Elementorキャンパス」を選択してください。
Elementorキャンパスを選択すると、ページが真っ白の状態から、キャンパスの状態から、ページをゼロからデザインしていきます。
そして「Elementorで編集」をクリックします。
これでエレメンターの編集画面に遷移していきます。
こちらがエレメンターの編集画面になります。
左に並んでいるのが、ウィジェットと呼ばれる、エレメンターの各種機能になります。
今回はエレメンターの簡単さや自由さ、凄さを体感していただくために、エレメンターが用意しているテンプレートを導入してみたいと思います。
こちらをクリックしますと、ライブラリに移ります。
こちらが各種テンプレートですが、「プロ」の表示のあるものは有料版エレメンターでしか入れることができません。
上のほうは表示がないので、こちらもテンプレートを使ってみたいと思います。
これを導入します。
初めてなので、テンプレートライブラリに接続する、の「始めよう」を押すと、
エレメンターのログイン画面に移ります。
まずはエレメンターのアカウントを作ることが必要になりますので、皆さん、任意にアカウントを取得してみてください。
さあ、アカウントをつくってログインが完了すると、先ほどのテンプレートが自動的に読み込まれます。
こちらはテンプレートが編集できる画面になっています。
エレメンターではこちらのセクション、青枠の大枠ですけれども、
セクションという大枠の中に、カラムという小さな枠があります。
カラムの枠のなかに、各種パーツのウィジェットを入れることができます。
こちらロゴのウィジェットが入っていますが、例えばこの下に画像を入れたいなと思えば、
画像のウィジェットをつまんで、ここで離してやります。
ドラッグ&ドロップで、ここに画像のウィジェットをもってくることができます。
これで画像を選択して、ここに好きな画像を入れることができます。
このタイトルのロゴをつまんだまま、こちらに移動すると、ロゴが移動します。
例えばウィジェットだけではなく、入れ物であるカラム。
このアイコンとロゴを逆にしたいなと思えば、つまんで、逆にしてあげます。
さらに大きな枠であるセクション、セクション自体も移動することができます。
このようにドラッグ&ドロップで自由に、非常に素早く、サイトを構築することができます。
有料のテーマと大きく違うところは、こちらのセクションを自由に消したり、追加したりすることができます。
こちらは削除のボタンですが、これで全て消えてしまいました。
これはアンドゥで、履歴のほうから戻すことができます。
先ほどのテンプレートを読み込んだところまで戻ります。
さあ、先ほどあったテンプレートをもう一枚、新しく新規追加で入れてみたいと思います。
別タブで開きます。
適当なタイトルを入れて、Elementorキャンパスを選択し、Elementorの編集画面に向かいます。
これで先ほどと同じ要領で、エレメンターが用意しているテンプレートのなかから、こちらを選択します。
先ほどのテンプレートと別のテンプレートになります。
いまエレメンターが読み込んでいます。
新しいテンプレートが入りました。
例えばこれを、このままのデザインでよければ、これを日本語に、ご自身の説明文やタイトルに直せば、このまま使えますけど。
例えばこのテンプレートの、このセクションだけは、かなり気に入ったなと。
実際はこっちのテンプレートを使いたいんだけれども、これだけ、セクションを追加したいなというときは、
こちらにカーソルをもってきて、コピーをしてください。
そして入れたい場所、自分の使いたいテンプレートの入れたい場所に、プラスボタンを押して、ここに貼りつけてあげます。
これで先ほどの、セクションだけがここに貼りつけられました。
ちょっと同じ色なので分かりづらいですけれども。
このようにテンプレートとテンプレートのセクション自体、パーツ自体を自由に組み合わせて、まったく独自の新しいテンプレートを作ることもできます。
これがエレメンターの自由さ、簡単さ、ですね。
いかがでしょう。
次回からはエレメンターの本当に基礎的な、実践編になります。
知識ゼロの人でも、詳しく説明していきますので、皆さんぜひ聞いて下さい。
それでは、また。