【Elementor講座 第13回】
最終回！お問い合わせページの編集
【WordPress】
この記事は、動画の音声を書き起こしたものです。
エレメンター講座の第13回となります。
今回は、前回のトップページが完成しましたから、いよいよ２ページ目の「お問い合わせページ」、こちらのほうを完成していきたいと思います。
前回のトップページを作るの面倒くさいなという方、前回の動画の概要欄に、テンプレートとしてダウンロードしてご利用いただけるように、当社のホームページのリンクを貼ってありますので、前回の動画の概要欄をご覧ください。
今回のお問い合わせページも完成したらテンプレートにして、ダウンロードできるようにリンクを貼っておきますので、後ほど概要欄のほうをご覧ください。
さあ、それではまいりましょう。
さあ、こちらが以前にテンプレートから貼り付けておいたマップと、こちらが会社等の説明ですね、そして下にFAQ、よくある質問のコーナーです。
こちらを編集して作り上げたあとに、上に以前作ったヘッダーをつけて、下にフッターもつけて、ページとして完成していきます。
まずはこちらのマップのウィジェットをクリック、そうすると地図、所在地、Googleマップの編集が開きます。
こちらに、あなたの会社の、あるいは個人事業の住所を入力してください。
そしてこちらズームになっています。これで拡大、縮小ができます。そして、この高さ。これをいじると、こちらのウィジェットの高さも変えられます。
それでは次はこちら、タイトル。このウィジェットがタイトルです。この下がどうなっているかというと、このカラムの中に、小さなセクション、インナーセクションが入っています。
セクションの中に、カラムが２つ、ツーカラムの構造になっています。こちらのほうもインナーセクション、インナーセクションが２つ入っています。そういう構造になっています。
こちらのほうは今回はシンプルにするために、これをクリックすると見出しですね、こちらは何のウィジェットかなとクリックすると、テキストエディタ。普通のテキストを書き込むところになっています。
今回はタイトルと、大きな見出しとテキストだけにしようと思うので、こちらのカラムを消しちゃいましょう。
そうすると、こちらワンカラムになります。こちらも、これがSNSなどのソーシャルアイコンのウィジェットになります。こちらを使われる方はこれを編集して、今回はこちらの方を消してしまいます。そして両方ワンカラムのシンプルなものになりました。
さあこれで、あとはこちらのほう、ちょっと貼り付けちゃいます。
さあこれで、タイトルとテキストエディタの貼り付けが終わりました。
それではこちらのタイトルをクリックしてスタイル、そして書体、こちらのフォント等を整えていきましょう。
こちらは明朝ですから「Noto Serif JP」、そして大きさ、太さが900、そして大きさを調整します。
そしてこちらの下の方も同じ、見出し、スタイルから書体、こちらは「Noto Sans JP 」、そして大きさ。
こちらの方もテキストエディタ、スタイル、そして書体、こちらもゴシックにします。色がやや薄すぎるかなというので、こちら色、ちょうどいいいところに合わせてください。そして書体の大きさ、そして太さ、こちらの方を揃えていきます。残りも揃えちゃいます。
さあこれでタイトルとテキストエディタのフォントと太さ大きさを揃え終わりました。
それではこちらの、お問合せの方の電話番号とメールアドレス、こちらのリンクを作っていきましょう。
まずは電話番号のテキストエディタをクリック、そしてこの電話番号の部分を左クリックで選択してやります。そしてこの上のこちら、これがリンクの挿入、こちらをクリックすると、この入力欄がでてきます。こちらに「tel:」、この後ろにご自身の会社や個人事業の電話番号を入力します。電話番号にハイフンはいりません。番号の続きで入れてください。いまハイフンが入っていたので削除しました。そしてこの適用をクリックでリンクが完了です。
これでリンクになっています。こちら実際の、こちらをクリックすると、例えばスマホでもタップするだけで、スマホの方の電話のアプリケーションが起動されます。
そしてEメール、Eメールのほうも同じように、こちらを選択します。そしてリンク、こちらはEメールですから「mailto:」、そしてメールアドレスを記入してやります。そして適用、これでリンクが完成です。
プレビューを見てみます。リンクが張られているのが分かります。リンクをクリックすると、電話番号あるいはメーラーのアプリケーションが立ち上がります。
さあそれでは下の、こちらのほうの編集もしていきましょう。FAQです、よくある質問。こちらも見出し等を貼り付けちゃいます。さあこちらのタイトルを貼りつけられました。
それではこちらをクリックすると切り替えを編集ってなってますけれども、これが質問ですね。質問の、５つの質問と回答のメニューが並んでいます。
この一つをクリックすると、タイトル、そしてこちらに回答の部分がでてきます。こちらのほうをクリックすると、こんな感じです。このタイトル説明という部分が、ここ。ここに質問などを書き込みます。そしてここが回答部分、ここの部分が、ここになります。それではこちらも簡単に貼り付けちゃいます。
はいこれで貼り付けられました。それではこちらのスタイルをクリック。そしてこちらのタイトル、こちらでタイトルの書体を設定できます。タイトルのここの部分です、ここの書体です。「Noto Sans JP 」、そして大きさ、太さが900、太すぎるので、お好きなサイズにしてください。
そしてこちらの下の方、コンテンツ、ここがこちらの説明部分になります。コンテンツの書体、そして大きさ、太さを設定します。色がやや薄ければ、ちょうどいいところで調整してください。
こんな感じですね。
さあ、これで出来上がりです。
それではこちらの上のほう、ヘッダーとフッターを付けていきたいと思います。
こちらのヘッダーとフッターは、前回つくったトップページ、こちらにエレメンターの編集画面、トップページがあります。
こちらですね。こちらのこの部分、ヘッダー部分を右クリックでコピーしてあげてください。そして先ほど編集していたところ、この＋部分、ここをクリックすると上にでてきます。この部分に貼りつけてください。そうするとこのように、ヘッダーが貼り付けられました。
そして先ほどのトップページの一番下、このフッター部分も同じようにコピーして、先ほどのページの下の方に貼りつけてあげます。この下のセクションも同じように、ここで貼り付け。
さあ、もう一つ一番下にこのセクションがあります、こちらもコピーして貼り付け。
さあこれでフッターが完成です。ヘッダーとフッター。ただこの部分、ヘッダーが背景、白で、こちらも白。すごくなんか、しまりがないっていうか、区切りが分からないですよね。そしてこちらも白。そしてこのフッターの部分は分かりやすいですけれども。
ここらへんの区切りをつけるために、背景の色を変えてあげましょう。セクションのスタイル、そしてこちらです。色、これはもうお好みで、簡単にこんな感じでも区切り感がでます。もっと薄くてもいいですかね。さあ、どうでしょう。
これで、お問い合わせのページが完成、でもいいんですけれども、もう一つ、ここのヘッダーとマップの間に画像を入れてみようかなと思います。
こちらから、ワンカラムのセクション。そしてウィジェットのなかから画像を入れてあげます。この画像を入れるときに、まず始めに画像を選択してあげましょう。お好きな画像を選択して挿入。さあ、こんな感じで。
まずこちらの、こんな感じですね。ページのいちばん端から端まであったほうがいいなというのであれば、こちらのセクション、セクションのこちら、レイアウト、こちらがボックスになっているところを全幅にしてやります。
そして、こちらのカラム。まず画像のウィジェットを、フルに選択。フルに選択してあげても、こちらのカラムと画像のあいだに微妙に間が空きます。
ちょっとプレビューで見てみます。さあこんな感じで、全幅にしたんですけれども、こちらに間があります。この下にも間があります。
この間が嫌だなというのであれば、このカラムと画像ウィジェットの間の微妙な隙間を埋めるのには、カラムを選択。そして高度な設定。こちらのパディングの、まとめてリンクの魔法を解いてあげます。すると、ここの隙間が無くなります。
ちょっと、プレビューで見てみます。さあ、この間が無くなりました。下のほうの間も無くなりました。
これで、こちらに薄いグレー、こちらが白ということで、それぞれのコーナーの区切りになっています。
そしてこちらの画像がやや大きすぎるなというふうに思えば、画像のウィジェット、そしてスタイル、これで高さを設定できます。こちらのほうはお好きな高さに設定することも出来ます。今回は600。
これでもう一度、プレビューを見てみましょう。さあどうでしょう。こんな感じでちょっと、こんな感じでいいですかね。
そしてこちらの、ページは完成ですけれども、最後にこちらのヘッダーの部分のリンク、ここを最後に調整します。
これは、こちらのリンク、これで編集できますけれども、これがトップページのままになっているので、ここはお問い合わせページですから、ここにトップページのURLを貼ってあげます。
トップページのURLを貼るには、まずダッシュボードから、固定ページ、トップページの編集をクリックします。編集画面に向かいます。
そしてこちらのトップページのURLを、一番最後のスラッシュは入れないで、こちらをコピーして、ここに貼りつけてやります。そしてプライスのほうのURLも調整します。そして最後、info。infoのリンクを貼るのは、ここはinfoのページですから、このページトップにくるように、ハッシュだけでもOKです。
これと同じように、こちらはトップページの編集画面です。ここのほうも、まずテキスト、infoのページのURLを貼っていなかったので、こちらのinfoのURLを貼るにはこちらですね。
infoページの編集をクリック、こちらがinfoの編集です。パーマリンクのところにinfoのURLがあります。こちらも最後のスラッシュがない、スラッシュ以前のところまでコピーしてあげます。そしてここの、infoを選択した編集、トップページのinfoにリンクを貼ってやります。こちらにURLを貼ってやります。そして適用。これで完成です。
こちらの下のほうが、スマホ用のハンバーガーメニューです。こちらも同じようにinfoを選択してリンクをつくってあげます。そして適用。
こちらのinfoページも同じように、スマホメニューを選択して、こちらのトップとプライス、infoのほうを作り変えてやります。そして全てが完成となります。
それでは、完成したプレビューをもう一度見てみましょう。さあ、こんな感じです。
こちらのページはテンプレートとして、みなさんダウンロードできるように、当社のホームページでダウンロードのリンクを設置しておきます。
さあ、これで全ての、ホームページを作る、エレメンター講座が終了しました。これを一通り、ご覧になっていただいた方は、ホームページをゼロから一人で完成できるようになっているかと思います。
それでは、これ以降の、こちらの動画は、エレメンターのウィジェット、ウィジェットまだ一つひとつ沢山あります、こちらの一つひとつを、毎回ひとつのウィジェットを詳細解説していこうと思います。
今回のエレメンターの講座は、これですべて完了となります。
それでは、みなさん、お疲れさまでした。いいホームページをつくってください。
それでは、有難うございました。
