WordPress(Cocoon)ヘッダーメニューバーの作り方とカスタマイズ

コクーン
ブログの始め方 (8)

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

ヘッダーメニューバーの作り方とカスタマイズ

ヘッダーメニューバーとは?

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

とても簡単です。

①②メニューの作成方法

①「外観」⇒②「メニュー」を選択

③名前をつけて「メニューを作成」

③「新しいメニューを作成しましょう。」⇒「メニューを作成」

メニュー名はお好みで指定してください。

メニューに名前をつけて「メニューを作成」ボタンをクリックします。

④メニューに項目を追加

④「メニュー項目を追加」パネルから項目を追加します。

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

お好みでメニュー項目を追加してください。
ドラッグアンドドロップや「メニューに追加」ボタンを押して、任意にメニューの作成ができます。

⑤メニュー階層や順番の調整

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

⑥メニュー設定

メニューの表示位置を指定します。
ここでは「ヘッダーメニュー」を選択します。

⑦「メニューを保存」ボタンを押してください。

最初の画像のメニューが出来てます。デザインを確認します。

ヘッダーのカスタマイズ設定

「Cocoon設定」⇒「ヘッダー」からヘッダー設定をします。

ヘッダーの「位置」や「色」や「幅」などが設定可能です。このサイトでは、ほぼデフォルトのまま利用させて頂いてます。

ヘッダーレイアウト

センターロゴ(スリムトップメニュー)

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

お好みで設定してください。

ヘッダーの背景色について

「Cocoon設定」の2箇所で、以下のように指定しています。

「Cocoon設定」⇒
「全体」⇒「サイトキーカラー」⇒「色を選択」:「#66a5ad」
「ヘッダー」⇒「グローバルナビメニュー色」:「#07575b」

グローバルナビ幅を調整

「Cocoon設定」⇒「ヘッダー」⇒「グローバルナビメニュー幅」にて
グローバルナビメニュー幅を調整できます。

このサイトではデフォルトです。

お好みで指定してください。

メニューに補足説明を表示

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

とても分かりやすくて簡単です。

①「外観」⇒②「メニュー」を選択した画面です。

右上の「表示オプション▼」をクリックします。

「☑説明」にチェックを入れます。

「説明」の欄が現れますので、お好みで文字を入力します。

テーマ「Cocoon」の場合、ここでの説明が「メニューの補足説明」として素敵に表示されます。

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

デザインを確認します。

まとめ

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

多少、ブログサイトらしくなってきましたね。

次回は、WordPressプラグイン基本的な使い方について、”Hello Dolly”を使って演習します。