最近のホームページデザインといえば、ブログタイトルの下にライン状に配置されたメニューバーが印象的ですね。あれは『グローバルメニュー』と言うそうです。
グローバルメニューとは？
グローバルメニューというのは、サイトを訪れたユーザーが、サイト内のどこにいても迷子にならないよう設置された、全ページに共通して表示するメニューのことです。
どうも決まった名称は無いらしく、さまざまな呼び方が使われています。
これ、実態は『リスト＝箇条書き』なんですよ。
- グローバルメニュー
- グローバルナビゲーション
- ヘッダーメニュー
- メインメニュー
- その他
HTMLとCSSで作るグローバルメニュー
もともとホームページはHTML言語を使って作られています。ディスプレイに映し出す際のデザインを構成するのがCSSの役割で、ブラウザソフトがこれらの内容を読みとってディスプレイに表示しています。
こうした言語の組み立てを、ひとつひとつ自分で入力して作成していく作業を「タグ打ち」と言いますが、知識が無いと難しいことや面倒なこともあり、ホームページ作成ソフトが作られました。
有名なソフトには『ホームページビルダー』があります。
ネットの高速化が進んだことで、PCにソフトをインストールせず、ネット上の機能を使ってホームページの作成ができる技術が開発され、そのひとつがWordPressというわけです。
本来、HTMLとCSSを使ってメニューを作る手順は次の通りです。
- HTMLで箇条書きタグ（ul、li）を使ってメニュー項目を並べ、リンクを設定する。
- CSSでメニューっぽくスタイルを設定する。
それでは実際に作成してみましょう。
HTMLで箇条書きを作る
<ul>
<li>HOME</li>
<li>LIFE</li>
<li>MOVIE</li>
<li>TRAVEL</li>
</ul>CSSを設定していない場合は、縦方向に並んで表示されます。
- HOME
- LIFE
- MOVIE
- TRAVEL
縦書きの箇条書きを【横に並べる】よう、CSSのdisplay:flexで指定します。
横に並べるCSSを作り、HTMLの対象タグにクラス名を追加
<ul class="sample-wrap1">
<li class="item1">HOME</li>
<li class="item1">LIFE</li>
<li class="item1">MOVIE</li>
<li class="item1">TRAVEL</li>
</ul>.sample-wrap1{
display: flex; /*横並び指定*/
justify-content: center;
padding: 0;
}
.item1{
width: 120px; /*メニュー幅*/
}その結果、箇条書きが横並びに表示されます。
- HOME
- LIFE
- MOVIE
- TRAVEL
それでは、ボタンっぽいデザインを設定してみましょう。
CSSを使ってデザインしてみましょう。
.item-design{
width: 120px;
border-left: 2px solid #666;
padding: 5px 15px;
list-style: none;
}- HOME
- LIFE
- MOVIE
- TRAVEL
.item-design{
width: 120px;
background: #008978;
color: #fff;
padding: 5px 15px;
list-style: none;
text-align: center;
}- HOME
- LIFE
- MOVIE
- TRAVEL
ザックリとグローバルメニューを知ろうとすると、こんな感じです。
でも、正直 面倒くさい！ ですよね。
それが！ WordPressならドラッグ操作で設置できます。
WordPressでグローバルメニューを設定する
WordPressのグローバルメニューは、テーマによって配置やデザインが左右されます。
このブログはCocoonを使っていてますので、記事はCocoonを使っている前提で書いていますのでご承知おきください。
メニュー設置の前の確認事項
メニュー項目に選択できるのは次の通りです。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
固定ページ
［固定ページ］として作成したページにリンクを設定できます。
固定ページは、ホーム、お問い合わせ、利用規約などに使われることが多いですね。
投稿
［特定の投稿記事］に対してリンクを設定することができます。
カスタムリンク
［任意の URL］に対してリンクを設定することができます。
カテゴリ
［登録してあるカテゴリ］に対してリンクを設定することができます。
グローバルメニューの設定手順
グローバルメニューの設定は、WordPressの管理画面で行います。
- 管理画面［外観］→［メニュー］を開きます。
- ［新しいメニューを作成しましょう］をクリックします。
- ［メニュー名］を入力し、［メニューを作成］ボタンをクリックします。
- ［メニュー項目を追加］の中から、表示したい項目を選択して［メニューに追加］を繰り返します。
- 表示順序や階層を、ドラッグ操作で調整します。
- ［メニュー設定］の［メニューの位置］で、必ず［ヘッダーメニュー］にチェックを入れます。（ここにチェックがないとヘッダーに表示されません）
- 準備ができたら、最後に［メニューを保存］ボタンをクリックして完成です！
Cocoonのヘッダー設定
Cocoonでは、ヘッダーの設定でグローバルメニューの表示方法がカスタマイズできます。
Cocoon設定 → ヘッダー
ヘッダーレイアウト
［ヘッダーレイアウト］ではグローバルメニューの表示位置を変えられます。
ヘッダーとグローバルメニューの色
Cocoonでは、ヘッダーとグローバルメニューの色をカスタマイズできます。
選択しているスキンによっては変更できない場合があります。
グローバルメニューのメニュー幅
グローバルナビメニューとサブメニューの幅を指定できます。
