ブログを始めるために、ヘッダーメニューバーを作ります。メニューバーの設置方法は、テーマによって異なります。ここではWordPressテーマ「Cocoon」のヘッダーメニューバーの作り方の紹介をします。
ヘッダーメニューバーの作り方とカスタマイズ
ヘッダーメニューバーとは?


メニューがあると記事へのアクセスが便利そうですね。
どうやって設置するの?

とても簡単です。
①②メニューの作成方法
①「外観」⇒②「メニュー」を選択

③名前をつけて「メニューを作成」
③「新しいメニューを作成しましょう。」⇒「メニューを作成」

メニュー名はお好みで指定してください。
メニューに名前をつけて「メニューを作成」ボタンをクリックします。

④メニューに項目を追加
④「メニュー項目を追加」パネルから項目を追加します。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリ
お好みでメニュー項目を追加してください。
ドラッグアンドドロップや「メニューに追加」ボタンを押して、任意にメニューの作成ができます。

⑤メニュー階層や順番の調整
⑤「メニュー構造」のパネルでは、「メニュー階層の調整」や「表示する順番の入れ替え」がマウスで操作できます。

⑥メニュー設定
メニューの表示位置を指定します。
ここでは「ヘッダーメニュー」を選択します。
⑦「メニューを保存」ボタンを押してください。
最初の画像のメニューが出来てます。デザインを確認します。

ヘッダーのカスタマイズ設定
「Cocoon設定」⇒「ヘッダー」からヘッダー設定をします。
ヘッダーの「位置」や「色」や「幅」などが設定可能です。このサイトでは、ほぼデフォルトのまま利用させて頂いてます。
ヘッダーレイアウト
センターロゴ(スリムトップメニュー)

センターロゴ(デフォルト)


お好みで設定してください。
ヘッダーの背景色について
「Cocoon設定」の2箇所で、以下のように指定しています。
「Cocoon設定」⇒
「全体」⇒「サイトキーカラー」⇒「色を選択」:「#66a5ad」
「ヘッダー」⇒「グローバルナビメニュー色」:「#07575b」

グローバルナビ幅を調整
「Cocoon設定」⇒「ヘッダー」⇒「グローバルナビメニュー幅」にて
グローバルナビメニュー幅を調整できます。
このサイトではデフォルトです。

お好みで指定してください。
メニューに補足説明を表示
メニューアイテムに補足説明を表示するには、公式サイトの記事を参照してください。

とても分かりやすくて簡単です。
①「外観」⇒②「メニュー」を選択した画面です。
右上の「表示オプション▼」をクリックします。

「☑説明」にチェックを入れます。
「説明」の欄が現れますので、お好みで文字を入力します。
テーマ「Cocoon」の場合、ここでの説明が「メニューの補足説明」として素敵に表示されます。

すべてのメニュー項目に説明を入力してから「メニューを保存」ボタンを押してください。
デザインを確認します。

まとめ
以上でヘッダーメニューバーの設置とカスタマイズが完了です。フッターメニューなども同様です。お好みで設定してください。

多少、ブログサイトらしくなってきましたね。
次回は、WordPressプラグイン基本的な使い方について、”Hello Dolly”を使って演習します。