はてなブログで標準的に利用可能なアイコン絵文字

　はてなブログには各種サービスやブログ内のアイコン画像がWebフォントとしてインストールされており、特定のクラスをつけたタグを用いる事で「はてなブログ」の様に文字列として出力可能となっています。はてなブログ専用の絵文字という事ですね。

「<i class="blogicon-hatenablog"></i>はてなブログ」

　こんな感じで、ちょっとしたシェアボタン*1やブログパーツを作る時などに重宝するのですが、実際に出力される内容について把握しれていなかったので、これを機会にリファレンスを作成しました。

アイコン絵文字フォント一覧

No	クラス名	アイコン
000	blogicon-hatenablog
001	blogicon-plus
002	blogicon-minus
003	blogicon-reorder
004	blogicon-grid
005	blogicon-chevron-left
006	blogicon-chevron-right
007	blogicon-chevron-up
008	blogicon-chevron-down
00a	blogicon-external
00b	blogicon-plugin
00c	blogicon-member
00d	blogicon-account
00e	blogicon-design
00f	blogicon-cog
010	blogicon-edit
011	blogicon-addstar
012	blogicon-subscribe
013	blogicon-entry
014	blogicon-notify
015	blogicon-private
016	blogicon-user
017	blogicon-home
018	blogicon-setting
019	blogicon-draft
01a	blogicon-search
01b	blogicon-analytics
01c	blogicon-help
01d	blogicon-comment
01e	blogicon-import
020	blogicon-truck
021	blogicon-group
022	blogicon-folder
023	blogicon-add
024	blogicon-pen
025	blogicon-close
026	blogicon-trash
027	blogicon-bookmark
028	blogicon-redirect
029	blogicon-check
02a	blogicon-crop
02b	blogicon-repeat
02c	blogicon-logout
02d	blogicon-star
02e	blogicon-pro
030	blogicon-myblog
031	blogicon-recent
032	blogicon-info
033	blogicon-good
034	blogicon-amazon
035	blogicon-twitter
036	blogicon-facebook
037	blogicon-share
038	blogicon-code
039	blogicon-list
03a	blogicon-calender
03b	blogicon-bracket
03c	blogicon-photo
03d	blogicon-color
03e	blogicon-public
040	blogicon-realtime-preview
041	blogicon-warning
042	blogicon-link
043	blogicon-time
044	blogicon-markdown
045	blogicon-evernote
046	blogicon-music
047	blogicon-niconico
048	blogicon-heart
049	blogicon-heart-alt
04a	blogicon-tag
04b	blogicon-mail
04c	blogicon-help-alt
04d	blogicon-sushi
04e	blogicon-rss
051	blogicon-smartphone
052	blogicon-laptop

まとめ

　検索ボタンや各種サービスのアイコンもWebフォント化されているので、ほとんどの場合はわざわざアイコン画像を用意しなくても済む事がわかりました。Webフォントを利用した方が画像よりも軽いですし、拡大縮小などの取り回しも楽なので今後は積極的に絵文字フォントを利用していこうと考えています。