WordPressのグローバルメニュー アイコンを付けて少し目立たせる方法(wordpress以外も使える)

icons-for-website

WordPressのグローバルメニュー アイコンの付け方

自分のブログのグローバルメニューにアイコンをつけようとして、いつの間にか

かれこれ2,3ヶ月放置していて、つい最近思い出してアイコンを修正したので、

記事にしておきます。

 

ぜひ気になる方は参考にして頂ければと思います。

これはWordPressに限らずどのサイトでも使えるので、WordPressを使ってい

ない方もぜひご覧ください。

  

今回は、WordPressを使った場合の方法と、他のwebサイトの場合に使う方法

どちらもご紹介します。

 

今回ご紹介する方法は、font-awsomeというものを使用します。

https://fontawesome.com/

webサイトを制作している人で、知らない人はいないという程メジャーなもの

なのでぜひ覚えておいて損はないです。

 

それではご紹介していきます。

  

WordPressを使った場合の方法

では、まずWordPressを使った場合のアイコンの付け方をご紹介します。

まずはfont-awsomeを読み込む為に、ヘッダーの<head>タグにこちらの

記述を追加します。

<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>

 

ヘッダーを編集するには、

ダッシュボード→外観→テーマエディタ→テーマヘッダー(header.php)

で編集ができます。

 

こんな感じになります

 

これでfont-awsomeを使用する準備は完了です。

 

それでは、font-awsomeのwebサイトへ行ってみましょう。

https://fontawesome.com/

トップページのメニュー icons をクリックして進みます。

そこで気になるアイコンを見つけたら、クリックします。

この様な画面になるので、

左上のコードをコピーします。

これですね

 

それでは、メニューに追加してみましょう。

ダッシュボード→外観→メニュー で編集します。

 

画面がこの様になるので

このナビゲーションラベルというところに先ほどコピーしたコードを貼り付ければ完了です。

この様な感じ。

 

これで完了です。簡単ですね。

それでは次に他のwebサイトの場合を紹介します。

  

 

 

webサイトにfont-awsomeでアイコンをつける方法

基本的には先ほど紹介した方法とほとんど同じです。

まずは、font-awsomeを読み込む為にサイトのヘッドタグに

<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>

を追加します。 

 

これで準備完了。

あとはアイコンを表示したい場所に、

font-awsomeのサイトhttps://fontawesome.com/

上と同じ様にコピーしたコードを貼り付ければ完了です。

 

まとめ

以上、webサイトにアイコンを表示する方法でした。

font-awsomeは、アイコンのバリエーションもかなり豊富でとても便利です。

少しアイコンなどを加えるだけで、サイトの印象も大きく変わったり、より見映えが良くなったりします。

今まで使ったことがなかったという人は、是非覚えていってください。

 

 

sasurai

旅と写真を愛する人。 web制作の仕事をしています。 写真も撮ります。お仕事のお問い合わせはお気軽に。

シェアする

string(1) " "
Translate »