ここまで、ワードプレスの無料テーマ「Lightning」を使って、フィットネススタジオのサンプルサイトの作成を下準備から進めてまいりました。
前回では、ホームページのヘッダー部分、トップページスライドショーの設定まで行い、ここまでで以下のようなデザインになりました。
Contents
トップページの中身の作成
今度はトップページの中身を作成していきたいと思います。
管理画面左側「固定ページ」＞「固定ページ一覧」をクリック、固定ページの一覧画面になりますので、「HOME」－フロントページをクリックします。
カラムブロックの編集
トップページの上段、画像や文章、ボタンなどが４列に並んでいる箇所の編集をしていきましょう。
ここは、カラムブロックで４カラムに分けられていて、1つのカラム内に画像、見出し（H5）、段落、ボタン、スペーサーといったブロックが配置されています。
編集画面の下の方に現在選択中のブロックの階層構造が表示されています。
例えば、カラム数を変更したい場合、画面下の階層表示の「固定ページ＞カラム＞・・・」の「カラム」をクリックし、カラムブロックを選択、編集画面右側のカラム数を変更してください。
カラム数や画像、見出し、段落、ボタンなどの内容を変更していきます。
カバーブロックの編集
次にその下の段、カバーブロックの部分を編集していきます。
カバーブロックの中は、2カラムに分かれていて、左側に画像、右側に見出しと段落があります。
カバーブロックは、画像を背景にすることができます。カバーブロックを選択した状態で、「メディアを追加」をクリックし、画像をアップロード（もしくはライブラリから選択）してください。
画面右側「メディア設定」で、固定背景を選択することで、背景を固定しスクロール時に動きのあるサイトを作ることが出来ます（PC表示時に限る）。
カバーブロックの背景、画像、見出し、段落など、編集していきます。
フィットネススタジオのサンプルサイトの完成
その他、諸々の修正を加えていき、以下のようなサイトになりました。
実際のサイトはこちら
その他、サイト作成に使用したプラグイン
その他、文字や画像の表示にアニメーションを追加するため以下のプラグインも使用しました。
Blocks Animation: CSS Animations for Gutenberg Blocks
詳しい使用法などは、以下の記事などをご参考にしてください。
まとめ
以上、ワードプレスの無料テーマ「Lightning」を使ったサンプルサイト作成の流れの紹介でした。
ワードプレスには、有料・無料の沢山のテーマ・テンプレートがあり、それらを使って、専門知識が無くても手軽にサイト作成ができます。その中でも、コーポレートサイト、お店のサイト作成に特化した「Lightning」は、簡単にデザインの良いサイトを作ることが出来ますので、参考にしていただければと思います。
