ブログ整理整頓(ヘッダーメニュー)

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

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

 WordPress 外観 - メニューでメニューを作成(例えばメニュー名:header)。
 今のところメニュー項目は以下の3つ。

  •  時事
  •  おでかけ
  •  データ

 ついでに

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

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

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

  •  鉄道 RAIL
  •  空 AIR

がサブメニュー。

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

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

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

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

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

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

ヘッダーロゴ

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

メニュー作成

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

  •  固定ページ
  •  投稿
  •  カスタムリンク
  •  カテゴリー

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

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

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

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

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

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

タイトルとURLをコピーしました