ファーストビューにあたるメニューバーは、そのページにおける全体的な誘導にあたり、このメニューのユーザビリティ(使いやすさ)が悪くなると、集客にも悪影響を及ぼすほどの非常に重要な項目となっています。

今回は、Webサイト上部にあたる横並びのメニュー、メニューバー(別名：グローバルメニュー)の編集方法についてご紹介していきます。

 

 

1. メニューを変えたい

以下のような編集方法をご紹介します。

• メニューを追加する方法
• メニューに記載されている文字を変更する方法
• メニュー内に外部リンクを追加する方法

1-1. メニューの編集画面を表示

メニューを編集するには、まずは以下を表示させましょう。

【変更方法】
WordPress管理画面＞外観＞メニュー

1-2. メニュー項目を追加する

メニュー項目を追加する方法です。

メニュー編集画面「固定ページ」内より追加したい固定ページをチェック選択の上、「メニューに追加」ボタンをクリックします。すると、「メニュー構造」内に、選択した項目(固定ページ)追加されます。

こちら忘れがちですが、編集した後はこまめに「メニューを保存」ボタンを押して、編集内容を保存しましょう。

本番環境にアクセスして、実際に追加されている事と、メニューを実際にクリックして、リンク先が正しい事を確認します。

1-3. メニュー表示を変更する

メニュー表示(文字)を変更する方法です。

メニュー編集画面「メニュー構造」内にて、項目右の逆三角形をクリックし、ナビゲーションラベル内の文字を書き換えます。
編集終了後、「メニューを保存」ボタンをクリックします。

本番環境にアクセスして、該当項目が実際に編集されていることを確認します。

1-4. メニューに外部リンクを追加する

今までずっと運営してきたブログをメニューに追加したいなど、外部リンクをメニューに追加したい場合には、「カスタムリンク」を利用します。

メニュー編集画面の「カスタムリンク」項目内にて「URL」と「リンク文字列」を入力します。「URL」には、飛ばしたい外部リンクを入力し、「リンク文字列」には表示させるメニューの文字を入力します。入力後「メニューに追加」ボタンをクリックします。

メニュー構造に追加されていることを確認し、「メニューを保存」ボタンを押して、編集内容を保存します。

本番環境を確認し、実際にリンク先が正しく飛ぶことを確認します。

2. 子メニューを作りたい

各メニューをマウスオーバーすると、その下にメニューが出るような、子メニューの作り方をご紹介します。

メニュー編集画面の「固定ページ」内にて、子メニューにしたい固定ページにチェックを入れ、「メニューに追加」ボタンをクリックします。

追加した項目を、親メニューにしたい項目の真下に移動します。

子メニューにしたい項目を、少しだけ右ヨコにドラッグします。

すると、項目が右にズレた状態になります。これが子メニューの状態となります。編集が完了したら「メニューを保存」ボタンをクリックします。

本番環境で確認します。親メニューをマウスオーバーすると、その下に子メニューが表示されることを確認します。

3. 空メニューを作りたい

基本、親メニューはリンクが貼ってある状態ですが、そのリンクを空にして、クリックできないようにする方法「空メニュー」の作り方をご紹介します。

前述「1-4. メニューに外部リンクを追加する」でご紹介した時と同じように、カスタムリンクのメニュー項目を追加します。ただし、カスタムリンク内のURL欄は「#####」(ダミーリンクです。#####でなくても構いません)と入力して下さい。

追加したカスタムリンクの項目を、親メニューにします。さらに、必要に応じて子メニューを設置します。
また、カスタムメニュー編集項目右側の逆三角形のマークをクリックします。

URLに記載していた「#####」を削除して、空欄にします。この状態で「メニューを保存」ボタンを押し、編集内容を保存します。

本番環境で、親メニューの部分が空リンクになっていることを確認します。

4. メニューの文字を2行にしたい

このように、メニュー表記を2行で表示する方法をご紹介します。

メニュー構造内のナビゲーションラベルの改行したい位置で、<br/> と挿入します。
(こちらはHTMLで改行をする際に記述する「タグ」です)
編集が終わりましたら、メニューを保存します。こちらで完了です。

5. メニューバー編集方法まとめ

いかがでしたでしょうか？今回はメニューバーについてご紹介しました。
ここまでのおさらいです。

• メニューの編集する場所は WordPress管理画面＞外観＞メニュー より。
• 固定ページのメニューを追加したい場合は「固定ページ」内にてチェックの上、追加する。
• メニューの文字を変えるには「ナビゲーションラベル」を書き換える。
• これまでずっと使ってきたブログなど、外部リンクをメニューに追加したい場合は「カスタムリンク」より追加する。
• 子メニューを作るには、メニュー構造内で親メニューの下に置き、右ヨコにちょっとズラす(ドラッグする)。
• 空メニューを作るには、一旦URLを#####(ダミー)にしてカスタムリンクを項目追加し、メニュー構造内でURLを空欄にする。
• メニュー文字を2行にする際は、ナビゲーションラベルの改行したいタイミングで</br>を挿入する。

以上、お試し下さい！