佐藤の屋敷

技術的なことを残せれば幸い

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

Font Awesomeって何?

簡単に言うと記事にいろいろなアイコンが挿入できるフォントです。 はてなブログだとこんなイメージ

f:id:satoysan:20160818151754p:plain

その中にある家とか矢印とかのアイコンのことです。

f:id:satoysan:20160818151844p:plain

前準備

Font Awesomeのcssをはてなブログで読み込む必要があるので、CDNを持ってきます。 詳しくは以下のリンクを確認してください。

Font Awesome
http://fontawesome.io/

License
http://fontawesome.io/license/

CDN
https://www.bootstrapcdn.com/fontawesome/

f:id:satoysan:20160818152311p:plain

Font Awesomeをはてなブログで使うための設定

記事内で呼び出すためにはCSSを設定しますが、ブログの設定とデザインの2か所で設定が可能です。また、書き方が若干異なります。

ブログの設定から

f:id:satoysan:20160818152435p:plain

ブログの設定にある詳細設定タブをクリックして、検索エンジン最適化にある「headに要素を追加」にlinkタグを設定して保存します。

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

f:id:satoysan:20160818152536p:plain

※バージョン4.6.3については執筆時点ですので、適宜変更してください。

デザインから

f:id:satoysan:20160818152709p:plain

ブログのデザインメニューからスパナ型のカスタマイズアイコンをクリックして、デザインCSSをクリックします。 そこにすでに@importが指定されていますので、それの下に以下を追加して保存します。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");

※バージョン4.6.3については執筆時点ですので、適宜変更してください。

早速記事を書いてみる

記事の書き方ですが、はてなブログには3種類の書き方があります。「見たまま」「Markdown」「はてな記法」それぞれのアイコンの書き方を紹介します。

<i class="fa fa-home"></i> 家

classの中身について

  • fa アイコン使うよ
  • fa-home アイコンの家を使うよ

ちなみに後述するサンプルの表現では<i class="fa fa-home fa-lg"></i> 家のように fa-lg を追加で指定していますが、これは表示されるアイコンのサイズになります。 未指定が一番小さく、fa-lgfa-2x ~ fa-5xとサイズを大きくしていくことができます。

見たままモードでアイコン表示

f:id:satoysan:20160818152929p:plain

まず、見たままモードだとそのままで通常ブログは書けますが、アイコンを見ながらの記事は書けません。このため、アイコンが表示されているのかを確認するためにはプレビューを見ながら定義していきます。 また、アイコンを埋め込むためには「HTML編集」で作業する必要があり、それに加えてFont Awesome側でサンプルとして定義されている<i>タグでは、見たままモードのHTML編集で消えてしまいます。(余計な?タグや特定の設定ができないようにしているのは、はてな側の優しさだと思いますが)しかし、これではアイコンの表示ができないので、別のタグ<span>タグで代用します。

f:id:satoysan:20160818153019p:plain
( Font Awesomeサイト側ではタグが指定されている )

ではさっそくHTMLを編集します。

f:id:satoysan:20160818153140p:plain
(編集前イメージ)

編集前HTMLから以下のようにアイコンをHTMLで設定します。 また、<span>タグと</span>タグの間に全角のスペースを必ず入れてください。これを入れておかないと見たままモードの処理でタグが消されてしまいます。 <li>その2 家 <span class="fa fa-home fa-lg"> </span></li>

f:id:satoysan:20160818153236p:plain

このように書いた後、プレビューで確認するとアイコンが表示されます。

f:id:satoysan:20160818153317p:plain

Markdownモードでアイコン表示

見たままモードよりはるかに簡単になります。そのままHTMLタグを埋めていくのみです。

f:id:satoysan:20160818153357p:plain
(編集イメージ)

適用すると以下のように確認できます。

f:id:satoysan:20160818153429p:plain
(プレビューイメージ)

はてな記法モードでアイコン表示

f:id:satoysan:20160818153512p:plain
(編集イメージ)

適用すると以下のように確認できます。

f:id:satoysan:20160818153539p:plain
(プレビューイメージ)

アイコンの一覧と大きさ変えてみたり向きを変えてみたりなど

アイコン一覧 http://fontawesome.io/icons/

いろいろなサンプル http://fontawesome.io/examples/

詳しくは上記を確認してみてください。いろいろな表現ができることが分かります。

最後に

今回の記事はあくまで「はてなブログ」で「Font Awesome」アイコンを使う方法として記載していますので細かいフォントの利用方法については公式や他サイトをご確認ください。

いい記事が書ける手助けになれば。といいつつあまり記事書いていない私が言うのも。。。