みやもとブログ

好きなものの感想などを書いています。読書、ラジオ、資格、Notionなど。

目次
目次

【はてなブログ-カスタマイズ】グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

この記事をシェアする

数日前から適用していますが、グローバルナビゲーションのアイコンを変更してみました。

グローバルナビゲーションは何日か前にもデザインを変更しています。

miya-moto-blog.hatenablog.com

上記記事の対応は概ね満足しているのですが、それっぽいアイコンがなかなか見つからなかったのが心残りでした。

今回はその心残りに対応した内容となります。

それではサクッと本題へ。

変更内容(画像)

まずは変更前後の画像を載せます。

変更前

変更前

変更後

変更後

変更したアイコンは「読書感想」「ラジオ」「Notion」の3つです。
この3つはそれっぽいアイコンが見つけることができず、変更前はちょっと妥協したアイコンでした。

変更後は「読書感想」「ラジオ」「Notion」に対してそれっぽいアイコンを設定できました。
「読書感想」は"book"、「ラジオ」は"podcast"、「Notion」は"database"のアイコンをそれぞれ選びました。

ちなみに「HOME」「資格」「ブログカスタマイズ」はそのままにしています。
これらは変更前の時点でそれっぽいアイコンに感じていたため、わざわざ変更する必要はないかなと。

アイコンについて

今回の対応で「はてなブログで用意されているアイコン」から「Font Awesomeで用意されているアイコン」に変更しています。

「Font Awesomeとは?」に関しては他のサイトから引用します。

Font Awesomeとは、Webサイトにアイコンフォントを簡単に表示させることができるWebサービスです。
提供されているアイコンフォントは商用利用可能となっていますので、個人開発されているWebサイトやブログに導入できます!

出典:Font Awesome 使い方 【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ

ということで、自分のブログにもFont Awesomeを導入してみました。

ちなみに「導入してみました」という表現は厳密には正しくなく、過去のブログカスタマイズのタイミングで導入していたようです。

実は以下の記事のタイミングで「Font Awesome」を導入していました。
導入していたものの、手順通りに操作しただけだったので忘れていました。

miya-moto-blog.hatenablog.com

theme-silence.hateblo.jp

参考サイト

web-manabu.com

こちらのサイトにFont Awesomeの対象バージョンのアイコン一覧が載っていました。
こちらを見ながらそれっぽいアイコンを探しました。

大変参考になりました。ありがとうございます。

適用したコード

いつもコードを載せているのですが、今回は割愛します。

「Font Awesome」の導入に関しては、以下のサイトが参考になるかなと思います。

theme-silence.hateblo.jp

 

アイコンの設定方法に関しては、以下のサイトが参考になるかなと思います。

web-manabu.com

おわりに

ということで、「グローバルナビゲーションのアイコンの変更(Font Awesome)」に関してアレコレ書いてみました。

これで前回のブログカスタマイズの心残りが解消されました。

もっとよく探したら、よりそれっぽいアイコンがあるのかもしれません。
ですがとりあえず、今回の対応で満足のいくアイコンを見つけることができました。

またなにかブログカスタマイズしたら記事にします。

(追記)
グローバルナビゲーションを大幅に変更してみました。
こちらも良ければぜひ。

miya-moto-blog.hatenablog.com

関連記事

グローバルナビゲーション関連

グローバルナビゲーションの関連記事をまとめました。
気になる記事があればぜひ。

デザインテーマって意外と簡単にカスタマイズできるんですね

目次のリンク先とグローバルナビゲーションが被るので対策

スマホ版のグローバルナビゲーションを変更してみる

グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

スマホ版グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのデザインを大幅に変更してみる

グローバルナビゲーションの不具合対応(z-index)

アイコン関連

アイコン関連の記事は他にも書いています。
気になる記事があればぜひ。

サイドバーの各項目にアイコンを設定してみる

グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

サイドバーのアイコンを変更してみる(Font Awesome)

スマホ版グローバルナビゲーションのデザインを変更してみる

TOP HOME