【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #3(全７回)(メニュー、ヘッダー、フッター設定)

こんにちは。プログラマーNです。

WordPressのテーマ、「Snow Monkey」でヨガスタジオのホームページを作成する方法の第３回目です。(全７回)

この記事のシリーズをご覧になることで、ホームページを楽に作成することができます。

【デモサイト】
WEBサイト「仮想Yoga」

PR

メニュー設定

第２回目の内容で固定ページを作成しました。
その固定ページを使用し、画面の上部にメニューを設定します。

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #2(全７回)(各ページ設定)

ヨガスタジオのホームページを作成するシリーズの第２回目です。(WordPress)今回の内容は、各ページの設定、サイトの基本設定です。

www.babystep36.com

2024.01.10

「ダッシュボード」→「外観」→「メニュー」

• メニュー名：メニュー名を入力(「グローバルナビ」と入力してみます)
• メニューの位置：グローバルナビゲーション(PC用)、ドロワーナビゲーション(モバイル用)にチェック

その後、「メニューを作成」ボタンを押します。

メニューを作成したことで、左側「メニュー項目を追加」が押せるようになりました。

「すべて表示」タブで作成した固定ページを全てチェックします。
その後、「メニューに追加」ボタンを押します。

メニュー構造に表示されました。
順番がバラバラですので、各ページをドラッグし、順番通りに移動させます。

「メニューを保存」ボタンを押します。

ホームページを表示してみると、メニューが表示されていますね。

ヘッダー設定

トップページのスライダー画像

トップページにスワイプ対応のスライダー画像を表示します。

「ダッシュボード」→「外観」→「カスタマイズ」→「ウィジェット」→「ホームページ上部」

「ウィジェットを追加」ボタンを押します。

「WPAW:スライダー」が設定できます。

画像を設定します。
また、文章、リンクURL、ボタンを設置することが可能です。

画像の設定(スライダーの種類をスライド or フェードにするか、何秒で次の画像を表示するか等)ができます。

「WPAW:スライダー」の設定完了後、「適用」ボタン→「完了」を押します。
その後、上部「公開」ボタンを押します。

各ページの共通ヘッダー画像

各ページのヘッダー画像を選択し、表示します。
（今回はトップページ以外は各ページ共通のヘッダー画像とします）

「ダッシュボード」→「外観」→「カスタマイズ」→「デザイン」→「基本デザイン設定」

「デフォルトページヘッダー画像」で画像を選択します。

↓画像を選択後

右側のメニューで「トップ」以外を押します。
選択した画像が表示されています。

「公開」ボタンを押します。

「ダッシュボード」→「外観」→「カスタマイズ」→「デザイン」→「固定ページ設定」

下記の様に変更します。

• ページレイアウト … フル幅
• アイキャッチ画像の位置 … ページヘッダーの上にタイトルを表示
• ページヘッダーの行揃え … 左

「公開」ボタンを押します。

※ページレイアウトを「投稿のレイアウトと同じ」にしたままの場合、下記の画像のように、右側に「最近の投稿」、「最近のコメント」などが表示されてしまいます。

ヘッダー画像の上のタイトルが見えにくいので、影をつけ、見やすくします。

「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」

入力欄に下記内容を追加します。

「公開ボタン」を押します。

＜↓変更前内容↓＞

フッター設定

下記の内容をフッターで設定していきます。

• 住所
• 営業時間
• 電話番号
• マップ
• メニュー

「ダッシュボード」→「外観」→「カスタマイズ」→「ウィジェット」→「フッター」

「ウィジェットを追加」を押すと、右側にどの内容を追加するか表示されます。

「テキスト」、「カスタムHTML」、「ナビゲーションメニュー」を追加します。
左側に「ウィジェット」が表示されます。

想定外の順番になっている場合、該当のウィジェットをドラッグで移動させ、想定の順番にします。

「テキスト」のウィジェットを押すと設定ができます。
入力後、「完了」を押します。

「カスタムHTML」、「ナビゲーションメニュー」も同じような流れで設定します。
入力後、各々のウィジェットの「完了」を押します。

「公開」を押します。

※カスタムHTMLでは、Google Mapを使用しています。
設定方法は、下記の記事「マップ　（カスタムHTML）」をご参照ください。

【動画有】店舗ホームページ作成【ワードプレス】(よくあるご質問ページ) (8/全11)

WordPressで店舗サイト作成の第８回目です。（テーマ：BusinessPress）（全１１回）今回はアクセスのページで地図、よくある質問のページでFAQ（Q＆A）を作成します。とても簡単でわかりやすく、すぐに作成できます。

www.babystep36.com

2024.01.10

カラム（列）を変更します。

「ダッシュボード」→「外観」→「カスタマイズ」→「デザイン」→「フッター」

「公開」を押します。

３カラムで表示されました。

その他設定

SNS連携

SNS(Instagram、Facebook、Twitter、YouTubeなど)をホームページに表示します。

「ダッシュボード」→「外観」→「メニュー」

「新しいメニューを作成しましょう。」のリンクを押します。

「メニュー構造」の設定

• メニュー名 … 「SNS連携」と入力しました。
• メニューの位置 … ソーシャルナビゲーションにチェック

「メニューを作成」ボタンを押します。

「メニュー項目を追加」の「カスタムリンク」を押します。

「URL」、「リンク文字列」を入力し、「メニューに追加」ボタンを押します。
（例）使用しているインスタグラムのURL、リンク文字列は「Instagram」です

「メニュー構造」に表示されました。

同じように他のSNSをメニューに追加していきます。
その後、「メニューを保存」を押します。

ホームページを確認します。

SNSアイコンが少し小さいですので、サイズを大きくします。

「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」

下記の内容を追加で入力します。

「公開」を押します。

SNSアイコンのサイズが大きくなりました。

ページ速度最適化

ホームページの表示速度が遅いと、実際にホームページをご覧になっている方が離脱しやすいため、速度を最適化します。

「ダッシュボード」→「外観」→「カスタマイズ」→「ページ速度最適化」

（一旦、下記のみにチェックを入れておきます）

「公開」を押します。

投稿ページのサイドバー編集

投稿ページの右側のサイドバーで不要なウィジェットがあるので、削除します。

「ダッシュボード」→「外観」→「ウィジェット」

「サイドバー」、「追尾サイドバー」で不要なウィジェットを削除します。
（ウィジェットの追加、変更もできますが、今回は削除のみにします）

「最近のコメント」を削除します。

同じように「追尾サイドバー」の「カテゴリー」、「メタ情報」を削除しました。

ホームページを確認すると、投稿記事で右側サイドバーの不要なウィジェットが削除されています。

まとめ

次回のヨガスタジオのホームページを作成する方法第４回目は、トップページを作成していきます！

ヨガスタジオのホームページを作成する方法 シリーズ

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #1(全７回)(構成、構造、プラグイン設定)

WordPressのテーマ、「Snow Monkey」でヨガスタジオのホームページ作成する内容をシリーズ化して、お伝えしていきます。自分でホームページを作成する際、WordPressをインストールしたけど、何から始めてよいかわからないですよね。実際にこのシリーズを１から進んでいけば、同じ内容で作成できますので、このシリーズを最後までご覧になれば幸いです！

www.babystep36.com

2024.01.10

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #2(全７回)(各ページ設定)

ヨガスタジオのホームページを作成するシリーズの第２回目です。(WordPress)今回の内容は、各ページの設定、サイトの基本設定です。

www.babystep36.com

2024.01.10

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #4(全７回)(トップページ)

ヨガスタジオのホームページを作成するシリーズの第４回目です。(WordPress(テーマ：SnowMonkey))今回の内容は、トップページを編集します。ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか？ 内容をしっかり把握してしまえば、それほど難しくはないです。 このシリーズをご覧になることで、ホームページを楽に作成することができます。

www.babystep36.com

2024.01.10

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #5(全７回)(「初めての方へ」ページ)

ヨガスタジオのホームページを作成するシリーズの第５回目です。(WordPress(テーマ：SnowMonkey))今回の内容は、「初めての方へ」ページを編集します。ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか？ 内容をしっかり把握してしまえば、それほど難しくはないです。 このシリーズをご覧になることで、ホームページを楽に作成することができます。

www.babystep36.com

2024.01.10

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #6(全７回)(「コース・クラス」「インストラクター」「スタジオ」ページ)

ヨガスタジオのホームページを作成するシリーズの第６回目です。(WordPress(テーマ：SnowMonkey))今回の内容は、「クラス・コース」「インストラクター」「スタジオ」ページを編集します。ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか？ 内容をしっかり把握してしまえば、それほど難しくはないです。 このシリーズをご覧になることで、ホームページを楽に作成することができます。

www.babystep36.com

2024.01.10

【ヨガスタジオ】仮想店舗ホームページ作成 WordPress #７(全７回)(「アクセス」「ニュース」「お問い合わせ」ページ)

ヨガスタジオのホームページを作成するシリーズの第７回目です。(WordPress(テーマ：SnowMonkey))（全７回）今回の内容は、「アクセス」「ニュース」「お問い合わせ」ページを編集します。ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか？ 内容をしっかり把握してしまえば、それほど難しくはないです。 このシリーズをご覧になることで、ホームページを楽に作成することができます。

www.babystep36.com

2024.01.10

動画はこちら