WordPress ホームページの作り方

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

こんにちは。switchです。

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

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

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

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

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

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

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

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

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

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

美容師さん
「ヘッダーメニュー」ってサイトの上部にあるメニューのことですよね?
そうですね。サイト全体の案内役であり、ユーザーが迷うことなく必要な情報に辿り着けるためのものですね。
switch

この「Up Tempo!」でいうと

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

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

美容師さん
美容室に必要な「ヘッダーメニュー」ってなんだろう?
まずはそこからですね。
switch

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

美容室の「ヘッダーメニュー」

  • トップページ
  • こだわり
  • メニュー・料金表
  • お客様の声
  • アクセス
  • ご予約・お問い合わせ
  • スタッフ
  • ブログ

こんなところですね。

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

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

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

手順は


  • step.1

    固定ページを作る


  • step.2

    メニューバーを作る


の2STEPです。

美容師さん
固定ページ?

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

・固定ページ

・投稿

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

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

固定ページを作る

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

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

美容室の「ヘッダーメニュー」

  • トップページ
  • こだわり
  • メニュー・料金表
  • お客様の声
  • アクセス
  • ご予約・お問い合わせ
  • スタッフ
  • ブログ

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

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

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

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

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

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

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

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

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

メニューバーを作る

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

ダッシュボード画面から

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

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

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

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

ここで作成した固定ページが「メニュー項目を追加」で出てこないことがあったら、固定ページが「公開」状態になってないからです。表示されなかったら固定ページの公開状態を確認しましょう。
switch

注意ポイント

作成した固定ページは必ず公開ボタンをクリックしておきましょう。固定ページが公開状態になっていなければ、「メニュー項目追加」の欄に表示されなくなるので注意です。

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

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

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

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

これで完了。

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

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

まとめ

それでは今日のまとめ。

・ヘッダーメニューの項目を決める

・固定ページを作る

・パーマリンクはアルファベットを使う

・固定ページは公開状態にする

・メニューバーを作成する

以上です。

美容師さん
これからホームページが出来上がっていくのが楽しみ!
今回から実際にホームページを作り始めましたね。これから徐々に出来上がってきます。
switch

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

-WordPress, ホームページの作り方