最近のホームページデザインといえば、ブログタイトルの下にライン状に配置されたメニューバーが印象的ですね。あれは『グローバルメニュー』と言うそうです。
無料ブログサービスを使っていた時は、このメニューの設置にはHTMLとCSSを追加する作業が必要でした。WordPressに変えてからは、ドラッグ操作で簡単に設置ができるようになりました。
／
グローバルメニューとは？
グローバルメニューというのは、サイトを訪れたユーザーが、サイト内のどこにいても迷子にならないよう設置された、全ページに共通して表示するメニューのことです。
どうも決まった名称は無いらしく、さまざまな呼び方が使われています。
これ、実態は『リスト＝箇条書き』なんですよ。
- グローバルメニュー
- グローバルナビゲーション
- ヘッダーメニュー
- メインメニュー
- その他
HTMLとCSSで作られるグローバルメニュー
もともとホームページはHTML言語を使って作られています。
ディスプレイに映し出す際のデザインを指定するのがCSSの役割で、ブラウザソフトがこれらの内容を読みとってディスプレイに表示しています。
私たちがWebサイトで目にするグローバルメニューは、本来「箇条書き」として構成されたものを、CSSを使って「メニューっぽく」見せているのが実態です。
ザックリとグローバルメニューを知ろうとすると、こんな感じです。
でも、正直 面倒くさい！ です。
それが！ WordPressならドラッグ操作で設置できます。
WordPressでグローバルメニューを設定する
WordPressのグローバルメニューは、テーマによって配置やデザインが左右されます。
このブログはCocoonを使っていてますので、記事はCocoonを使っている前提で書いていますのでご承知おきください。
メニュー設置の前の確認事項
メニュー項目に選択できるのは次の通りです。
- 固定ページ
- 固定ページとして作成したページにリンクを設定できます。
固定ページは、ホーム、問い合わせ、利用規約に使われることが多いですね。 - 投稿ページ
- 特定の投稿記事に対してリンクを設定することができます。
- カスタムリンク
- 任意のURLに対してリンクを設定することができます。
- カテゴリー
- 登録してあるカテゴリに対してリンクを設定することができます。
グローバルメニューの設定手順
グローバルメニューの設定は、WordPressの管理画面で行います。
- 管理画面［外観］→［メニュー］を開きます。
- ［新しいメニューを作成しましょう］をクリックします。
- ［メニュー名］を入力し、［メニューを作成］ボタンをクリックします。
- ［メニュー項目を追加］の中から、表示したい項目を選択して［メニューに追加］を繰り返します。
- 表示順序や階層を、ドラッグ操作で調整します。
- ［メニュー設定］の［メニューの位置］で、必ず［ヘッダーメニュー］にチェックを入れます。（ここにチェックがないとヘッダーに表示されません）
- 準備ができたら、最後に［メニューを保存］ボタンをクリックして完成です！
Cocoonのヘッダー設定
Cocoonでは［ヘッダー］の設定でグローバルメニューの表示方法をカスタマイズできます。
Cocoon設定 → ヘッダー
ヘッダーレイアウト
［ヘッダーレイアウト］ではグローバルメニューの表示位置を変えられます。
ヘッダーとグローバルメニューの色
Cocoonでは、ヘッダーとグローバルメニューの色をカスタマイズできます。
選択しているスキンによっては変更できない場合があります。
グローバルメニューのメニュー幅
グローバルナビメニューとサブメニューの幅を指定できます。
