前回、前々回とワードプレスの無料テーマ「Lightning」を使ったサンプルサイト作成の下準備を進めてまいりましたが、今回は具体的にフィットネススタジオのサンプルサイトの作成をしていきたいと思います。
前回記事はこちら
Contents
ヘッダーロゴ画像の設定
企業サイトやお店のホームページでは、ロゴやロゴマークも重要ですよね。ホームページの左上に表示されるロゴ画像の設定をしていきます。
管理画面左側「外観」＞「カスタマイズ」をクリック、「Lightning デザイン設定」をクリックします。
「ヘッダーロゴ画像」の「画像を変更」をクリックし、自社のロゴ画像をアップロードしてください。
トップページスライドショーの設定
Lightningの大きな特徴として、トップページのスライドショーがあります。続いてスライドショーの設定をしていきます。
こちらも管理画面左側「外観」＞「カスタマイズ」から、「Lightning トップページスライドショー」をクリックします。
スライドショーの設定はかなり細かく設定できます。
①表示設定・スライド静止時間・スライド効果・スライド切り替え間隔
こちらでスライドショーの基本的な設定を行います。ここでスライドショーの表示の有無、1つのスライドが表示されている時間、切り替わりにかかる時間、スライドショーの種類（slide、fade、coverflow、flip）から選択できます。お勧めは、fadeもしくは、slideになります。
②スライドタイトル
ここからは個別のスライドの設定になります。スライドは全部で３枚設定できます。
スライドタイトルは大きいサイズのテキストになります。
③スライドテキスト
スライドタイトルの下の小さいサイズのテキストになります。説明文などが入ります。
④ボタンのテキスト・リンク先URL
ボタンの上のテキストとリンク先のURLの設定ができます。
⑤位置
スライドタイトル・スライドテキスト・ボタンの位置を左・中央・右に変更できます。
⑥スライド上の文字色・文字の影の有無・影の色
スライド上の文字色や文字の影の色などの設定ができます。
⑦スライド画像
スライド画像の設定をします。さらに、スマホ用のスライド画像の設定もできます。
⑧スライド画像の代替テキスト・スライドに被せる色・色の濃さ
画像の代替テキスト（alt)や画像の上に被せる色や色の濃さなどの設定ができます。
固定ページタイトルの編集
Lightningでは、自動的に固定ページ「HOME」、「会社概要」、「ブログ」、「お問い合わせ」、「サイトマップ」が生成されます。これをご自身の会社やお店に合わせて作り直していきます。
もともと、ワードプレスインストール時に作成された「Privacy Policy」、「Sample Page」も含めて、以下のような固定ページがあります。
この中で、「Sample Page」は要らないので「ゴミ箱に移動」します。
固定ページの中身は、後々作成するとして、ページのタイトルはここで修正しておくといいと思います。
メニューの設定
固定ページの編集が出来たら、グローバルメニューの設定をします。
管理画面左側「外観」＞「メニュー」をクリックします。
まずは、ヘッダーナビの編集をします。編集をするメニューを選択で、「ヘッダーナビ」を選択し、必要なメニュー項目を追加していきます。
ヘッダーナビは、ホームページの上部右側に表示されるグローバルメニュー（グローバルナビゲーション）になります。
ここで、ヘッダーナビをより良く見せるために、メニュー項目の下に英字のサブタイトルを入れたいと思います。
まずは、メニューの設定画面右上「表示オプション」をクリックします。
画面上部に画面上の要素、詳細メニュー設定を表示のチェック欄が出てくるので、「説明」の欄にチェックを入れます。
その状態で、各メニュー項目の▼部分をクリックすると
URLやナビゲーションラベルの他に説明の項目が追加されています。
こちらの説明の項目に英字などを入力してください。
これでホームページの確認をすると、ヘッダーナビのタイトルの下に小さいサイズの英字タイトルが入りました。
あと、フッターナビ（ホームページの下部に表示されるメニュー）の設定もできるので、ここでは「プライバシーポリシー」と「サイトマップ」を入れました。
ホームページ上では、ホームページの下の方に小さめで表示されました。
まとめ
今回は、ロゴやトップページスライドショー、グローバルナビゲーションなどの設定をしていきました。まだまだ、ホームページの中身のコンテンツまではできていませんが、大分それらしくなってきたと思います。特にヘッダー部分は、ホームページの顔になる大事な部分ですので、しっかりデザインする必要があると思います。
次回は、ホームページの中身のコンテンツを作成していこうと思いますので、どうぞよろしくお願いいたします。
