【SWELL】グローバルナビ（グローバルメニュー）の横にアイコンを表示させる方法

SWELLでグローバルナビにアイコンを付けたいんけど…どうやって設定すればいいんだろう？

こんな疑問にお答えします。

本記事を書いているのは

• 副業ブロガー/アフィリエイター
  ブログ歴2年／現在3つのブログとTikTokを運用中
• WordPressブログ運用1ヵ月でアドセンス合格
  無料ブログ収益０円➤猛勉強➤WordPressブログ運営1ヵ月でGoogleアドセンス合格／収益化5桁達成
• SNSの総フォロワー：3万人超え
  TikTok開設2か月で収益化達成＆5か月フォロワーで3万人収益6桁達成／X開設3ヵ月でフォロワー1,500人

※記事内の不明な点・質問などは、XやInstagramのDMで気軽に聞いてくださいね！

当サイトでは、WordPressテーマSWELLに関して、導入・設定・各使い方などを丁寧に解説しています。

SWELLのダウンロード方法や使い方に関しては、こちらの記事で詳しく紹介しています。

あわせて読みたい

【図解】SWELLの購入方法・導入手順｜インストール方法をわかりやすく解説 SWELLの購入しようと決めたけど、購入方法や設定の仕方がよく分からない… という方でも大丈夫です！ この記事では、SWELLの購入方法や導入手順について、図解でわかりや…

あわせて読みたい

【最新版】SWELLマニュアル｜導入・設定・ブロックや機能の使い方を丁寧に解説 SWELLを導入したいけど、やり方がイマイチ分からない… ブロックなど多機能だけど、どう使ったらいいか分からない… そんな悩みにお答えします！ 　 本記事では、WordPres…

SWELLのグローバルメニューにアイコンを設定する

グローバルナビとは、ブログやサイトの一番上に表示されるメニューのこと。

SWELLでは下記のように、各メニューの横にアイコンを表示させることが可能です。

SWELLのグローバルナビにアイコンをつける手順

SWELLのグローバルメニューにアイコンをつける手順は、以下の3ステップになります。

それでは順番に見ていきましょう！

手順①：「外観」→「メニュー」を開く

ダッシュボードから「外観」→「メニュー」をクリックします。

手順②：「グローバルナビゲーション（グローバルナビ）」を選ぶ

「編集するメニューを選択」から作成した「グローバルナビゲーション（グローバルナビ）」を選択します。

手順③：「ナビゲーションラベル」に表示したいアイコンコードを追加する

アイコンを入れたいメニューのトグル（▼）をクリックすると、メニューの詳細を設定することができます。

「ナビゲーションラベル」に書かれているメニューの左側に、アイコンを表示させるショートコードを追加します。

下記の例では、ショートコードは[icon class="icon wordpress"]と追加していますが

表示させたいアイコンに応じて、””（ダブルクォート）の中のコードを変換してください。

アイコンとメニュー文字の間隔が狭いな…と感じた人は、半角余白を入れると良いですよ！

メニューごとにショートコードを入力したら、最後に下部の「メニューを保存」のボタンをクリックしたら設定終了です。

下記のようにメニューの左側にアイコンが表示されていますね。

SWELLで使えるアイコン一覧

SWELLで使えるアイコンは、下記の一覧表を参考にどうぞ。

下記のショートコードの「〇〇」の部分を、表の「クラス名」に置き換えてください。

まとめ

とても簡単ですので、「SWELLのグローバルナビにアイコンを入れたい！」という人はぜひ参考にしてみてくださいね。

グローバルナビに関する記事を他にも紹介しています。

あわせて読みたい

【SWELL】グローバルナビ（ヘッダーメニュー）を追従させる方法｜画像付きで分かりやすく解説 サイトの上部にメニューを追従させたいんだけどやり方がわからない… そんな疑問にお答えします。 本記事では、PCで下にスクロールしたときにグローバルナビ（ヘッダーメ…

あわせて読みたい

【SWELL 】ヘッダーメニュー（グローバルナビ）の下段に説明を表示させる方法 ヘッダーメニュー（グローバルナビ）の下に説明文を表示させたいんだけど、方法が分からない… こんな疑問にお答えします。 本記事を読むと、上記の様にヘッダーメニュー…

あわせて読みたい

グローバルナビの位置変更はどこで設定する？ヘッダーメニューのレイアウト（PC）を変更する方法 グローバルナビ（グローバルメニュー）で、ヘッダーのメニューの位置を変更したいんだけど、どこで設定すればいいの？ こんな疑問にお答えします！ 本記事を書いている…