読者です 読者をやめる 読者になる 読者になる

いつも向かい風

カメラ好きが、試される大地、北海道で試されるブログ

はてなブログのグローバルメニューをカスタマイズ!Font Awesomeでアイコン画像を表示してみた

ブログ運営
スポンサーリンク

スポンサーリンク




f:id:matka1014:20160506180442p:plain

はてなブログのInnocentでグローバルメニューのカスタマイズをちょっとして見やすくしてみました。

今回変更したのは、グローバルメニューの各文字の前にアイコン画像を追加して視認性を高めることです。利用したのはFont Awesomeというサービスです。

Font Awesome

Font Awesomeは汎用性の高いデザインアイコンを画像としてではなく文字として扱うことが出来る便利なアイコンセットです。なので、アイコン画像というよりアイコンフォントって言ったほうが良いのかもしれません。

Font Awesome, the iconic font and CSS toolkit

はてな民なら知らず知らずに使っているかも

Font Awesomeははてな民なら知らず知らずに使っている可能性大です。シェアボタンのデザインをかっこよくカスタマイズした時、だいたいコピペで完結するので意識していないかもしれませんが、あのコードの中にFont Awesomeが使用されていたりしますよ。

Font Awesome導入方法

ヘッダに記述

まずは、Font Awesomeを使用しますよ!っていう宣言をしなくてはいけません。

場所は、はてなブログの「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」です。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

そこの上記のコードをコピー・アンド・ペースト。すでに、シェアボタンのカスタマイズなどで、この一文がどこかに書き込まれている場合は、新たに追加する必要は無いので注意してください。

使いたいアイコンフォントを探す

使いたいアイコンを探します。

Font Awesome Icons

▲こちらのページに使用できるアイコン一覧が掲載されています。本当に多彩なアイコンが揃っているので、どんなものがあるのか見ているだけでも面白いです。

f:id:matka1014:20160506183007p:plain

 試しに旗のアイコンflagをブログに表示させてみましょう。

f:id:matka1014:20160506183110p:plain

クリックすると、個別ページが表示されますので、赤い四角で囲ったコードをコピーしてください。アイコンの大きさなども変更できるらしいですが、今回はデフォルトのままで問題無いです。

f:id:matka1014:20160506183123p:plain

あとは、アイコンフォントを表示させたい場所に先ほどコピーしたコードを貼り付ければ終了。今回は試しに、グローバルメニューの「旅行」の前に旗のアイコンを表示させてみています。

アイコンと文字の間にスペースを入れるなど微調整をするといいかもしれないです。

まとめ

Font Awesomeを利用して、グローバルメニューの文字の隣にアイコンを表示させてみました。文字だけの時よりも見やすく、オシャレになったので、満足です。