SWELLでグローバルナビ(ヘッダーメニュー)の設定方法【PC・スマホ別】｜アイコンの挿入でおしゃれさUP！
「グローバルナビのカスタマイズ方法は？」
「スマホでもグローバルナビを設定したい」
「グローバルナビにアイコンやボタンを設置できる？」
この記事では、そんな方に向けて、SWELLでグローバルナビ（ヘッダーメニュー）の設定方法を解説します。
かめコンパスこんにちは、かめコンパスです！
この記事を読めば、あなたも簡単に
- グローバルナビをおしゃれにカスタマイズ
できるようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ブログ回遊率UPもできました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
グローバルナビを設定できるメニュー機能の用語と使い方が分からない場合は、さきに下の記事からご覧ください。
また以下の記事では、SWELL導入後にやるべき初期設定をまとめて紹介しています。
SWELLグローバルナビの設定方法
SWELLでグローバルナビ（ヘッダーメニュー）を設定する方法を、以下のデバイス画面別で紹介します。
【PC編】グローバルナビの設定方法
SWELLでPC用のグローバルナビ（ヘッダーメニュー）を設定する方法は、下記のとおりです。
WordPress管理画面で、外観⇒メニューの順にクリックする
- 「新しいメニューを作成しましょう」をクリック
- メニュー名を入力※なんでもOK
- 「グローバルナビ」に✔
- メニューを作成をクリックする
- をプルダウン
- 「すべて表示」をクリック
- グローバルナビに設定したい項目に✔
- メニューに追加をクリックする
- 追加された項目を並び替える
- メニューを保存をクリックする
これで、PC用のグローバルナビ（ヘッダーメニュー）の設定完了です。
【スマホ編】グローバルナビの設定方法
SWELLでスマホ用のグローバルナビ（ヘッダーメニュー）を設定する方法は、下記のとおりです。
WordPress管理画面で、外観⇒メニューの順にクリックする
- 「新しいメニューを作成しましょう」をクリック
- メニュー名を入力※なんでもOK
- 「スマホ用ヘッダー」に✔
- メニューを作成をクリックする
- をプルダウン
- 「すべて表示」をクリック
- スマホ用ヘッダーに設定したい項目に✔
- メニューに追加をクリックする
- 追加された項目を並び替える
- メニューを保存をクリックする
これで、スマホ用のグローバルナビ（ヘッダーメニュー）の設定完了です。
SWELLグローバルナビをおしゃれにカスタマイズ！
先ほど設定したグローバルナビ（ヘッダーメニュー）をおしゃれにカスタマイズしていきます。
それぞれ詳しく解説します。
アイコンを挿入する
SWELLのグローバルナビ（ヘッダーメニュー）にアイコンを挿入するには、ナビゲーションラベルにショートコードを入力します。
- 先ほど作成したグローバルナビメニューを開く
- アイコンを挿入したい項目のをプルダウンする
使用するショートコードは、以下のとおり。
[icon 〇〇] または [アイコン 〇〇]
※〇〇にアイコンのクラス名を入力する2つあるショートコードのうちどれかを使ってね
SWELLで使えるアイコンとクラス名は公式サイトで紹介されていますが、本記事でも一部抜粋して紹介します。
| アイコン | クラス名 | アイコン | クラス名 |
|---|---|---|---|
| icon-swell | icon-wordpress | ||
| icon-phone | icon-mail | ||
| icon-search | icon-cart | ||
| icon-person | icon-download | ||
| icon-megaphone | icon-check | ||
| icon-home | icon-bubbles | ||
| icon-caret-down | icon-caret-up | ||
| icon-caret-left | icon-caret-right | ||
| icon-chevron-down | icon-chevron-up | ||
| icon-chevron-left | icon-chevron-right |
かめコンパスおしゃれなアイコンが豊富！
ショートコードの使い方の例として、プロフィールの左側にを表示させたい場合は、ナビゲーションラベルに以下のように入力します。
[アイコン icon-person] プロフィール
ショートコードを入力し、メニューを保存をクリックすれば完了です。
かめコンパスアイコンがあると視認性がアップするからおすすめだよ
ドロップダウンメニュー(階層構造)を作る
SWELLのグローバルナビ（ヘッダーメニュー）には、以下の画像のように項目を右にスライド配置させることで、ドロップダウンメニュー（階層構造）を作ることができます。
階層構造を作り、メニューを保存をクリックすれば完了です。
かめコンパスマウスカーソルを上に持ってこないとドロップダウンメニューが表示されないから、あまりおすすめしないかな…
サブテキストを入力する
SWELLのグローバルナビ（ヘッダーメニュー）にサブテキストを入力するには、説明にテキストを入力します。
- 先ほど作成したグローバルナビメニューを開く
- アイコンを挿入したい項目のをプルダウンする
＼クリックで開く／
「説明」がない場合はこちら
- 「表示オプション」をプルダウン
- 「説明」に✔する
「説明」にサブテキストを入力し、メニューを保存をクリックすれば完了です。
かめコンパスサブテキストは短めのほうがユーザーに分かりやすく伝わるよ
ボタンを設置する
SWELLのグローバルナビ（ヘッダーメニュー）にボタンを設置するには、
- 手順①：ブログパーツでボタンの作成
- 手順②：ウィジェットからボタンを配置
で可能です。
手順①：ブログパーツでボタンの作成
WordPress管理画面で、ブログパーツ⇒新規投稿を追加の順にクリックする
+をクリックする
SWELLボタンをクリックする
ボタンにテキストとリンク先URLを入力する
公開をクリックする
これでボタンの作成完了です。
WordPress管理画面に戻り、ブログパーツ⇒ブログパーツの順にクリックする
作成したブログパーツの呼び出しコードをコピーしておきます。
かめコンパス呼び出しコードは後で使うよ
手順②：ウィジェットからボタンを配置
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
- 「カスタムHTML」のをプルダウン
- 「ヘッダー内部」をクリック
- ウィジェットを追加をクリックする
SWELLグローバルナビでよくある質問
ここからはSWELLのグローバルナビ（ヘッダーメニュー）でよくある質問に回答します。
かめコンパス気になる質問をクリックしてね
グローバルナビを非表示にする方法は？
SWELLでグローバルナビを非表示にする方法は、メニュー項目を1つも追加しなければできます。
- 「新しいメニューを作成しましょう」をクリック
- メニュー名を入力※なんでもOK
- 「グローバルナビ」に✔
- メニューを作成をクリックする
メニュー項目を追加せず、メニューを保存をクリックする
これでグローバルナビを非表示にできます。
グローバルナビが表示されない原因は？
SWELLでグローバルナビが表示されない原因は、メニューの位置を設定していないからです。
- PCで表示する場合…グローバルナビ
- スマホで表示する場合…スマホ用ヘッダー
に✔すれば、表示されるようになります。
SWELLでグローバルナビの設定方法まとめ
今回は、SWELLでグローバルナビ（ヘッダーメニュー）の設定方法を紹介しました。
グローバルナビを設定し終えたら、あわせてヘッダーのカスタマイズも行いましょう。
また、本記事で紹介した内容と同じくらい重要なフッターの設定がまだの人は、以下の記事もご覧ください。
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
・ ・ ・
＼当ブログ愛用のWordPressテーマ／
- 記事を書くスピードが1段階アップ
- サイトの表示速度が圧倒的に速い
- 独自のサイト高速化でSEO評価が向上
- デザインがシンプルでおしゃれ
- SWELL独自のブロック機能が優秀
↓ ↓ ↓
この記事が気に入ったら
フォローしてね！
コメント