【 知識ゼロからのエレメンター講座 ④ 】
ワードプレスで高品質ホームページ制作
【 トップページ設定編 】
この記事は、動画の音声を書き起こしたものです。
私はWeb制作の会社を経営しています。
Web制作のプロが教える、初心者でもサクサクホームページが作れちゃう、知識ゼロからのエレメンター講座です。
エレメンター講座のシリーズ、４回目となります。
前回までの動画では、ワードプレスにプラグインであるエレメンターをインストールして導入し、エレメンターに最適なテーマをご紹介しました。
今回はいよいよ、Webページを作っていきましょう。
それでは管理画面に移ります。
まず動画をご覧いただいている方々で、独自ドメインを取得済みでワードプレスを導入されている方もいらっしゃるでしょう。
これまでの動画でも、レンタルサーバーを契約して独自ドメインを取得し、ワードプレスを導入するようお勧めしました。
その状態の場合、貴方が取得したドメインにアクセスすると、どうなっているでしょうか。
左上にある「サイトを表示」をクリックしてみます。
別タブで開く場合には、「Ctrlキー」を押しながらクリックしてください。
さあ、どうでしょう。
これはちょっと、人に見せられない状態ですね。
何とかしないと、落ち着いてホームページを作っているどころではありません。
ということで、今回は「ただいまホームページを準備中です」などの告知ページを作って、トップページに設定するところまでやっていきましょう。
それでは管理画面にもう一度戻ります。
固定ページをクリックして、新規追加をしていきます。
タイトルには「DEMO」とでもいれて、エレメンターキャンパスを選択、エレメンター編集に向かいます。
さあ、こちらがエレメンターの編集画面になりました。
今回はこちらの、プラスボタンを押してみます。
これでいくつものブロックのパターンが表示されています。
構造を選択とあります。
これはカラムの数や、大きさなどを選択できます。
今回は見出しとテキストエディターえを一つづつ入れるだけなので、こちらの１カラムを選択します。
さあこれでセクション、青枠の大きな枠であるセクション、の中にカラムが一つだけ入っています。
カラムという入れ物が一つだけ入っています。
こちらのカラムの中にタイトルと、テキスト、テキストエディターを入れてみます。
こちらでセクション、セクションという入れ物の中に、カラム、カラムという入れ物の中に、見出しとテキストエディターというウィジェットが入りました。
それではこちらの大きな枠であるセクションの編集画面に移って、スタイルをクリックしてみましょう。
こちらの筆みたいな「クラシック」というところをクリックすると、画像が選択できます。
これで背景画像、セクションの背景画像を選択できます。
メディアライブラリィ。こちらワードプレスにすでに入っている画像ですけれども、こちらの画像の中から一つを選択して背景に設定します。
さあ、背景が設定されました。
これだとやや小さいので、マージン、パディングというものも学びましょう。
マージンというのは、例えばこちらを200ピクセル入れてみますけれども、セクションの上と下に、こちらで指定した200ピクセルの間が空いています。
マージンという考え方は、こちらの大枠であるセクション、このさらに外側を指定することができます。
そしてこちらのパディングというのは、こちらも200入れてみますが、
さあどうでしょう。大きな青枠であるセクションの中に隙間ができました。
パディングは、セクションの中の間を指定できると考えて下さい。
こちらのカラムとセクションの間を設定できます。
これでテキストと文字の部分がやや狭いなと感じれば、これは全部こちらの値をまとめて設定していますので、一か所入れれば全て同じ数値になります。
こちらの「まとめてリンク」こちらの魔法を解いてあげると、これで一つづつ選択できます。
左右はやや小さく100程度に設定して、上下は350程度に設定しておきます。
ただこれの背景画像どうでしょう。
これは途切れてしまっています。
これではちょっとかっこ悪いので、画像を一面に指定します。
こちらの「繰り返し」というところがデフォルトでは繰り返しになっているので、このように画像が途切れた時に画像を繰り返すようになっているのですけれども。
サイズで「カバー」を選択すると、全体に表示されるようになります。
さあそれでは見出しを書いていきましょう。
こちらに「エレメンター講座」と入力します。
HTMLタグは「H2」になってますけれども、Hの１を選択します。
H1からH6まで、これはタイトルの重要度を示しています。
一番重要なタイトルにはH1、Hワンを選択してみてください。
そしてこちらの文字色、こちらどうでしょう、今回は白に合わせてみます。
こちらがカラーコードですけれども、ハッシュのF、Fが六つ並びます。
これが白のカラーコードになります。
そして書体を設定します。
Googleフォントの「Noto Serif JP」、こちらは明朝体になります。
こちらは好みなんですけれども、私がお勧めするのはタイトルを明朝体、説明文をゴシックにすると、ビジネス的にけっこうカッチリとした感じのイメージに仕上がります。
そして大きさを指定します。
こちらが太さになります。
これを真ん中にもってきたなと思ったら、こちらで設定が変えられます。
さあこれ、どうでしょう。
文字が白シロで見づらいですね。
ここでセクションで、背景の画像に、オーバーレイをかけたいと思います。
こちらの黒い色に、いま透明度が、0.5です。
100％にすると真っ暗になってしまいます。
こちらで自分の程よい、ちょうどいいところで合わせてください。
画像もほどほどに見えて、白の文字がよく見えるところに合わせてください。
それではテキストを編集してみます。
用意したテキストを貼りつけてみました。
これで色を選択します。
そして書体。
GoogleフォントのNoto sans JP。
で、大きさを指定します。
太さもお好み見合わせて選択してみてください。
どうもここがくっ付いているなと思って、それを調整する場合は、こちらのマージンなどでも選択できますけれども、今回は簡単にスペーサー、これは空間を作ることができます。
スペースを空けることができます。
ここで高さを指定して、どうでしょう。
大体いいかなという感じに合わせてみます。
これでプレビューを見てみます。
こんな感じですね、どうでしょう。
ただ表示されるだけでつまらないな、と思ったら。
見出しの、高度な設定の中から、モーション効果。
こちらの開始アニメーション、開始アニメーションの、フェードインアップ。
どうでしょう、これで上に立ち上がってきます。
こちらのテキストの方も、高度な設定から、モーション効果。
で、アニメーションを、こちら、フェードイン。
同時にアニメーションが動くと、ちょっと面白くないですから、こちらを「ゆっくり」にして、ここを500。
これで動きを見てみます。
こんな感じですね。
んーテキストを真ん中揃えにしようかなと思えば、テキストの編集から、スタイル。
こちらで真ん中揃えにしてあげます。
プレビューを見ずに、こちらでも確認することができます。
動きを見るときは、プレビューで見てやります。
さあこちらのテキストの下に、例えばリンク先や、連絡先電話番号を、自分の電話番号をかけてほしいときなど、ボタンを設定してみましょう。
こちらのボタンウィジェットを、こちらに置きます。
こちらも真ん中揃え、「詳細ページはこちらかから」、そしてボタンの色ですね。
こちらで色を変えてあげます。
そして書体、Noto Sans JP。
大きさを選択してやります。
そしてボタンのURLである場合は、リンク先にこちらURLを入れます。
例えば電話をかけて欲しいとき、「tel:」の後に電話番号を打ち込みます。
これで電話のリンクが完成します。
通常はホームページのリンク先であれば、URLを入れます。
さあこれでトップページが、これでボタンにマウスオーバーしても動きがないなとか、この文字色はやっぱり白がいいなと思えば、再度、設定してあげます。
スタイルから文字色、白に設定して、リンク先も設定しておきます。
こちらのリンク先の「リンク設定」ボタンをクリックして、「新しいウインドウで開く」にチェックを入れると、こちらのボタンをクリックした際に、別タブで開くようになります。
それでこちらのマウスオーバーで色を付けたいなとか、動きをつけたいなと思えば、こちらの「マウスオーバー」。
通常とマウスオーバー、マウスオーバーの方で、背景を別の色に選択すると、マウスオーバーすると色が変わります。
色はそのまま、やや動きをつけたい場合、「ホバー時のアニメーション」、こちらで選択していきます。
色々なアニメーションが用意されています。
私がお気に入りなのは、こちらの「Float」ですね。
さあこれで設定してみます。
これで再度プレビュー。
どうでしょう、こんな感じです。
そしてさらに、こちらの背景ですね。
背景はスライダーを選択することも出来ます。
こちらのセクション、こちらの最初に選択した背景画像。
こちらは一枚の背景画像ですけれども、こちらで「スライドショー」、背景のスライドショーを設定することができます。
こちらをクリックすると、メディアライブラリの中から、適当に、さあこちらがスライドしていく画像になります。
ギャラリーを投入。
こらで、こちらがフェード、画像が自然に変わっていきますけれども、フェードイン、フェードアウトのフェードです。
スライダー、これはまさにスライダーです。
レフト、ライト、アップ、ダウンもできます。
こんな感じの動きですね。
フェードに設定して、こちらのトランジション所要時間、こちらは移りかわる、フェードイン、フェードアウトしていく時の速度、やや速いなと思えば、1000プラスしてあげます。
どうでしょう、これでゆったり移りかわっていきます。
そしてこちらの「Ken Burns エフェクト」、こちらをオンにすると、画像がアップしてくるのが分かります。
こちらの向きで、こちら人によって表示が違う可能性があります。
インとアウトになってる可能性があります。
こちらの「外」にすると、画像が引いていきます。
さあこれで、プレビューを見ていきます。
さあ、どうでしょう。
とりあえず、皆さんがホームページを作っている間、誰かがホームページを訪れたとき、こちらが告知画面として閲覧者に表示されることになります。
それではこちらのトップページを、これはまだ公開されていませんので、こちらで公開します。
さあ、これで公開されました。
管理画面に戻って、これで設定、のポップアップから「表示設定」を選択。
こちらがトップページの設定になりますけれども、こちら「最新の投稿」がトップページに表示されるようになっています。
「固定ページ」をチェックして、公開されているページから、こちらちょっと動画で表示されませんけれども、公開されている固定ページの名前が表示されています。
この中から「Demo」を選択、これで設定を保存します。
さあ保存されました、これでサイトを表示してみます。
さあ、どうでしょう。
これでドメインにアクセスしてきた閲覧者は、トップページ、こちらを見ることになります。
これが表示されることによって、安心して、時間をかけて、ホームページ作りに専念することができます。
こちらの、先ほどのボタンですね、こちらのボタンが機能しているか、クリックすると、さあもう一度こちらのドメインにアクセスしてきました。
このようにトップページが設定されました。
次回からは、ホームページを作っていきます。
それではまたご覧ください、それではまた。
