SWELLグローバルナビゲーションの設定方法と、アイコンを表示させてオシャレにするやり方を解説します。
- グローバルナビゲーションの設定方法が分からない・・・
- グローバルナビゲーションの英字表記のやり方が分からない・・・
- グローバルナビゲーションにアイコンを設置したい・・・
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
こういった悩みがある方は、この記事を読んでいきましょう。
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
SWELLグローバルナビゲーションの設定方法
![おしゃれなアイコン付きヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/08/おしゃれなアイコン付きヘッダーメニュー-1-1024x640.png)
![おしゃれなアイコン付きヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/08/おしゃれなアイコン付きヘッダーメニュー-1-1024x640.png)
グローバルナビゲーションとは、上記のようなヘッダーメニューのことです。
SWELLでは、アイコンを設定したり、文字下に英字表記ができたりと、とてもオシャレな雰囲気にすることも可能。
では、このようなヘッダーメニューを作れるSWELLグローバルナビゲーションの設定方法を解説します。
グローバルナビゲーションの基本設定手順
まずは、グローバルナビゲーションの基本的な設定手順を解説します。
![外観-メニュー](https://hinakira.com/wp-content/uploads/2022/08/外観-メニュー-1-1024x663.png)
![外観-メニュー](https://hinakira.com/wp-content/uploads/2022/08/外観-メニュー-1-1024x663.png)
![表示オプション-説明](https://hinakira.com/wp-content/uploads/2022/08/表示オプション-説明-1-1024x671.png)
![表示オプション-説明](https://hinakira.com/wp-content/uploads/2022/08/表示オプション-説明-1-1024x671.png)
![新しいメニューを作成](https://hinakira.com/wp-content/uploads/2022/08/新しいメニューを作成-1-1024x665.png)
![新しいメニューを作成](https://hinakira.com/wp-content/uploads/2022/08/新しいメニューを作成-1-1024x665.png)
![名前-グローバルナビ-メニューを作成](https://hinakira.com/wp-content/uploads/2022/08/名前-グローバルナビ-メニューを作成-1-1024x666.png)
![名前-グローバルナビ-メニューを作成](https://hinakira.com/wp-content/uploads/2022/08/名前-グローバルナビ-メニューを作成-1-1024x666.png)
![メニュー項目を追加-メニュー追加](https://hinakira.com/wp-content/uploads/2022/08/メニュー項目を追加-メニュー追加-1-1024x678.png)
![メニュー項目を追加-メニュー追加](https://hinakira.com/wp-content/uploads/2022/08/メニュー項目を追加-メニュー追加-1-1024x678.png)
![メニューを保存](https://hinakira.com/wp-content/uploads/2022/08/メニューを保存-1-1024x670.png)
![メニューを保存](https://hinakira.com/wp-content/uploads/2022/08/メニューを保存-1-1024x670.png)
![グローバルナビゲーション](https://hinakira.com/wp-content/uploads/2022/08/グローバルナビゲーション-1-1024x642.png)
![グローバルナビゲーション](https://hinakira.com/wp-content/uploads/2022/08/グローバルナビゲーション-1-1024x642.png)
文字下に英字表記させる方法
次に、グローバルナビゲーションの文字下に英字表記を追加する方法を解説します。
具体的な手順は以下の通り。
![英字の入力](https://hinakira.com/wp-content/uploads/2022/08/英字の入力-1-1024x670.png)
![英字の入力](https://hinakira.com/wp-content/uploads/2022/08/英字の入力-1-1024x670.png)
①メニュー名をクリックして②「説明」欄に英字を入力して③「メニューを保存」をクリック。
![英字表示](https://hinakira.com/wp-content/uploads/2022/08/英字表示-1-1024x642.png)
![英字表示](https://hinakira.com/wp-content/uploads/2022/08/英字表示-1-1024x642.png)
すると、上記のとおり文字下に英字が表示されました。
SWELLグローバルナビにアイコンを表示させる方法
さらに、SWELLグローバルナビにアイコンを表示させる方法も解説しておきます。
具体的には、下記の4ステップを行います。
- SWELL設定
- 使いたいアイコンを探す
- アイコンのコードをコピー
- SWELLグローバルナビに設定
①:SWELL設定
アイコン(Font Awesomeのアイコン)を使用するのに、まずはFont Awesomeの使用設定をSWELLで行います。
具体的な手順は以下のとおりです。
![SWELL設定](https://hinakira.com/wp-content/uploads/2022/08/SWELL設定-1-1024x663.png)
![SWELL設定](https://hinakira.com/wp-content/uploads/2022/08/SWELL設定-1-1024x663.png)
管理画面から「SWELL設定」をクリックしましょう。
![アイコンSWELL設定](https://hinakira.com/wp-content/uploads/2022/08/アイコンSWELL設定-1-1024x666.png)
![アイコンSWELL設定](https://hinakira.com/wp-content/uploads/2022/08/アイコンSWELL設定-1-1024x666.png)
SWELL設定画面になったら、①Font Awesomeをクリックして②「CSSで読み込む」にチェックを入れて③「変更を保存」をクリックしましょう。
これで、Font Awesomeが使える状態となります。
②:使いたいアイコンを探す
次に、Font Awesomeにアクセスして、使いたいアイコンを探しましょう。
![Font Awesome](https://hinakira.com/wp-content/uploads/2022/08/Font-Awesome-1-1024x669.png)
![Font Awesome](https://hinakira.com/wp-content/uploads/2022/08/Font-Awesome-1-1024x669.png)
今回は、WordPressのアイコンを探してみます。
検索窓に「WordPress」と入力すると、以下のようにアイコンが出てきました。
![アイコンを検索する](https://hinakira.com/wp-content/uploads/2022/08/アイコンを検索する-1-1024x679.png)
![アイコンを検索する](https://hinakira.com/wp-content/uploads/2022/08/アイコンを検索する-1-1024x679.png)
表示されたものの中から使いたいものを選んでクリックしましょう。(今回は左側のものを使ってみます)
③:アイコンのコードをコピー
アイコンをクリックしたら、表示されたコードをクリックしてコピーします。
![コードをクリック](https://hinakira.com/wp-content/uploads/2022/08/コードをクリック-1-1024x655.png)
![コードをクリック](https://hinakira.com/wp-content/uploads/2022/08/コードをクリック-1-1024x655.png)
コピーができたら、WordPressのメニュー画面(グローバルナビ)を開いて設定していきます。
④:SWELLグローバルナビに設定
これが最後の工程になります。
以下の通りに設定していきましょう。
![アイコンコード貼り付け](https://hinakira.com/wp-content/uploads/2022/08/アイコンコード貼り付け-1-1024x673.png)
![アイコンコード貼り付け](https://hinakira.com/wp-content/uploads/2022/08/アイコンコード貼り付け-1-1024x673.png)
コピーしたコード<i class="fa-brands fa-WordPress"></i>
のうち、<i class=""> </i>
を除いたfa-brands fa-WordPress
の部分だけを[icon class=""
]の” “の中に貼り付けます。
今回のアイコンを貼り付けた結果は、[icon class="fa-brands fa-WordPress"
]です。
つまり、実際に使うアイコンのコードは下記の部分ですね。
![使う部分](https://hinakira.com/wp-content/uploads/2022/08/コードのうち使う部分-1-1024x664.png)
![使う部分](https://hinakira.com/wp-content/uploads/2022/08/コードのうち使う部分-1-1024x664.png)
設定ができると、以下のようにアイコンが表示されます。
![アイコン設定完了](https://hinakira.com/wp-content/uploads/2022/08/アイコン設定完了-1-1024x643.png)
![アイコン設定完了](https://hinakira.com/wp-content/uploads/2022/08/アイコン設定完了-1-1024x643.png)
全部設定してみた結果です。
![おしゃれなアイコン付きヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/08/おしゃれなアイコン付きヘッダーメニュー-1-1024x640.png)
![おしゃれなアイコン付きヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/08/おしゃれなアイコン付きヘッダーメニュー-1-1024x640.png)
オシャレなヘッダーメニューができました。
【初心者向け】グローバルナビ設定の注意点
最後に、グローバルナビゲーション設定の注意点について解説していきます。
注意したいのは、1点。
それは、読者を誘導したい記事やページ、カテゴリーを配置しましょう。ということです。
グローバルナビゲーションはクリックされやすい部分なので、ここに「プライバシーポリシー」など不要なものが設置されているのは非常にもったいない状態といえます。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
なので、初期状態などは言語道断。かぁーーーーつ!です。
まとめ|SWELLグローバルメニューをオシャレにしてクリックさせちゃおう!
今回は、SWELLグローバルナビの設定方法と、オシャレなアイコンを表示させる方法についても解説しました。
グローバルナビは、かなり重要な部分です。
オシャレな見た目にすることで、より目についてクリックされやすくなるでしょう。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
ぜひ、オシャレなグローバルナビを設置して、たくさんクリックされちゃいましょう!
では、以上となります。
またね!
![](https://hinakira.com/wp-content/uploads/2021/09/Customize-the-top-page-of-SWELL-1-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2021/09/Customize-the-top-page-of-SWELL-1-300x158.jpg)
当サイト使用テーマ。最高です。
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
- 購入者限定アフィリエイトがあるからテーマで稼げる
- 書きやすくて時短になるから生産性があがる
- ChatGPTとの相性もバツグンで時短が加速
- 誰でも簡単にオシャレなデザインにできる
- 買い切り、複数サイトにバンバン使える
- アプデが多くて進化がスゴイ
- SEOにも強い
- 価格が高い
- 個人開発の不安
- 人気すぎてデザインが被りがち
\ 時短になって生産性が爆上がりするテーマ /
※おしゃれで書きやすくてブログが楽しくなる
コメント