【Elementor講座 第６回】
誰でも出来ちゃう ホームページ作成
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
誰でも簡単にホームページがつくれちゃう、エレメンター講座の第６回です。
エレメンターとは、ワードプレスのプラグインで、初心者でも簡単にホームページを作ることができるツールです。
エレメンターを学ぶことで、ワードプレスをベースに、思い通りのWebページを作るスキルが身につきます。
今回は、前回用意したテンプレートパーツを組み合わせて作ったトップページの、各ウィジェットをいじっていきましょう。
それでは早速、ワードプレスの管理画面に移ります。
それでは固定ページにいく前に、こちらに更新①と出ています。
ワードプレスを使っているとプラグインやテーマなど更新をする必要があるときにこちらにメッセージが出ますけれども、更新①、こちらを更新してみましょう。
全てにチェックを入れて、プラグインを更新。
いまプラグインを更新して、いま完了しました。
そして固定ページを編集するまえにプラグインを一つ、作業を時短するために一つのプラグインを入れておきます。
新規追加、こちらにフォントと入れます。Fonts。
こちらで出てきたGoogleフォント、こちらのプラグインを入れてみます。
さあこれで有効化を押します。
これでGoogleのフォントが有効になりました。
ダッシュボードからサイトをカスタマイズ、こちらの先ほど入れたプラグイン、Googleフォントをクリックしてみます。
そして基本設定、ここで基本のフォントを入れます。
まず普通の文章のところですね、普通の文章、ゴシック。
タイトルに明朝。こちらは入力欄などのフォントです。
こちらもゴシック、これで公開を押しておきます。
これで作業、固定ページを編集するときに、先ほどの設定で文章をゴシック、タイトルに明朝がデフォルトで入ります。
それではこちら、固定ページです。
固定ページの前回作ったのが、こちらトップですね。
こちらを別タブで開きます、エレメンター編集を別タブで開いたみます。
前回作った、テンプレートの各パーツを組み合わせて作ったトップページです。
さあ、これで開きました。
今回はこちらヘッダー、そしてトップ画面、トップ画像、そしてこの下、こちらに営業時間や電話番号を入れて、ここまでやってみましょう。
それではこちらのヘッダー、こちらのカラムを見ると、一つ、二つ、カラムがツーカラムで構成されています。
こちらのウィジェット、こちら画像じゃなくて見出しですね、テキストになっています。
こちらの部分を、今回は「架空House」ということで、ハウスメーカーっぽいホームページに作ってみたいなと思います。
で、こちらのフォント、書体を選択して、こちらをデフォルトにします。
こちらを先ほど設定した、見出しを明朝にしたんですけれども、こちら明朝になっていません。
適用されていないので、こちら一応ここで保存して、先ほどのダッシュボードからサイトをカスタマイズ、こちらでまだフォントが適用されていないですね。
で先ほどのGoogleフォント、こちらの一番下のデバックを見てみましょう。
それでスタイルを強制しますか、ここにチェックを入れてください。
これで公開を押します。
さあこれでスタイルが強制されたはずです、先ほど保存したので、もう一度読み込んでみます。
フォントがなおっているか、なおっていないので、こちら新しい見出し、ウィジェットを入れてみます。
そしてこちらに「架空House」、これでこちらは適用されていますね、こちら明朝になっています。
それなので、こちらを消しちゃいます。
HTMLタグを１、そしてスタイル、フォントカラーを黒にします。
それでこらは一番左の設定になっていますね、真ん中、ここで変えられます。
それでここの真ん中に、こちらはSNSですけれども、真ん中にカラムを作って、ナビのメニューを入れたいと思います。
複製、これでスリーカラムになりました。
それでウィジェットを見ると、こちらのナビゲーションメニュー、こちらがカギマークがかかっています。
クリックすると、こちらプロじゃないと使えないですね。
私はしばらく、もう何年もプロしか使っていなかったので気がつきませんでしたけれども、これは無料版では使えません。
本来のワードプレスのメニューが使えないので、そこらへんも代用はできます。
さあこれで、テキストを入れてみました。
テキストでメニューの代用を作ってみたいと思います。
こちらに、TOP、PRISE、INFO、と書き込んでみます。
トップページに飛ぶリンク、そしてプライス、プライスのコーナーに飛ぶページ内リンク、そしてインフォ、お問い合わせページを作ったので、そのURL、そちらに飛ぶメニューを作ってみました。
そして配置を中央揃え、真ん中にします。
左、中央、これで変えられます。
そして、TOPの文字を選択して、リンクを投入。
そして「＃」を打って、リンクを適用。
これでTOPの文字をクリックすると、ページのトップに飛びます。
こちらの字が赤い色になっていますけれども、これはテーマのデフォルトカラーが適用されていますので、これは後で変えたいと思います。
こちらPRISE、こちらページの下のほうに、こちらですね。
ここに飛ぶように適用します、＃PRISE。
そして先にやっておきますけれども、アンカーを入れておきましょう。
メニューアンカー、ここに先ほど打った「PRISE」を入れます。
これでメニューのプライスをクリックすると、このアンカーまでページ内リンク、ページ内を飛ぶことになります。
さあこちらのテキストをさらに編集、INFO、こちらは後でページのURLを貼り付けます。
お問い合わせページのURLを、あとで貼り付けます。
そしてこちらを消しておきましょう。
それでは、こちらの赤いのが気になるので、こちらリンクカラーを変えてみたいと思います。
こちらの管理画面をクリックします、そしてサイトをカスタマイズ、こちらの「追加CSS」こちらをクリックしてください。
こちらスタイルシートですけれども、今回このように貼りつけてみます。
これは概要欄に、このまま貼っておきますので、コピペして貼り付けて下さい。
そしてカラーのほう、カラーコードの６桁、こちらはお好きなカラーコードを入れて下さい。
リンク、先ほどのリンクカラー、ビジテッド、こちらページに訪れている場合のページのカラーです。
そしてホバー、カーソルをのせた場合、マウスをのせた場合のカラー、そしてアクティブ、こちらのカラーです。
これで適用、公開します。
これで一度、保存して、もう一度読み込んでみます。
先ほどのリンクカラーが適用されているかどうか、さあこれで変わりました。
ここはお好きな色に変えてください、先ほどの６桁のカラーコードでお好きな色に変えてください。
それでテキストエディター、これでテキストの下に間が空いています、これが気になります。
テキストはデフォルトでこの下に間が空くので、テキストエディターの高度な設定、この中からマージン。
こちらをちょっといじってやります、こちらの全部同じになっちゃう、まとめてリンク、この魔法を解いて、下の数値をマイナス15、これで下の隙間がどんどん減っていきます。
ここの値を－15にしてやると、ちょうど真ん中にきますね。
マイナス15で、この下の隙間がなくなります。
そしてカラムの真ん中に配置されています、これでみんな揃った感じになりました。
この真ん中揃えを設定しているのはこのセクション、セクションの編集をみると、こちらの垂直方向に整列、カラムの位置、中央、こちらで中央設定されています。
こちらついでにセクション、大枠のセクション、こちらボックスとなっています。
コンテンツの幅、これはカラムの一番端からこちらの端までを、ボックスの980で設定されています。
これを全幅にしてやると、画面の幅いっぱいに広がります。
通常はこれをボックスにして、この値を980で狭ければもうちょっと大きく、これはページによってお好きにできます。
とりあえず980で作ってみます。
そしてこの文字の大きさ、テキストエディターに戻ります。
書体、これでオッケーだとしても、大きさ、こちらを20、太さ、600だと太すぎれば500、こんな感じで揃えてみます。
そうするとこちらもちょっと大きいので、こんな感じですかね。
そしてこちらをそろえます。
ソーシャルアイコン、こちらのカラーを統一します。
こちらのスタイル、メインカラー、サブカラーとあります、こちらいま公式カラーになっているようです。
こちらカスタムで、このメインカラーというのが、この周りの枠ですね、例えば赤、こんな感じで。
そしてこのサブカラーが中の、マークの色になります。
こちらは白で、こちらはいま丸になっていますけれでも、ソーシャルアイコン編集のコンテンツ、こちらの形状、ここで正方形にできます。
そしてマウスオーバーしても動きがありませんけれども、この動きをつけるのにスタイル、そしてアイコンマウスオーバー、ここですね、ホバー時のアニメーション。
ここに、いろいろなアニメーションの中から、フロートを選んでみます。
上にいく感じです。
ホバーした時に、このメインカラー、先ほどの色をコピーして、こちらに貼りつけてやります。
これでホバーした時に、これは同じ色ですけれども、コピペした同じ色です、やや薄くしてやると、濃くするとこんな感じですね。
これは好みで、ちょっとした変化をつけてやって、ほど良いところで決めてやってください、こんな感じです。
さあそしてこの下、トップ画像です。
こちらのセクション、このスタイル、ここで画像が設定されています。
これで画像を変えてもいいんですけれども、一枚ではなくてこちら、動画も載せられます、そして一番右がスライドショーです。
こちらで何枚かの画像を選択してみます。
メディアライブラリの中に使う画像を何枚か入れてあるので、もう一枚、ファイルをアップロードしてみます。
パソコン内のある画像を選択して、ファイルをアップロード。
これで使う画像を一枚、適当なものを、いま画像を三枚選んでみました。
これでギャラリーを作成、そして投入します。
これで見ていくと、スライドショーで移りかわっていきます。
こちらフェードになっていますね、この移り変わりの速度、ちょっと速いなと思ったらこちら、1500くらいにしてやります。
こんな感じで、ゆったり動いていきます。
そしてこの間も使った、ケンバーンズエフェクト。こちらアップしながら移りかわっていきます。
そしてこちらセクションの、レイアウト。
こちらでいま最小の高さが設定されていますね、こちらでお好きな高さに変えられます。
そしてこちら一番下のものは初めから付いてしまっているものですけれども、これはどこで設定されているかというと、こちらのスタイルからシェイプ区切り、こちらの上、下ということで、こちらで設定されています。
いまタイプが矢印となっています。
例えば山にすると、こんな感じで下が変わります。
いろんな形状が用意されています、これはちょっとページにアクセントをつけたいときに使えますけれども、今回はこれを無しにして、シンプルにしてみました。
さあこれで、あとは一番下ですね。
下のこちら、こちらを設定していきます。
こちらに営業時間と電話番号を書こうと思いますけれども、見出しよりもテキストエディターのほうがいいかなと思うので、テキストエディターを入れてみます。
そして中央揃え、この下は消しちゃいましょう。
そしてテキスト、コンテンツにウィークディ、電話番号を貼り付けてみました。
それでこちらのテキストカラーなんかをいじる前に、セクションで、背景画像、背景の色、こちらで設定されていますね。
セクションのスタイル、こちらを「C」６個、これで決めてみます。
そしてレイアウト、レイアウト、高度な設定、これですね、この幅があるのは、こちらで設定されています。
これを消してやると、こんな感じになります。
幅が無いのでこちらの、高さ、最小の高さ、これでだいたい決めて、文字の大きさ、またテキストエディターに戻って、こちら色の感じはこれでいいかな、そして文字の大きさ、そして太さを決めて、こんな感じですかね、とりあえず。
こんな感じで整いました。
こちらの色は、また後でも変更できます。
とりあえず今回は、これで完了としておきます。
完了して作業を終了するときは、下書きを保存しておいてください。
はい、これで次回からは、下のウィジェットをいじっていきたいと思います。
それでは今回は以上になります、有難うございました。
