![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
では前回に続き、ヘッダー部分を見ていきましょう^^
今回設定するのは以下の2箇所ですね。
SNSアイコンとナビゲーションを設定していきましょう。
- キャッチコピー
- ロゴ
- SNSアイコン
- ナビゲーション
- メインビジュアル
- 記事スライダー
![ヘッダー構成図](https://shares-hp.com/wp-content/uploads/2022/09/11-4-1024x447.jpg)
![ヘッダー構成図](https://shares-hp.com/wp-content/uploads/2022/09/11-4-1024x447.jpg)
サイト上部ヘッダーの設定
③SNSアイコン
ここでは皆さんが開設しているSNSにリンクを貼ることができます。
初期では「RSSフィード」と「検索アイコン」が表示されていますね。
![初期では「RSSフィード」と「検索アイコン」が表示されていますね。](https://shares-hp.com/wp-content/uploads/2022/09/0.jpg)
![初期では「RSSフィード」と「検索アイコン」が表示されていますね。](https://shares-hp.com/wp-content/uploads/2022/09/0.jpg)
まずはこれまで通り
![](https://shares-hp.com/wp-content/uploads/2022/09/2-7-4-1024x860.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-7-4-1024x860.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-8-1-1024x842.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-8-1-1024x842.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-5-1-1024x843.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-5-1-1024x843.jpg)
ちなみに全てURLを入れるとこんな感じになります笑
![ちなみに全てURLを入れるとこんな感じになります笑](https://shares-hp.com/wp-content/uploads/2022/09/1-6.jpg)
![ちなみに全てURLを入れるとこんな感じになります笑](https://shares-hp.com/wp-content/uploads/2022/09/1-6.jpg)
④ナビゲーション
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
では次に「ナビゲーション」を見ていきましょう。
「ヘッダーナビゲーション」や「グローバルナビゲーション」とも言われます。個人的には「G(ジー)ナビ」と読んでます。
![](https://shares-hp.com/wp-content/uploads/2022/09/1-7-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/1-7-1.jpg)
![3箇所です。](https://shares-hp.com/wp-content/uploads/2022/09/2-9-1024x442.jpg)
![3箇所です。](https://shares-hp.com/wp-content/uploads/2022/09/2-9-1024x442.jpg)
メニュー名の所に→ 「gNavi」 と入力してください。
※わかりやすい名前だったらなんでも大丈夫です。
「グローバルナビ」にチェック。
ここはメニューを表示させたい場所を決めます。
「メニューを作成」をクリック
※新しいメニューを作成する事で、グローバルナビゲーションにはこのメニューを表示。
フッターナビゲーションにはこのメニューを表示と切り分ける事が可能です。
![最後に「メニューを保存」をクリックしてください。](https://shares-hp.com/wp-content/uploads/2022/09/3-6-1024x445.jpg)
![最後に「メニューを保存」をクリックしてください。](https://shares-hp.com/wp-content/uploads/2022/09/3-6-1024x445.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
ここで一旦どんなモノがメニューにできるか確認してみましょう。
固定ページ
今は「記事一覧」、「トップページ」しかありませんが、今後「会社案内」や「料金案内」、「お問い合わせ」などのページを作成していくので、作成後、追加していきましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/1-8-1-1024x806.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/1-8-1-1024x806.jpg)
今後「会社案内」や「料金案内」、「お問い合わせ」などのページを作成していくので、作成後、追加していきましょう。
投稿
こちらも今は「Hello world」しか表示されてないですね。
投稿はブログ記事だと思ってください。日々投稿していくものが投稿としてこちらに表示されます。
ただ、あまり使う事はないですね。
![](https://shares-hp.com/wp-content/uploads/2022/09/2-10-1-1024x801.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-10-1-1024x801.jpg)
投稿はブログ記事だと思ってください。日々投稿していくものが投稿としてこちらに表示されます。
ただ、あまり使う事はないですね。
カスタムリンク
カスタムリンクは自由にリンク先を決める事ができます。
別のサイトに移動させたいとか、キャンペーンページを作った際に使用します。
![](https://shares-hp.com/wp-content/uploads/2022/09/4-5-1-1024x816.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/4-5-1-1024x816.jpg)
別のサイトに移動させたいとか、キャンペーンページを作った際に使用します。
カテゴリー
そして最後はカテゴリー。これも今は設定してないので「未分類」しかありませんね。
特定のカテゴリー一覧ページにリンクしたい時に使用します。
![](https://shares-hp.com/wp-content/uploads/2022/09/5-5-1-1024x826.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/5-5-1-1024x826.jpg)
特定のカテゴリー一覧ページにリンクしたい時に使用します。
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
ではとりあえず、「固定ページ」から
メニューを選択していきましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/1-9-1-1024x814.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/1-9-1-1024x814.jpg)
![右側に「記事一覧」と「トップページ」が表示されるので、位置を上下移動させましょう。
トップページをドラッグ&ドロップで記事一覧を上下を入れ替えてください。
位置が変わるので、問題なければ右下の「メニューを保存」を押しましょう。](https://shares-hp.com/wp-content/uploads/2022/09/2-11-1024x443.jpg)
![右側に「記事一覧」と「トップページ」が表示されるので、位置を上下移動させましょう。
トップページをドラッグ&ドロップで記事一覧を上下を入れ替えてください。
位置が変わるので、問題なければ右下の「メニューを保存」を押しましょう。](https://shares-hp.com/wp-content/uploads/2022/09/2-11-1024x443.jpg)
トップページをドラッグ&ドロップで記事一覧を上下を入れ替えてください。
位置が変わるので、問題なければ右下の「メニューを保存」を押しましょう。
実際のサイトを見てみましょう。そんなに変わり映えはしませんが、トップページと記事一覧のメニューが左右逆転しているのが確認できますか?
![画像に alt 属性が指定されていません。ファイル名: 4-6-1024x443.jpg
実際のサイトを見てみましょう。そんなに変わり映えはしませんが、トップページと記事一覧のメニューが左右逆転しているのが確認できますか?
管理画面で上に設置すると、実際の表示の時には左に表示されます。
ここでメニューの順番を決めましょう。](https://shares-hp.com/wp-content/uploads/2022/09/4-6-1024x443.jpg)
![画像に alt 属性が指定されていません。ファイル名: 4-6-1024x443.jpg
実際のサイトを見てみましょう。そんなに変わり映えはしませんが、トップページと記事一覧のメニューが左右逆転しているのが確認できますか?
管理画面で上に設置すると、実際の表示の時には左に表示されます。
ここでメニューの順番を決めましょう。](https://shares-hp.com/wp-content/uploads/2022/09/4-6-1024x443.jpg)
トップページと記事一覧のメニューが左右逆転しているのが確認できますか?
管理画面で上に設置すると、実際の表示の時には左に表示されます。
ここでメニューの順番を決めましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
これでSNSの設定とメニューの設定は終了です。
メニューの設定は固定ページ作成後随時設定すると思いますので、場所と設定方法を確認しておきましょう^^