雑木帳

囲碁、読書、資格(英語・IT)についてのブログです

はてなブログのヘッダーメニューでおしゃれアイコンを使う

スポンサーリンク

f:id:webb_bou:20161212203437p:plain

はてなアイコンを使う

ブログヘッダー部のカテゴリにアイコンを付けたいと思って調べてみると、はてなブログには公式のwebアイコンを用意されているようです。が、公式の一覧よりも先に以下のサイトにたどり着いてので参考にさせて頂きました。

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!

やることはとても簡単で、HTMLにclassを追加してあげるだけで使用できます。

 

Font Awesomeを使おう

しかし、はてなのアイコン一覧(79種類)にはしっくりくるアイコンがありませんでしたので、もう少し調べてみるとFont Awesome Iconsというサイトを発見しました。このサイトには675種類のアイコン(2016/12/11現在)があり、眺めてみると用途にあうアイコンが用意されていました。使い方は、以下の記事を参考にしました。

はてなブログでカッコいいWebアイコンフォント「Font Awesome」を使って記事を飾る方法 - 佐藤屋敷

 

やることは簡単です。

  1. CSSにimportを追加する
  2. ヘッダ部のHTMLに適当なアイコンのclassを設定する

 

その前にヘッダにカテゴリメニューを出したいという方

はてなブログのカスタマイズでとても良い記事を書かれているYukihyさんのブログを見てください。記事通りにコピペをすればあっという間によさげなデザインのブログになります。

当ブログで行ってきたはてなブログデザインカスタマイズまとめ! - Yukihy Life