ブログを始めるために、ヘッダーメニューバーを作ります。メニューバーの設置方法は、テーマによって異なります。ここではWordPressテーマ「Cocoon」のヘッダーメニューバーの作り方の紹介をします。
ヘッダーメニューバーの作り方とカスタマイズ
ヘッダーメニューバーとは？
メニューがあると記事へのアクセスが便利そうですね。
どうやって設置するの？
とても簡単です。
①②メニューの作成方法
①「外観」⇒②「メニュー」を選択
③名前をつけて「メニューを作成」
③「新しいメニューを作成しましょう。」⇒「メニューを作成」
メニュー名はお好みで指定してください。
メニューに名前をつけて「メニューを作成」ボタンをクリックします。
④メニューに項目を追加
④「メニュー項目を追加」パネルから項目を追加します。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリ
お好みでメニュー項目を追加してください。
ドラッグアンドドロップや「メニューに追加」ボタンを押して、任意にメニューの作成ができます。
⑤メニュー階層や順番の調整
⑤「メニュー構造」のパネルでは、「メニュー階層の調整」や「表示する順番の入れ替え」がマウスで操作できます。
⑥メニュー設定
メニューの表示位置を指定します。
ここでは「ヘッダーメニュー」を選択します。
⑦「メニューを保存」ボタンを押してください。
最初の画像のメニューが出来てます。デザインを確認します。
ヘッダーのカスタマイズ設定
「Cocoon設定」⇒「ヘッダー」からヘッダー設定をします。
ヘッダーの「位置」や「色」や「幅」などが設定可能です。このサイトでは、ほぼデフォルトのまま利用させて頂いてます。
ヘッダーレイアウト
センターロゴ（スリムトップメニュー）
センターロゴ（デフォルト）
お好みで設定してください。
ヘッダーの背景色について
「Cocoon設定」の２箇所で、以下のように指定しています。
「Cocoon設定」⇒
「全体」⇒「サイトキーカラー」⇒「色を選択」：「#66a5ad」
「ヘッダー」⇒「グローバルナビメニュー色」：「#07575b」
グローバルナビ幅を調整
「Cocoon設定」⇒「ヘッダー」⇒「グローバルナビメニュー幅」にて
グローバルナビメニュー幅を調整できます。
このサイトではデフォルトです。
お好みで指定してください。
メニューに補足説明を表示
メニューアイテムに補足説明を表示するには、公式サイトの記事を参照してください。
とても分かりやすくて簡単です。
①「外観」⇒②「メニュー」を選択した画面です。
右上の「表示オプション▼」をクリックします。
「☑説明」にチェックを入れます。
「説明」の欄が現れますので、お好みで文字を入力します。
テーマ「Cocoon」の場合、ここでの説明が「メニューの補足説明」として素敵に表示されます。
すべてのメニュー項目に説明を入力してから「メニューを保存」ボタンを押してください。
デザインを確認します。
まとめ
以上でヘッダーメニューバーの設置とカスタマイズが完了です。フッターメニューなども同様です。お好みで設定してください。
多少、ブログサイトらしくなってきましたね。
次回は、WordPressプラグイン基本的な使い方について、”Hello Dolly”を使って演習します。
