グローバルナビとは、サイトのヘッダー部分にあるナビメニューのことです。
![グローバルナビ画像](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-11-11.jpg)
始めは基本設定だけで手がいっぱいですが、慣れてくると自分のサイトをカスタマイズしたくなってきますよね。
SWELLは、カスタマズも簡単にすることができます。
しかし、最初からトップページをサイト型になど大きくカスタマイズにとりかかってしまうと、何かあった時に大変です。グローバルナビのように小さなところからのカスタマズがおすすめです。
この記事では、グローバルナビの基本設定とアイコンを使ったカスタマズを説明しています。
この記事を読んでわかること
目次
SWELL
グローバルナビの設定方法
グローバルナビの基本的な設定方法
STEP
メニュー設定画面を開く
ダッシュボード
![メニュー設定画面を開く](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-1-1.jpg)
STEP
新しいメニューを作成する
「新しいメニューを作成しましょう」をクリックする
![新しいメニューを作成する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-2-2.jpg)
STEP
グローバルナビを作成する
①メニュー名:グローバルナビ」と入力、②メニュー位置:クローバルナビに✔を入れる、③「メニュー作成」をクリックする
![グローバルナビを作成する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-3-3-1.jpg)
STEP
編集するメニューを選択する
「グローバルナビ(グローバルナビ)」を選んで「選択」をクリックする
![編集するメニューを選択する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-4-4.jpg)
STEP
グローバルナビにメニュー項目を追加する
メニュー項目追加
![グローバルナビにメニュー項目を追加する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-5-5-2.jpg)
STEP
子カテゴリーの設定(子カテゴリーがある場合のみ)
子カテゴリーの項目を、マウスで掴み右にずらす
![子カテゴリーの設定(子カテゴリーがある場合のみ)](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-18-18.jpg)
STEP
グローバルナビ(ヘッダメニュー)が設定できました
![グローバルナビ(ヘッダメニュー)が設定できました](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-6-6.jpg)
メニュー下に英語表記を入れる方法
STEP
表示オプションを開く
![表示オプションを開く](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-7-7.jpg)
STEP
「説明」に✔を入れる
![「説明」に✔を入れる](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-8-8.jpg)
STEP
英語表記を入力する
英語表記を入れたい項目の右側の▼をクリック
![英字を入力する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-9-9.jpg)
STEP
グローバルナビ(ヘッダメニュー)の下に英字が入りました
![グローバルナビ(ヘッダメニュー)の下に英字が入りました](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-10-10.jpg)
メニューにアイコンを付けてカスタマイズする方法
STEP
アイコンを設定する
アイコンを入れたい文字の前に、アイコンのショートコードを入力する
![アイコンを設定する](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-12-12.jpg)
であれば、「ショートコード」は
![アイコンのショートコード](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-19.jpg)
「FontAwesomeのアイコン」を使う方法
STEP
「FontAwesomeのアイコン」を使うためのSWELLの設定をする
①SWELL設定
![「FontAwesomeのアイコン」を使うためのSWELLの設定をする](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-13-13.jpg)
これで、FontAwesomeのアイコンが使えるようになります
STEP
アイコンの情報をコピーする
「Copy Code Snippet」と出る
」コピー完了![アイコンの情報をコピーする](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-16-16.jpg)
STEP
ショートコードにコードを貼り付ける
「ナビゲーションラベル」の文字の前にアイコンのショートコードを貼る
であれば、「ショートコード」は
![アイコンのショートコード](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-20.jpg)
![ショートコードにコードを貼り付ける](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-21.jpg)
STEP
グローバルナビ(ヘッダメニュー)の前にアイコンが入りました
![グローバルナビ(ヘッダメニュー)の前にアイコンが入りました](https://webnext.info/wp-content/uploads/2023/06/swell-header-menu-11-11.jpg)
まとめ
今回はグローバルナビの基本的な設定方法とアイコンと英語表記を入れるカスタマズを紹介しました。
アイコンを入れただけなんですが、すごく変わった気がします。
ぜひ、グローバルナビのカスタマイズに挑戦してみて下さい。