【エレメンター講座 第5回】
爆速!30分で作る
ハイクオリティなオリジナルホームページ
【ワードプレス初心者】
この記事は、動画の音声を書き起こしたものです。
Web制作のプロが教える、誰でも簡単に、高品質のホームページが作れちゃう。
ワードプレスをベースとした、エレメンター講座の第5回目です。
これまでの講座では、エレメンターについての説明、プラグインやエレメンターに最適なテーマの導入方法、ホームページが完成するまでのトップページの作成から公開のし方まで解説してきました。
まだご覧になっていない方は、このチャンネルの再生リストにまとめていますので、初めからご覧になってください。
それでは、第5回目のエレメンター講座のタイトル「爆速!30分で作るハイクオリティなオリジナルホームページ」です。
この動画を観れば作ることのできるオリジナル高品質ホームページが、こちらです。
さあ、この動画をご覧いただくと、このトップページと、こちらのインフォメーションページが作れます。
今回作るのは、ホームページの枠組みです。
それぞれの、セクションの編集方法は、次回からの動画で詳細解説していきます。
今回は、この2ページを作るのに、30分から1時間くらいで作っていきましょう。
さあ、どうでしたか。
まだ作っていないホームページを動画編集ではめ込んでみましたが、ご覧いただいたホームページができるよう、アドリブでサクサク作っていきましょう。
まずは、ワードプレスの管理画面に移ります。
そして固定ページをクリックしてください。
このDEMOというのが、前回の動画で作った、ホームページが出来るまでの「現在、制作中」であることを告知するページです。
そしてこの下書きとなっているページは、エレメンターが公開しているテンプレートを読み込んだものです。
事前に下書きとして、8ページ作っておきたさました。
今回はこのテンプレートの各ページの、良さそうなウィジェットを組み合わせて、どこにもないオリジナルページをつくります。
初心者の方はゼロからページを作るとなってもイメージしづらいので、選んだウィジェットを自分好みにいじって覚えるのが、楽しみながら早くエレメンターをマスターするコツです。
それではもう1ページ、テンプレートを読み込んでみましょう。
新規追加を別タブでクリックします。
別タブで開く場合には、右クリックで開いてもいいてすけれども、コントロールキーを押しながらリンクをクリックすると別タブで開きます。
マックはコマンドキーですね。
そしてタイトルに適当なタイトルを入れて、ページ属性、テンプレートにエレメンターキャンパスを選択します。
そしてエレメンター編集をクリック。
これでエレメンターの編集画面に遷移していきます。
エレメンター編集画面になりました。
それではこちらの、テンプレートの追加をクリックします。
こちら、以前の動画でもテンプレートを挿入しましたけれども、このプロと表示のあるもの、これはエレメンタープロ、有料のプラグインでしか挿入できない仕様になっています。
プロの表示のないもの、プロの表示のないものは、無料版のエレメンターで挿入することができます。
こちらをクリックしてみます。
さあ、こんなテンプレートですね。
こちらを挿入します。
いまテンプレートを読み込んでいます。
さあ、これで読み込みが完了しました。
こういったテンプレートの大きな枠であるセクション、青枠のセクション、このセクション、セクションごとの気に入ったもの、一つひとつを組み合わせて、ひとつのオリジナルのホームページを作ってみましょう。
それでは事前に読み込んでいたテンプレート、こちらを別タブで開いていきます。
こちらが事前に用意しておいたテンプレートのページです。
こちらの、各ページの気に入った、大きな枠であるセクション、セクションごとに気に入ったパーツがあれば、それをコピペして、組み合わせて、全く新しいページを作っていきます。
こんな感じですね、各ページのテンプレートがそろっています。
これは全部、無料のテンプレートです。
さっきの中を探すと、無料のテンプレート結構あります。
それでは本当に作るページ、こちらで新規追加します。
TOPページのタイトルを入れて、テンプレートにエレメンターキャンパスを選択。
エレメンター編集画面に向かいます。
こちらの「ウィジェットをここにドラッグ」、こちらに各ページの気に入ったウィジェットを貼りつけていきましょう。
それでは、各ページを見ていきます。
気に入ったものが無ければ、次にいきます。
さあ、どうでしょう。
それぞれ気に入ったもの、こちらのプライスカードは貼り付けていこうかなと思います。
右クリックでコピー、そしてこちらに貼りつけ。
CtrlのVでも、貼りつきます。
同じものが二つ貼りついたので、一つ消しておきます。
さあ、こちら。
これちょっとヘッダーっぽいので、一番上に使いましょう。
こちらが実際に作るページの、エレメンター編集画面ですけれども、上にないとき、こちらのプラスボタンを押します。
ここにドラッグするところが出てきます。
こちらに貼りつけてください。
さあヘッダーなので、一番上に置いておきます。
こちらの下のもの、これもトップ画像として使います。
さあこれは、こちら下に変な線、これはさっきの繋がりを作っているわけですけれども、これは後で編集していきます。
さあ、次のテンプレートを見ていきます。
これはちょっと、ここが最後のフッターっぽく使えそうなので、これも貼り付けていきましょう。
これは一番下のフッターです。
フッターで使ってみます。
こんな感じですね、で次のテンプレート。
これも使ってみましょう。
写真、写真がちょっとずれていっているような、演出になっています。
こちらも貼りつけていきます。
プラスボタンで、入れたい場所に貼りつけていきます。
さあ、次のテンプレート。
これをちょっと、トップ画像の下に。
さあ、こんな感じで。
全体的な色の統一感や、その他、テキストなどの統一などは後で全部合わせます。
とりあえず、好みのセクションを貼りつけていきます。
好みのものがあったら、どんどん貼り付けて、後で削除すればいいので、こちらも貼りつけていきましょう。
こちらこの中にプラスが無いもの、この青枠は大きいいセクションですけれども、こちらはセクションと同じプラスがありません。
こちらはセクションの中に入れる小さな入れ物、インナーセクションと呼んでいますけれども、内部セクションと書いてあります。
こちらインナーセクションは、セクションの内部に入れるセクション。
セクションがONEカラム、一つのセクションで出来上がっていたとしても、こちらのインナーセクションを入れることによって、ツーカラム、スリーカラムのパーツを作ることができます。
これはセクションをコピーすることによって、インナーセクション全体もコピーすることができます。
こちらを、じゃあどこに入れるか。
プライスの下に入れてみます。
このマップも入れておきましょう。
このマップは、また2ページ目の「お問い合わせフォーム」と一緒に使いましょう。
これは今回、入れないでおきます。
さあ、こちらのアワーサービス。
これも仕事の紹介で、入れておきます。
さあ、こんなところでいいですかね。
こんなところで、出来たんじゃないかと思います。
上から見ていってみましょう。
さあ、こちらがヘッダー。
トップ画像。
そしてこんな感じで、プライスの説明、こちらがスライダーになっています。
こちらがアワーサービス、これは別に何でも使えます。
そしてフッター、会社情報、お店情報などです。
こちらは最後に、もっと小さいものに作りかえます、色も変えます。
さあ、これで一旦、お好みのセクションを入れることが出来ました。
これで一旦、下書きとして保存しておきましょう。
それでは次に、お問い合わせページを作ります。
新規追加をクリック。
タイトルを入れて、ページ属性のテンプレートに「エレメンターキャンパス」を選択して、エレメンター編集画面に向かいます。
さあ、こちらで先ほどのマップをコピペ、します。
さあ、こちらの上に、ウィジェットから「お問い合わせフォーム」を選びたいところなんですけれでも、こちらのフォーム、お問い合わせフォーム、鍵のマークがあります。
こちらエレメンターのプロ、有料版じゃないと使えない仕様になっています。
無料版で「お問い合わせフォーム」を実現するのであれば「コンタクトフォーム7」などの色々なプラグインがありますけれども、そちらで実現できますが、今回はそちらの説明は省くので、こちらのテンプレートから、ブロック、そしてコンタクト。
こちらで、インフォメーションの各ブロックがでてきます。
こちらの中から、無料版で使えるものを選びます。
さあ、こちらを挿入してみましょう。
これで、こっちの下のほうはいらないですね。
こちらを消して、こちらもう一つブロックで、FAQも入れておきます。
よくある質問、FAQです。
こちら、このシンプルなやつを挿入します。
さあこれでFAQ、お問い合わせや、よくある質問が挿入されました。
こちらの上のヘッダーやフッターは、最初のトップページですね。
こちらをちゃんと全部、色を合わせたり、画像や文字を作ってから、再度こちらに貼りつけます。
それなのでこちら一旦、下書きで保存して、完了しておきます。
さあこれで、トップページとインフォメーションページの2ページの枠組みができました。
見てみましょう。
こんな感じです。
これで、プレビューで見ることができます。
こんな感じで、枠組みだけ作ることができました。
ここまでで、ゆっくりお気に入りのセクションを選びながら、30分から1時間で作ることができます。
次回の動画では、各セクションの編集方法について詳細に触れていきます。
それらの動画をご覧になりながら、ホームページに貼る画像や文章がある程度決まっていれば、半日から1日で完成するでしょう。
大切なホームページの文章などは、ゆっくり練って、数日かけてもいいと思います。
このエレメンター講座で目標とするところは、何かホームページの変更をしたいと思ったら、すぐに変更ができるスキルを目指しています。
そしてそのスキル獲得は、難しくありません。
簡単です。
エレメンターの直感性をぜひ、この講座で体感してください。
それでは今回の動画は以上になります、有難うございました。