【エレメンター講座 第5回】爆速!30分で作るハイクオリティなオリジナルホームページ【ワードプレス初心者】

【エレメンター講座 第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日で完成するでしょう。


大切なホームページの文章などは、ゆっくり練って、数日かけてもいいと思います。


このエレメンター講座で目標とするところは、何かホームページの変更をしたいと思ったら、すぐに変更ができるスキルを目指しています。


そしてそのスキル獲得は、難しくありません。


簡単です。


エレメンターの直感性をぜひ、この講座で体感してください。


それでは今回の動画は以上になります、有難うございました。

 

変わってゆく社会に、足りないものを思いついたら、まずは作ってみる。
Webサイト制作やランディングページ制作。動画制作、ドローン空撮などなど。未来に関することの全般がお仕事です。

「 IT×行政書士 」をキャッチフレーズに、地方自治体の地域活性化を ITの面からサポート応援していきます。
退職代行サービスや古物商許可申請の代行を、全国対応しています。

FLISCO jam Design
テキストのコピーはできません。