ブログ運営

【WordPress:JIN】グローバルナビにアイコンを設定

グローバルナビゲーションのメニューにアイコンがあるとイメージがすごく良くなりますよね。是非とも設定しておきたいところです。

 

この記事ではWordPressテーマ「JIN」を使っている方へメニューにアイコンを設定する方法をお伝えさせて頂きます。

 

ねこ
ねこ
実際に私も調べながら設定したのですが初心者の方にもわかりやすく説明します。

 

アイコン(無料)の探し方 Font Awesome

 

メニューアイコンはFont Awesomeというサイトからコードを取得してブログに貼り付けることができます。(ダウンロードは不要です。)

メニューアイコンであれば無料で十分な種類を取得できます。

 

トップページの「icons」から入って下さい。

 

次に検索窓に文字を入れます。この時に英語で入れる必要があります。

試しに「home」を入れてみました。

 

濃く表示されている分が無料で使用できるアイコンになります。自分の好きなアイコンを見つけたらクリックします。

アイコンをクリックするとこのような画面にアイコンコードが表示されます。

赤枠の緑下線のコードが必要になります。コードをクリックするとコピーができます。

 

よく使われるアイコンコード

  fas fa-desktop
  fas fa-envelope
  fas fa-mobile-alt
  fas fa-globe
  fas fa-heart
  fas fa-shopping-cart
  fas fa-bullhorn

メニューアイコンの設定の仕方 JIN

 

今回はグローバルナビゲーション自体は設定できていてアイコンを追加する設定の説明になります。

管理画面の「外観」→「メニュー」をクリック

アイコンを付けたいメニューの▼(赤丸部分)をクリックして開き説明欄に先ほどコピーしたコードを入れます。(赤枠部分)

張り付けたコードのダブルコーテーションマーク内だけを残し後は削除します。最後にメニューを保存すれば完了です。

アイコンの付いたグローバルナビゲーションが完成します。

 

最後に

 

グローバルナビゲーションのアイコンがあると視覚的にもわかりやすく、ブログのイメージも良くなります。

また、滅多に設定や変更する物ではないので設定操作を忘れがちです。その際は当ブログを改めて活用頂けましたら幸いです。

 

ねこ
ねこ
最後まで読んで頂きありがとうございます。
ABOUT ME
ねこマスク
ねこマスク
都内在住のパパリーマンです。使ってみた商品レビュー、お役立ち情報、ブログ運営について語ります。 ご質問は、お気軽にお問合せ下さい。