【初心者】WordPressカスタマイズ ナビゲーションバー

アイキャッチ22

ナビゲーションバーを可愛くアレンジしませんか?

文字だけだとちょっと寂しい雰囲気に…

2before

文字の横にアイコンがあると雰囲気出ますよね。笑

3after

 

WordPressでは簡単に設定が可能です。

ちょっとしたアクセントにもってこいのカスタマイズ方法をご紹介します。

 

目次

アイコンフォントを使おう

アイコンフォントとは、通常の文字のように扱えるアイコンのことを言います。

通常、アイコンというと画像イメージという印象がありますよね。

それが”文字”として扱えるんです。

     

 

アイコンフォントのメリット

 

サイズや色がCSSで好きなように変更できる

文字として扱えるのでCSSで装飾が可能です。

例えば…色を変えるなんてことも簡単にできます。

   

 

アイコンが綺麗なまま表示される

画像ファイルだとちょうどいいサイズにしたい時、縮小やら拡大やらで荒くなってしまうケースがあります。

アイコンフォントならその心配は無用です!!

 

ご覧ください。

「ウソみたいだろ。拡大してるんだぜ。それで…」

  

サーバー容量を抑制できる

アイコンフォントは画像ファイルではないのでサイト全体の容量を削減できます。

設置したが画像ファイル1つ1つは小さくても積み重なれば表示速度の低下などを引き起こしてしまいます。

その点、WEBフォントであれば画像ファイルではないので容量は通常の文字と変わらないサイズ。

とても削減できます。

 

画像の差し替えが不要

ちょっとアイコン変えたいな。という時も非常に便利。

 

画像ファイルだと、サーバーにアップロードして、、ファイル名指定して、、パスを変更して、、

サイズ変えて、、

 

となりますが、アイコンフォントなら呼び出すクラスを変更するだけでアイコンを変えられます。

 

こんなふうに、すぐに引っ越しできます。

<i class=”fas fa-home“></i>
<i class=”fas fa-igloo“></i>

    

 

[temp id=2]

WordPressのナビゲーションバーをアレンジ!

では、具体的にWordPressのナビゲーションバーをアレンジしてみましょう。

今回の例では「Font Awesome」というアイコンフォントを利用します。

具体的な利用方法は下記の記事をご参照ください。

 

あわせて読みたい
【フリー】ブログ内のアイコンを設定する方法【Font Awesome】 ブログ作りって楽しいですよね。センスが問われます。笑 そして私はセンスがないです!! そんな私でも、ブログをちょっとおしゃれにバージョンアップできた方法をご紹...

 

 

ナビゲーションバーのカスタマイズ方法

設定方法は簡単。

WordPress管理画面の 「外観」→ 「メニュー」

文字の横に使いたいアイコンフォントを記載するだけ。

<i class=”fas fa-home”></i> ホーム

ナビバー

 

これだけでおしまいです。笑

1例

超簡単にアレンジできますね♪

 

 

おすすめのアイコンフォント

初心者でも使いやすいCDN型のアイコンフォントを提供しているサービスをご紹介します。

 

Font Awesome

 

あわせて読みたい
Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

 

私は基本ここにお世話になっております。笑

約1600種類の無料アイコンフォントを利用できます。

課金をすれば8000種類以上が利用可能に!!

 

 

Line Awesome

 

あわせて読みたい
Line Awesome — Free Beautiful Icon Font Replace Font Awesome with modern line icons with a single line of code.

 

こちらはFont Awesomeをベースとして約1400種類の無料アイコンフォントを提供しています。

Font Awesomeに対し、スタイリッシュなイメージです。

 

Typicons

あわせて読みたい
Typicons - A Free Icon Font by Stephen Hutchings Typicons are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app.

 

こちらはコロンとしたイメージ、可愛らしいポップなサイトにおすすめです♪

 

 

Genericons Neue

 

あわせて読みたい

 

WordPressの開発元が提供しているフォントで、約100種類が用意されています。

また、ヘッダーに読み込む用のダグが不要なのですぐに使えます。

 

まとめ

いかがでしたでしょうか?

アイコンフォントをナビバーに入れたくなりましたか?笑
試しに入れてみましょう。笑

 


 

アイキャッチ22

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次