今回は前回の『Lightning』を使ってサイトを作る方法（前編）に続き、カフェをイメージした簡単なページを作っていきたいと思います。
今回は固定ページの中身を作っていくところから始めます。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
WordPressの無料テーマ『Lightning』を使ってサイトを作る方法（後編）
今回の流れは以下になります。
- 固定ページの中身を作成
- 余白を作る
- 1つ目のコンテンツを作成
- 2つ目のコンテンツを作成
- 新着記事を表示させる
- マップを埋め込む
それでは順番に解説していきます。
固定ページの中身を作成
まず前回作ったTOPページの編集をクリックします。
すると次の画面になります。
これはブロックエディタと呼ばれるエディタで、プラグインを使えば以前のクラシックエディタにすることも出来ますがそれでは今回のやり方は通用しないので、クラシックエディタに慣れている人もこれを機にブロックエディタに慣れていきましょう。
余白を作る
最初にスライドショーと最初のコンテンツの間に余白を作りたいと思います。
要素同士がぴったりくっついていたら変ですからね。
まず編集画面の＋をクリックするとメニューが表示されるので、レイアウト要素をクリックします（デフォルトではよく使うものが開いているので、少し下にスクロールするかよく使うものをクリックして閉じましょう）
すると以下のメニューが現れるので、スペーサーを使います。
余白 ＝ スペース ＝ スペーサー ですね。
スペーサーをクリックすると次のように余白が出来ます。
そして右側の余白の設定で高さをピクセルで指定できます。
デフォルトでは100pxになっていますが、今回は50pxとしたいと思います。
コードでは margin-top: 50px; と書いているとイメージして下さい。
1つ目のコンテンツを作成
次はコンセプトというコンテンツ（セクション）を作っていきます。
まずは先ほどの余白を作っただけの状態を確認してみます。
スライドショーの下にはまだ何もありません。
ここにこれから色々と作っていきます。
カラムの設定
それでは先ほどと同じように、＋をクリックした後にレイアウト要素をクリックします。
そして今回はカラムを設定したいので、カラムをクリックします。
すると次のような表示がされるので、今回は2カラム：均等割を選択します（アイコンにマウスをホバーすると画像のように2カラム：均等割と文字が表示されます）
すると2カラムの表示がされます。
そしてこの左側に画像、右側にテキストを入れていきます。
画像を設定
まずは画像です。
左側の＋をクリックして、今回はよく使うもの（または一般ブロック）の中にある画像をクリックします。
そして画像を選択すればOKです。
次は右側にテキストを入れていきます。
見出しを入力
まず一般ブロックをクリックしてから見出しをクリックします。
そしてCONCEPTと入力します。
今回はh2タグとしましたが、h3～h6にも変更可能です（h5とh6は右側からのみ）
他にもフォントの太さや色、リンクの設定なども出来ます。
本文を入力
次は見出しの右下にある＋をクリックして、よく使うもの（または一般ブロック）の中にある段落をクリックします。
するとテキストを入れられるようになります。
ここでも見出し同様に色々と設定可能です。
ここで一旦画面右上にあるプレビューをクリックして表示を確認してみます。
すると最初の状態と比べてコンテンツが追加されたのが分かります。
ちなみにレスポンシブにもなっているのでとても便利です。
2つ目のコンテンツを作成
次は3カラムのコンテンツを作っていきます。
これも引き続き固定ページのTOP、というか先ほどのコンテンツの下に作っていきます。
ここも先ほどと同じように左下の＋をクリックして、スペーサーで余白を作ります。
今回も高さは50pxとします。
そして1つ目と同様にカラムの設定ですが、今回は2カラムではなく3カラム：均等割にします。
そしてカラムが3つになったので、1つずつ画像とテキストを入れていきます。
まず1つ目に画像を入れてみます。
画像を入れた後に画像をクリックすると、中央揃えなど変更することが出来ます。
またこの画像には表示していませんが、画像のサイズは右側のメニューから変更可能です。
そしてテキストは次の画像の赤枠をクリックすると入力できます。
このテキストも太字にしたり中央揃えにできます。
これをあと2つ作ると以下のようになります。
ここで一旦更新してプレビューしてみます。
すると次のような表示になっていればOKです。
ちなみにカラムはクリックすると最大3カラムまでしか選べませんが、画面右側から最大6カラムまで選択することが可能です。
新着記事を表示させる
次は新着記事を4件表示させるようにします。
まずはこれまで同様にスペーサーで50px設定してから、見出しとしてBLOGと書きます。
その後ですが、ここで初めてウィジェットという項目を使います。
このウィジェットの中の最新の記事をクリックします。
すると読み込みが始まり、しばらくしてHello world!と表示されれば完了です。
ちなみにこのHello world!というのはデフォルトで作成されている投稿記事のことで、削除することも可能です。
そして最新の記事を何件表示するとか、並び順をどうするとかは右側のメニューから設定できます。
今回は並び順は投稿日時とし、表示数（項目数）は4としました。
それでは試しに「今日のブログ①～⑤」を投稿してみます。
すると次のように最新の4件が表示され、一番古い今日のブログ①は表示されていないのが確認できます。
マップを埋め込む
次はgoogleマップを埋め込んでいきます。
まずはいつも通りスペーサーで50pxを設定した後、今回は左側にマップ、右側に見出しと本文（住所）を表示させたいと思うので、カラムを2カラムに設定します。
そしてここで初めてフォーマットを使います。
googleマップを埋め込むにはフォーマットの中にあるカスタムHTMLを使います。
今回は例として代々木公園の住所を埋め込みたいと思います。
まずは代々木公園でググって、地図をクリックします。
すると次のような画面になるので、ここで共有をクリックします。
共有をクリックすると次のような画面になります。
デフォルトでは左側のリンクを送信するになっているので、右側の地図を埋め込むを選択した後にHTMLをコピーをクリックします。
そして先ほどのカスタムHTMLに戻って、コピーしたHTMLを貼り付けます。
急に長いコードが出てきてビビるかも知れませんが、ただのコピペなので安心してください。
残りの右側はただの見出しと本文なので、今までと同じようにやればOKです。
そして編集画面では次のようになります。
ここで一旦更新してプレビューしてみます。
ちゃんと地図も表示されていますね。
まとめ
これで一通り完了しました。
あとは追加CSSなどを使ってフォントを変えたり、色々とカスタマイズも出来るので試してみて下さい。
前編はこちら。
-
WordPressの無料テーマ『Lightning』を使ったサイトの作り方（前編）
続きを見る
以上になります。
