はてなブログで格好いいアイコンを使う方法

Webサイトを構築するとき、文字だけだとなんだか寂しい。ワンポイントのアイコンが欲しい！と思うことは多々あります。

しかしフリーのアイコンセットは沢山ありますが、多少なりとも設置や学習のコストがかかりますよね。私自身そんな理由で Bootstrap の基本セットでやりくりしてますが、やはり数が少なく、これだ！と思うアイコンがなかなかありません。そんな中見つけたのがこの記事

無料でウェブ上で使えるアイコンがセットになった「Icon Fonts」 - GIGAZINE

なにこの素敵サービス。

We Love Icon Fonts のサイト内でも記載されていますが、Google Web Fonts に似たようなサービスで数行のCSSを記述するだけでとても簡単に大量のアイコンが利用できるのだとか。

使ってみる

さっそく使ってみましたが、まさに " It's really that simple! " でした。本当にこれだけ？と思うぐらいに。それ故この記事で使い方ガイドを記載してもしょうがないので、はてなブログ で利用する方法をご紹介させて頂きます。

完成形はこんな感じ。

実装方法

実装はこちらもシンプルにたったのワンステップ

はてなブログの管理画面から [デザイン]→ [カスタマイズ]→ [デザインCSS]と進み、

/* <system section="theme" selected="natural"> */
@import "/css/theme/natural/natural.css";
/* </system> */

@import url(http://weloveiconfonts.com/api/?family=typicons|brandico);

body{ background-color::#000; background-image:url('/images/theme/backgrounds/theme12.png'); background-repeat:repeat; background-attachment:scroll; }

.typicons {
  font-family:'Typicons', sans-serif;
}

.brandico {
  font-family:'brandico', sans-serif;
}

と記述するだけで実装完了です。
※ テーマのCSS や body 等の記述は適宜変更して下さい。

あとは記事の編集で

<span class=" brandico brandico-twitter-bird"></span>

と入力するだけでアイコンが使用できます。

実に簡単ですね。はてなブログにかぎらず、CSSとHTMLが自由に変更できるサービスであれば実装可能かと思います。