【WordPress】　ブログ整理整頓（ヘッダーメニュー）

目　次

ヘッダー制作

　ブログ開設後、しばらくの間ヘッダーメニュー（グローバルナビ［ゲーション］メニュー）を設けていなかったが、カテゴリー、タグ、パンくずリストよりも目につく部分なので、遅ればせながら設けることにした。　

Cocoon　『グローバルナビのメニューを設定する方法』（wp-cocoon.com/header-menu/）

　WordPress　外観　－　メニューでメニューを作成（例えばメニュー名：header）。
　今のところメニュー項目は以下の３つ。

　ついでに

Cocoon　『グローバルナビに補足説明文を記入する方法』（wp-cocoon.com/global-menu-item-caption/）

にもしたがい、画面の一番上にある表示オプションの「詳細メニュー設定を表示」の「説明」にチェックを入れて、
　各メニュー項目の「説明」に各々TOPICS、TRAVEL、DATAと記入。

　サブメニュー（副項目）は、メニュー項目の右側にある矢印をクリックして、「移動」の「○○○　下の階層」を選択すればＯＫ。
　（今のところ）メニュー項目「おでかけ」の下の

がサブメニュー。

　注意すべき点は、スマートフォンなどのモバイルではサブメニューが表示されない点。仕様のようだからしようがない。

　その代わりモバイルメニュー（サイドメニューなどがある）の横三本バー（ハンバーガーメニューという名がある）をタップするとサブメニューが表示される。

　モバイルメニューは、使用するテーマによって違うようだが、Cocoonの場合、フッターメニューがデフォルトだった。

　が、やはり画面の下よりも上のほうが目につくので、
　Cocoon設定　－　モバイルのモバイルメニューからヘッダー・フッターモバイルボタンに変更した。

　モバイルボタンの「サイトヘッダーロゴを表示する」はチェックしたまま。

　フッターメニューのうちハンバーガーメニューがヘッダーメニューの左上、検索ボタンが右上に移り、間（真ん中）にヘッダーロゴが入る。フッターメニューには新たにシェアボタンが加わった。

　当初はWordPressの外観　－　ヘッダーや外観　－　背景をいじっていたが、テーマ側で設定したほうが無難。
　Cocoon設定のヘッダーロゴ、ヘッダー背景画像に各々適当な画像をアップロードした。

　肝心のメニューの作成は、（WordPressを使い始めた当初分かりにくかった部分だが、）メニュー項目を追加の

から適宜選択して、右のメニュー構造へ移していく（チェックしてメニューに追加）。

　例えば、メニュー項目「おでかけ」は、カテゴリーの「LAND（風土）」にチェックを入れて右へ移し、名前（ナビゲーションラベル）を変えたもの。
　　追）その後、カテゴリー変更して、「おでかけ」は固定ページに変えた

　ひととおりメニューを作成し終えたら、
　メニュー設定　－　メニューの位置のヘッダーメニューとヘッダーモバイルメニューにチェックを入れる。
　位置の管理から選んでも同じ。

　位置の管理は、下の画面のとおり。

　フッターについては以下のページにまとめたが、フッターモバイル［ボタン］はいじらない。

　なお、メニュー項目を増やしすぎると、スマートフォンだとメニューが画面の多くを占有してしまうので、最大４～６ぐらいに抑えたほうが良さそう。