アイコンフォントを使ってブログにソーシャルリンクを載せました

はてなブログのサイドパーツにプロフィール用のパーツがあります。
そのパーツでは、TwitterのフォローボタンやFacebookのいいねボタンを設置することができます。

しかし私の場合、自己紹介文が長いのか、使用しているデザインの影響なのか、上記のボタンをうまく設置することができませんでした。
そこで独自のサイドパーツを作成し、ソーシャル系のリンクをアイコンフォントを使って表現してみました。

アイコンフォントを知る。

アイコンフォントとは、Webフォントの技術を利用したもののようです。
アイコンフォントについて分かりやすい記事を紹介します。

アイコンフォント化するリンクを決める。

今回は当ブログおよび筆者に関する4つのリンクをアイコンフォント化してみます。

当ブログのRSS
筆者のTwitterアカウントページ
筆者のFacebookページ
筆者が所属するソフトボールチームのホームページ

またアイコンフォントを作成するにあたって、Webクリエイターボックスさんの記事を参考しました。
アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス

アイコンフォント用の素材を入手する。

アイコンフォントはFontelloというサイトで探しました。
提供されているアイコンフォントの数も多く、検索もできるため、気に入ったアイコンも見つかると思います。

アイコンを使うための準備をする。

フォントファイルの配置

Fontelloでアイコンをダウンロードすると、フォントファイル(.svg, .ttf等)が含まれています。
これらのファイルはインターネットでアクセス可能な場所に保存しておきます。今回はDropboxの公開フォルダに設置しました。

CSSの追加 (フォントファイルの読込)

フォントファイルを読み込むためのCSSをhead要素内に記述します。
しかしはてなブログはhead要素を直接編集できないため、ブログ設定を編集します。

ダッシュボード → 設定 → 詳細設定 → headに要素を追加にCSSを記述します。
ちなみに当ブログではこのように設定しています。

<style>
@font-face {
  font-family: 'fontello';
  src: url('https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.eot?56406730');
  src: url('https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.eot?56406730#iefix') format('embedded-opentype'),
       url('https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.woff?56406730') format('woff'),
       url('https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.ttf?56406730') format('truetype'),
       url('https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.svg?56406730#fontello') format('svg');
}
</style>

サイドパーツの作成

次の手順でサイドパーツにアイコンフォントを表示するHTMLを追加します。
デザイン → カスタマイズ → サイドバー → モジュールを追加 → HTML

ちなみに当ブログではこのように設定しています。（簡略）

<ul class="social-icons">
    <li><a href="..." class="social-icon-rss"></a></li>
    <li><a href="..." class="social-icon-twitter"></a></li>
    <li><a href="..." class="social-icon-facebook"></a></li>
    <li><a href="..." class="social-icon-softball"></a></li>
</ul>

大事なのはaタグに、各アイコンを判別するためのclass属性を付加します。

CSSの追加 (フォントファイルの適用)

追加したリンク要素にフォントファイルを適用します。

.social-icon-rss:before { font-family: 'fontello'; content: 'r'; }
.social-icon-twitter:before { font-family: 'fontello'; content: 't'; }
.social-icon-facebook:before { font-family: 'fontello'; content: 'f'; }
.social-icon-softball:before { font-family: 'fontello'; content: 'b'; }