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