広告 このコンテンツは広告を含む場合があります
SWEL Lのヘッダーデザインにこだわる|綺麗に表示させる方法をご紹介
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
こめまま(@kome.mam)です
子供2人を育てるミニマリスト主婦です
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.19.59-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.19.59-edited.png)
今回はグローバルナビ(ヘッダーメニュー)内を設定しながらアイコンを表示させておしゃれにしていく方法について解説していきます。
- グローバルナビの設定方法がわからない
- みんながやってる英字表記のやり方がわからない
- アイコンってどうやって設置するの
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
この悩み、筆者も抱えてたんです
他の方みたくオシャレに工夫してみたい、そんな思いで筆者なりに調べてみました。そしてヘッダーを設置することで下記のことがメリットとなります。
ヘッダーの役割
- 訪問者をサイト内の他のページに誘導する
- サイト全体の内容を簡単に把握できるようにする
- サイト内の統一感を出す
- ユーザーの印象に残りやすく、ホームページ全体のイメージを左右する
- ブランディング効果を期待できる
- ユーザーに分かりやすく、使いやすいヘッダーの構成になる
- ホームページのユーザーエクスペリエンス(UX)を向上できる
読者のためになることはGoogleも好みます。Googleに好まれることで、検索表示した際に上位に表示される傾向があるので、ぜひ読者の利便性を考慮した項目を取り入れていきたいですね。
グローバルナビ(ヘッダーメニュー)の設定方法
SWELLではアイコンを表示させたり、文字の下に英字表記ができたり。とてもおしゃれにカスタマイズすることができます。カスタマイズするためにはグローバルナビの設定方法から理解していきましょう
基本設定手順
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.44.47-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.44.47-edited.png)
表示オプションはみぎ上にあります。
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.47.31-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.47.31-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.50.55-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.50.55-edited.png)
▶️②グローバルナビをチェック
▶️③「メニューを作成」
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.51.16-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.51.16-edited.png)
▶️②「メニューに追加」
▶️③追加されているか確認
▶️④「メニューを保存」
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.02.48-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.02.48-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.12.52-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.12.52-edited.png)
ここまでが、ヘッダーメニューに必要な項目を載せる手順です。
文字下に英字表記する方法
次に今ヘッダーメニューに表示させて、項目の下に英字を追加する方法を解説していきます。
(これは別に必要ないかなぁ って方はスルーで大丈夫◎)
▶️②説明に英字を入力
▶️「メニューを保存」
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.19.36-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.19.36-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.19.50-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.19.50-edited.png)
うまく表示されましたかね?分かりずらい・見えずら点あったらご連絡ください。
グローバルナビ(ヘッダーメニュー)にアイコン表示
今設定した項目をよりおしゃれにするために、アイコンを表示させる方法もあるんです。下記の4ステップでやってみましょう。
- SWELL設定
- 使いたいアイコンを持ってくる
- アイコンのコードをコピー
- SWELLグローバルナビに設定
①SWELL設定
アイコンはFontAwesomeを使用します
まずはFontAwesomをWordPlessで使用できるように、SWELLの設定を行なっていきましょう
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.15-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.15-edited.png)
▶️②CSSで読み込む
▶️③「変更を保存」
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.24-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.24-edited.png)
これでFontAwesomを使うことができるようになりました
②使いたいアイコンを持ってくる
ではFontAwesomeにアクセスしていきましょう
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.21.06-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.21.06-edited.png)
この中から無料のアイコンを使用することができます。
もちろん有料会員になると全部アイコンを使うことができるけど、たくさん無料でも可愛い・おしゃれなアイコンがあるから無料でいいかも知れません…笑
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.49-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-9.20.49-edited.png)
今回はWordPlessのアイコンを探してみましょう
検索するとすぐ見つけられます。
③アイコンのコードをコピー
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.53.27-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.53.27-edited.png)
アイコンを選んだら、HTMLのコードをコピーします
④SWELLグローバルナビに設定
ではここからが一工夫必要となってきますので、しっかり設定していきましょう
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.59.44-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-10.59.44-edited.png)
コピーしたコード☞<◎i class=”fa-brands fa-wordpress-simple”>
ここから不要な部分を取り除きます <i class=””></i>
取り除いたコード☞fa-brands fa-wordpress-simple
取り除いたコードをの”○○○”部分に入れます
合わせたコード☞[◎icon class=”fa-brands fa-wordpress-simple”]
(表記のため◎を使っています。コピー時は◎を削除してください)
合わせたコードをナビゲーションラベルに貼り付けます
以下のようにアイコンが表示されるか確認してみてください。
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-11.20.30-edited.png)
![](https://komemai-blog.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-09-11.20.30-edited.png)
お疲れ様でした
行ったりきたり少し手間ですが、やり方を覚えておけばいつでも変更できるのでおすすめです✎𓂃
グローバルナビの注意点
グローバルナビ(ヘッダーメニュー)は、ブログのトップ画面を開いたときにパッと目に入る部分ですよね。つまりはクリックされやすいということです。
だからこそ読者さんを誘導したい記事やページ、
カテゴリーを設置しましょう🌟
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
![](https://komemai-blog.com/wp-content/uploads/2023/09/AEFC6DAD-C100-43FD-B9D3-0E3D50387B6E-150x150.jpeg)
ぜひ、読者さんの目をひくブログを
一緒に作っていきましょう♩
ブログに関してコチラもどうぞ