グローバルナビ(ヘッダーメニュー)の設定方法

グローバルナビ(ヘッダーメニュー)の設定方法
記事上のウィジェットエリア

このページでは、グローバルナビ(ヘッダーメニュー)の基本的な設定方法を解説していきます。

グローバルナビとは、PCで表示した時にヘッダーに表示されるナビゲーションのことです。

ヘッダーメニュー
グローバルナビ

スマホ表示時、グローバルナビは開閉メニューの中へ移動する仕様となっています。

グローバルナビ(SPメニュー内)
目次前広告表示エリア
目次

ヘッダーメニューの設定方法

まずはメニューの設定画面へ移動しましょう。管理画面の左メニューから「外観」>「メニュー」と進んでください。

外観-メニュー
「外観」 > 「メニュー」を選択

「メニュー」を選択すると、メニューを設定できる画面に移動します。

【1】メニューを作成する

初めてメニューを作成する場合は、以下のような画面が表示されているかと思います。

メニューの作成
「メニュー」画面
  1. 「①」の入力エリアに、今回作成するグローバルナビ用メニューの名前を入力してください。わかりやすく、「グローバルナビ」や「ヘッダーメニュー」などでいいでしょう。
  2. メニュー名が入力できたら、「②」の「メニューを作成」ボタンをクリックして、メニューを作成してください。

【2】メニュー項目を選択・追加する

次に、先ほど作成したメニューに表示したい項目を追加していきます。

固定ページをメニューに追加する場合

メニューを選択
「メニュー」画面
  1. 「①」のエリアから、メニューに追加したい固定ページにチェックを入れます。
  2. チェックが入った状態で、「メニューに追加」ボタンをクリックします。

固定ページ以外を追加したい場合は、「カテゴリー」タブ や「カスタムリンク」タブ を展開してメニュー項目を選択・入力してください。

【3】メニューの位置を選択して保存

メニューの項目が追加できたら、最後に「メニューの位置」を選択し、保存します。

メニューの位置選択
「メニュー」画面
  1. 「①」のエリアにSWELLで設定可能な各メニューが表示されているので、「グローバルナビ」を選択しておきましょう。
  2. 「メニューを保存」ボタンをクリックすると、メニューの状態が保存されます。

「メニューの位置」を選択しない場合、グローバルナビとしては表示されないので注意してください。

【4】子メニューの設定方法について

PCで表示されているグローバルナビに「子メニュー」を設定すると、マウスホバーした際に親メニューの下にふわっと子メニューが表示されます。

子メニューの設定方法は簡単で、追加済みのメニュー項目をマウスで掴み、ドラッグして横にずらすだけです。

子メニューの設定
子メニューを設定した状態

上画像のオレンジで囲んだメニュー項目のように、少しだけ右にずれた状態となればOKです。

【5】英語表記を追加する方法

当サイトのグローバルナビのように、メニュー名の下に英語表記を加えることもできます。

当サイトのグローバルナビ
当サイトのグローバルナビ

各メニューの「説明」という設定項目にて小さく表示されるテキストを設定できます。

メニューの英語入力エリア
  1. 各メニュータブの右端にある「(小さな三角アイコン)」をクリックすると、各メニューの詳細設定パネルが開きます。
  2. その中の「説明」と表示されたテキストエリアにて、メニューの英語表記を入力してください。
了

もちろん、大きく表示する方を英語にして小さく表示する方を日本語にしてもOKです。

メニューに「説明」欄がない場合

実はこの「説明」欄はデフォルト状態では非表示になっていますので、以下の手順を参考にして表示状態へ切り替えてください。

  1. まず、メニューの編集画面の右上に表示されている「表示オプション」をクリックします。
  2. 上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。
メニューの説明を表示
「表示オプション」をクリックした状態

スマホでもヘッダーメニューを表示したい場合

冒頭で、「グローバルナビ」はスマホで表示した際に開閉メニュー内に移動すると説明しました。

しかし、スマホ表示でもヘッダー部分にナビゲーションを表示させることができるようにしています。

スマホヘッダーメニュー

スマホ用ヘッダーメニューを設定する方法

基本的には、グローバルナビの設定手順と同じです。
異なるのは、「メニューの位置」を、「ヘッダーメニュー(スマホ)」にチェックするという点だけです。

グローバルナビと同じメニューを表示させたい場合は、グローバルナビ用に作成したメニューで、「グローバルナビ」と「ヘッダーメニュー(スマホ)」の両方にチェックを入れておきましょう。

スマホヘッダーメニュー
「外観」>「メニュー」

スマホ用ヘッダーメニューでは、子メニューは非表示となります。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次