【ヘッダーの設定⑤】完全図解！ヘッダーのカテゴリーを設定する方法

 

 

前回では

⇒【サイトのアウトライン設定④】サイトのロゴを作成しよう

についてお話をしていきました。

今回はヘッダーのカテゴリーを設定していく内容です。

このサイトで言うとここの部分です。

 

 

カテゴリーは固定と投稿ページで作ることができます。

 

 

 

 

サイトの構成を考える

 

カテゴリーを決めていく前に最初の考えることはサイトのトップページの構成を考えることが先決です。

なぜならサイトの構成を考えるとスムーズにサイトが作成できるようになるからです。

また、それぞれのページを作成するときはページの目的にあった『テンプレート』を準備することで無駄なくサイトを作ることができます。

これから作るサイトのテンプレートと構成はこちらです。

（※画像はクリックするとすべて拡大してみることができます）

 

テンプレートに沿って作成した実際のサイトはこちらです。

 

実際のサイト

 

今回はこれを作っていきます。

カテゴリーは固定ページと投稿ページで作ることができます。

テンプレートで見てみましょう。

 

 

 

 

固定ページでカテゴリーを作成した場合

 

 

実際に当てはめてみるとこんな感じです。

 

 

赤枠で囲ってある場所は固定ページで作っていきます。

では投稿ページで作るカテゴリーはどこの場所なのでしょうか？

 

投稿ページでカテゴリーを作成した場合

 

 

 

実際に当てはめてみましょう。

 

 

このような感じでカテゴリーを作ることができます。

実はサイトを作成する前の作業はとても大切でカテゴリーを設定してから情報や記事（ブログ）を書いていくべきなのです。

そうすれば後からあれやこれやと手をつけなくてすみますしスムーズなサイト作成ができるのです。

 

ではテストサイトのようにカテゴリーを作りサイトのヘッダー部分に表示させてみましょう

今からこれを作っていきます。

 

 

手順どおりやっていけば必ず作れるようになるので安心してくださいね＾＾

 

ヘッダーのカテゴリー設定の手順

 

1. サイトの構成を考える
2. 親カテゴリーを設定する
3. 子カテゴリーを設定する
4. サイトにアップする
5. 記事（ブログ）を書いていく

 

1.サイトの構成はこちらのテンプレートに沿って作成していきます。

 

 

2.親カテゴリーを設定する

 

では早速『親カテゴリー』を作っていきましょう

これは固定ページから作っていきます。

手順はこうです。

 

1. 『ダッシュボード』
2. 『固定ページ』
3. 『新規追加』
4. 『タイトルを入力』
5. 『公開』

 

ここまでできたらヘッダーのカテゴリーメニューに表示させる作業を行っていきます。

では固定ページからカテゴリーを作っていきましょう。

『サービス内容』という固定ページを作っていきましょう

『ダッシュボード』⇒『固定ページ』を選びクリックします。

 

 

『新規追加』をクリックします。

 

 

表示が切り替わるので赤枠にタイトルを入力しましょう。

 

 

ここでは『サービス内容』と入力しました。

青枠はあなたが顧客にどんなサービスを提供するのか書いていきましょう。

 

 

 

 

タイトルを入力するとパーマリンクが表示されるので『URL』を変更します。

 

 

『編集』をクリックすると赤枠のように表示されます。

ここは『サービス内容』という文字はパソコンの『Backspace』キーで消します。

 

 

パーマリンクを欄に『service-contents』と入力します。

入力したら『OK』をクリックします。

 

 

『公開』をクリックしましょう。

 

 

 

これで固定ページを作ることができました。

この手順を繰り返して

『サービス内容』⇒『お問い合わせ』⇒『運営者情報』⇒『記事一覧』を作っていきましょう。

 

ヘッダーのカテゴリーメニューに表示させる方法

 

固定ページは作成して公開した時点ではカテゴリーに表示されません。

表示させるには『外観』『メニュー』のタブを使って表示させるようにします。

手順はこうです。

1. 『外観』
2. 『メニュー』
3. 『メニュー名を入力』
4. 『メニューを作成』
5. 『表示させる場所をチェックする』
6. 『タブから固定ページで作ったものを『メニューに追加』するをクリックする』
7. 『メニューを保存する』

 

このような流れです。

たぶん読んでもなんのことかよくわからないと思いますので、解説していきましょう。

 

『外観』⇒『メニュー』をクリックします。

 

 

表示が切り替わるので赤枠の中に文字を入力します。

 

 

赤枠に中に『ナビゲーションメニュー』と入力します。

 

 

『メニューを作成』をクリックします。

 

 

すると赤枠に様なものが表示されるようになります。

 

 

• 『グローバルナビ』
• 『グローバルナビ（スマートフォン）』にチェックを入れます。

 

 

 

 

赤枠には公開している固定ページで作ったものが表示されているはずです。

 

 

固定ページで作ったもの全てにチェックを入れましょう。

 

 

『メニューに追加』をクリックします。

 

 

すると先ほど作成した『ナビゲーションメニュー』の中に固定ページが移動したのが確認できるはずです。

 

 

『メニューを保存』をクリックします。

 

 

『ナビゲーションメニューが更新されました』と表示されたらOKです。

 

 

では実際にサイトではどのように表示されているのか確認をしていきましょう。

 

『ライブプレビューで管理』をクリックしましょう。

 

 

プレビュー画面で確認するとこのように表示されているはずです。

 

 

 

 

 

ここまでが親カテゴリーの設定方法です。

テンプレートで見るとこんな感じですよね

 

 

実際のサイトで表示されたものがこちらです。

 

 

 

見比べていただくとわかりますが、テンプレートに近いものを作ることができました。

 

 

2.子カテゴリーを設定する

 

では次に子ページからカテゴリーを作っていきましょう。

これは投稿ページから作っていきます。

作っていく手順

1. 『ダッシュボード』
2. 『投稿』
3. 『カテゴリー』
4. 『カテゴリー名を入力』
5. 『スラッグ（URL）を設定する』
6. 『新規カテゴリーを追加』
7. 『外観』
8. 『メニュー』
9. 『投稿からナビゲーションメニューに移動』

 

このような流れで設定していきます

これも解説していくのでそのまま読み進めてくださいね。

 

『ダッシュボード』から『投稿』⇒『カテゴリー』を選びクリックします

 

 

 

 

表示が切り替わるので赤枠の『新規カテゴリーを追加』の中にカテゴリーの名前を入力します。

 

 

 

『スラッグ』はカテゴリーのURLのことなのでカテゴリーの名前が決まったらスラッグ名も入力します。

 

 

『スラッグ』ここではカテゴリー名と同じもので大丈夫です。ただしアルファベットで入力しましょう。

日本語だとGoogleの検索エンジンにとって好ましくない影響が出てしまうからです。

 

ここでは『category-2』と入力しました。

入力が完了したら『新規カテゴリーを追加』をクリックしましょう。

 

 

クリックすると右の赤枠のようにカテゴリーが追加されたのがわかります。

 

 

テンプレートだとカテゴリーは３つあるので同じ手順を踏んでカテゴリーを３つ作っていきましょう。

 

 

３つ作ることができました。

 

 

では次に『外観』『メニュー』をクリックしましょう。

 

 

すると表示が切り替わるので赤枠の中の『○』をクリックします。

 

 

カテゴリーのタブが表示されるので『すべて表示』をクリックしましょう。

 

 

赤枠の中にある『カテゴリー』の1～3すべてチェックを入れます。

チェックした後に『メニューに追加』をクリックしましょう。

 

 

すると右の赤枠の中に作成したカテゴリーがメニューに追加されているのがわかります。

 

 

次に作成したカテゴリーを『記事一覧』の下に移動させます。

カテゴリー1～3を順番に移動させます。

 

 

カテゴリー１のタブをマウスでドラッグ＆ドロップすると動かせるようになります。

 

 

 

このまま記事一覧の下へ移動させましょう。

 

 

ちゃんと移動されたのが確認できたと思います。

 

 

同じように残りのカテゴリーも記事一覧の下へ移動させましょう。

 

 

 

すべて移動できたら『メニューを保存』をクリックしましょう。

 

 

『ナビゲーションメニューが更新されました』と表示されるとOKです。

 

 

では実際にどうのようにサイトに表示されているのかチェックして見ましょう。

 

『ライブプレビューで管理』をクリックしましょう。

 

 

ちゃんとカテゴリーの設定ができていることがわかりますね！

 

 

固定ページと同じように子ページもカテゴリーの設定をすることができました。

テンプレートと比較してみましょう。

 

テンプレート

 

 

実際のサイト

 

 

 

テンプレートと同じものを作ることができましたね！

以上でヘッダーのカテゴリー設定を終わりにしたいと思います。

次の記事⇒【ヘッダーの設定⑥】ヘッダー画像のアップロード方法