WordPressで美容室のホームページを作成する方法（第2回 ヘッダーメニュー編）

こんにちは。switchです。

化粧品会社で Web担当者をしています。営業も兼任していて、美容室の Web集客を日々研究しています。

今回は「 WordPressで美容室のホームページを作成する方法シリーズ第2回、ヘッダーメニュー編を解説します。前回は第1回の完成までのロードマップを解説しました。今回からは実際にホームページを作成していきたいと思います。

「第1回から読みたい！」という方はコチラ👇

 WordPressで美容室のホームページを作成する方法（第１回 完成までのロードマップを解説）

このシリーズの WordPressテーマは「AFFINGER6」を使用しています。画面が多少異なることもありますが、大筋一緒です。分からないところはご自身の WordPressテーマで検索してみてください。

会社のホームページは WordPressを使っていて、 WordPressテーマは「AFFINGER6」を使用しています。「AFFINGER6」はカスタマイズ度に優れていてブログサイトのみならずコーポレートサイトでも使い勝手の良いテーマですので公私共に愛用しています。

WordPressテーマ「AFFINGER6」が気になる方はコチラ👇

WordPress有料テーマのおすすめは？無料テーマも解説

 WordPress有料テーマ「AFFINGER」の購入から初期設定までを解説

それではヘッダーメニューの解説に入ります。

この「Up Tempo!」でいうと

赤枠のメニューの部分ですね。「ヘッダーメニュー」のことを「グローバルナビゲーション」とか言ったりもします。ここでは「ヘッダーメニュー」と呼びますね。

美容室に必要なヘッダーメニュー

まずは美容室に必要なヘッダーメニューを決めましょう。今回は次の8つ項目で「ヘッダーメニュー」を作っていきます。

こんなところですね。

ヘッダーメニューは通常５〜９項目までと言われます。パッと見て視界に入ってくるくらいが良いと思います。それ以外で項目を入れたい場合はサイドバーを利用します。

ヘッダーメニューの作り方

それではヘッダーメニューの作成に移ります。

手順は

の2STEPです。

WordPressにはコンテンツを投稿する機能が２種類あリます。

「固定ページ」はそのページだけで説明が完結できるページのこと。美容室のホームページでいえば「メニュー・料金表」や「スタッフ」「アクセス」などが固定ページに該当します。それに対して「投稿」はあるカテゴリーにいくつも記事を追加していくことをいい、美容室のホームページでいえば「ブログ」に該当します。

ブログのような投稿タイプの記事以外はほとんどが固定ページになります。

固定ページを作る

それでは固定ページを作っていきます。

ヘッダーメニューに必要な情報は以下の8つでしたね。

それぞれ固定ページを作成していきます。

「トップページ」の固定ページを作成していきます。

ダッシュボード管理画面から

「固定ページ」＞「新規追加」をクリック。

固定ページの編集画面です。固定ページのタイトルを入力します。この部分が「ヘッダーメニュー」のメニュー名になります。ここでは「トップページ」と入力します。

タイトルを入力したらパーマリンクを設定します。パーマリンクとは記事のURLのことです。

右の編集画面の「固定ページ」のタブからパーマリンクを設定できます。URLスラッグ欄にアルファベットで入力します。ここでは「トップページ」のパーマリンクなので「toppage」と入力します。

最後に「公開」を忘れずクリックしてください。

同じ要領で「こだわり」「メニュー・料金表」「お客様の声」「アクセス」「ご予約・お問い合わせ」「スタッフ」のページを作成します。「ブログ」については別回で解説します。

メニューバーを作る

各ページができたら次にメニューバーを作ります。

ダッシュボード画面から

「外観」＞「メニュー」をクリック。

①メニュー名を入力します。メニュー名は何でもいいので、ここでは「ヘッダーメニュー」と入力します。

②入力したら「メニューを作成」をクリックします。

「メニュー作成」をクリックすると、左側の「メニュー項目を追加」に先程作成した固定ページが表示されます。メニューバーに入れたい固定ページにチェックを入れ、「メニューに追加をクリック」します。

「メニューに追加」をクリックしたら、右側に固定ページのメニューが表示されます。ここで順番を変えたいなと思ったら、変えたい固定ページをドラッグすることができます。お好みの順番に変更してください。

その下の「メニュー設定」で

①ヘッダー用メニューにチェックを入れます。

②チェックを入れたら、「メニューを保存」をクリックします。

これで完了。

サイト表示をしてみて、ちゃんとメニューバーが出来ているか確認しましょう。

出来ていますね。これでヘッダーメニュー完成です。

まとめ

それでは今日のまとめ。

以上です。

次回の第3回はサイトカラーの設定方法を解説していきます。それではまた。