【SWELL非公式マニュアル】グローバルメニューの設定

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

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

ヘッダーメニュー
SWELL公式サイト

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

グローバルナビ(SPメニュー内)
SWELL公式サイト
目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

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

管理画面の左メニューから「外観」>「メニュー」を選択します。

外観-メニュー
SWELL公式サイト

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

STEP

メニューを作成する

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

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

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

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

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

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

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

STEP

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

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

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

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

STEP

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

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

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

子メニューの設定
SWELL公式サイト

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

STEP

英語表記を追加する方法

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

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

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

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

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

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

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

  1. まず、メニューの編集画面の右上に表示されている「表示オプション」をクリックします。
  2. 上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。
メニューの説明を表示
SWELL公式サイト
  • WordPressのバージョンによっては「説明」ではなく「概要」となっている可能性があります。

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

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

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

スマホヘッダーメニュー
SWELL公式サイト

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

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

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

スマホヘッダーメニュー
SWELL公式サイト
  • スマホ用ヘッダーメニューでは、子メニューは非表示となります。

SWELL公式マニュアル:グローバルナビ(ヘッダーメニュー)の設定方法

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次