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

2024-12-102025-08-17

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

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

本記事を書いているのは

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

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

あわせて読みたい

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

あわせて読みたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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