modest violet

modest violet

開発者としてのあれこれや、日々の雑記など

your future hasn't written yet. no one's has.
by Emmett Lathrop "Doc" Brown

アイコンフォントで他のページと差をつけよう!レッツ「はてなブログ」のカスタマイズ

f:id:shin21sk:20170112194418p:plain

Webアイコンフォントってご存じですか?昔は文字ではないアイコンは画像ファイルで表示するのが当たり前でした。それを画像ではなく、あくまでもテキストベースで表示できるというものなのです。

Webアイコンフォントは何が出来る?

例えば、「」。このコーヒーカップのマークもアイコンフォントです。

フォントですので、 大きさを自由自在に変更できます。

もちろん、色だって普通に変えることが出来ます。

はてなブログのカスタマイズにオススメです。

はてなブログで使うには

今回は「FontAwesome」というWebアイコンフォントを使用して、ご説明します。

1. FontAwesomeのCSSを指定する

下記のサイトより、CSSのCDNリンクを取得します。

BootstrapCDN
Font Awesome · BootstrapCDN by MaxCDN

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

BootstrapCDN

2. はてなブログの設定画面に追加する

設定>詳細設定>検索エンジン最適化>headに要素を追加

に、コピーしたCDNリンクを貼り付け保存 します。

3. FontAwesome ページへアクセス

fontawesome.io

4. 使用したいアイコンを探す

f:id:shin21sk:20170112193247p:plain

キーワード検索で探すか、一覧を眺めて気に入ったアイコンを見つけてください。

お目当てのアイコンを見つければ、クリックして詳細画面を開きます。

5. フォントのタグをコピーしてブログに貼り付け

f:id:shin21sk:20170112193441p:plain

下の方に、タグが表示されていますので、ごっそりとコピーして、ブログ記事の使用したい箇所に貼り付けてください。

あとは繰り返しの作業です。

まとめ

いかがでしょうか?思ったよりも簡単に導入できたのではないかと思います。

少し違った雰囲気になっていいと思いますよ。是非お試しください!