ブログを簡単に装飾できるフォントアイコンというものがあります。
有名どころだとFont Awesome だと思いますが、はてなブログを使っているかたは、自動的にはてなブログ独自のフォントアイコンのデータがページに読み込まれています。
ブロガー側でとくに何か初期設定、前準備などをする必要もなく、フォントアイコンが使えるんですね。
それで間に合うようなら、Font Awesomeのデータを読み込まなくてもよくて、ページの軽量化につながるのでおすすめです。
以下にフォントアイコンの基本的な使いかたと一覧表を掲載します。
はてなブログのフォントアイコン一覧表
まず先に、のちのちの利便性を考慮して一覧表から先に記載します。後半にその使いかたをまとめています。
HTMLで使うかたはHTML用名称を、CSSで使うかたはCSS用コードの部分をご参照ください。
| アイコン | HTML用名称 | CSS用コード |
| blogicon-hatenablog | \f000 | |
| blogicon-plus | \f001 | |
| blogicon-minus | \f002 | |
| blogicon-reorder | \f003 | |
| blogicon-grid | \f004 | |
| blogicon-chevron-left | \f005 | |
| blogicon-chevron-right | \f006 | |
| blogicon-chevron-up | \f007 | |
| blogicon-chevron-down | \f008 | |
| blogicon-external | \f009 | |
| blogicon-plugin | \f00a | |
| blogicon-member | \f00b | |
| blogicon-account | \f00c | |
| blogicon-design | \f00d | |
| blogicon-cog | \f00e | |
| blogicon-pages | \f00f | |
| blogicon-edit | \f010 | |
| blogicon-addstar | \f011 | |
| blogicon-subscribe | \f012 | |
| blogicon-entry | \f013 | |
| blogicon-notify | \f014 | |
| blogicon-private | \f015 | |
| blogicon-user | \f016 | |
| blogicon-home | \f017 | |
| blogicon-setting | \f018 | |
| blogicon-draft | \f019 | |
| blogicon-search | \f01a | |
| blogicon-analytics | \f01b | |
| blogicon-help | \f01c | |
| blogicon-comment | \f01d | |
| blogicon-import | \f01e | |
| blogicon-odai | \f01f | |
| blogicon-truck | \f020 | |
| blogicon-group | \f021 | |
| blogicon-folder | \f022 | |
| blogicon-add | \f023 | |
| blogicon-pen | \f024 | |
| blogicon-close | \f025 | |
| blogicon-trash | \f026 | |
| blogicon-bookmark | \f027 | |
| blogicon-redirect | \f028 | |
| blogicon-check | \f029 | |
| blogicon-crop | \f02a | |
| blogicon-repeat | \f02b | |
| blogicon-logout | \f02c | |
| blogicon-star | \f02d | |
| blogicon-pro | \f02e | |
| blogicon-myblog | \f030 | |
| blogicon-recent | \f031 | |
| blogicon-info | \f032 | |
| blogicon-good | \f033 | |
| blogicon-amazon | \f034 | |
| blogicon-twitter | \f035 | |
| blogicon-facebook | \f036 | |
| blogicon-share | \f037 | |
| blogicon-code | \f038 | |
| blogicon-list | \f039 | |
| blogicon-calendar | \f03a | |
| blogicon-bracket | \f03b | |
| blogicon-photo | \f03c | |
| blogicon-color | \f03d | |
| blogicon-public | \f03e | |
| blogicon-realtime-preview | \f040 | |
| blogicon-warning | \f041 | |
| blogicon-link | \f042 | |
| blogicon-time | \f043 | |
| blogicon-markdown | \f044 | |
| blogicon-evernote | \f045 | |
| blogicon-music | \f046 | |
| blogicon-niconico | \f047 | |
| blogicon-heart | \f048 | |
| blogicon-heart-alt | \f049 | |
| blogicon-tag | \f04a | |
| blogicon-mail | \f04b | |
| blogicon-help-alt | \f04c | |
| blogicon-sushi | \f04d | |
| blogicon-rss | \f04e | |
| blogicon-smartphone | \f051 | |
| blogicon-laptop | \f052 | |
| blogicon-mixi | \f053 | |
| blogicon-haiku | \f054 | |
| blogicon-editor-unorderedlist | \f700 | |
| blogicon-editor-orderedlist | \f701 | |
| blogicon-editor-link | \f702 | |
| blogicon-editor-seemore | \f703 | |
| blogicon-quote | \f704 | |
| blogicon-editor-footnote | \f705 | |
| blogicon-editor-toolbar-show | \f706 | |
| blogicon-editor-toolbar-hide | \f707 | |
| blogicon-editor-bold | \f708 | |
| blogicon-editor-italic | \f709 | |
| blogicon-editor-strike | \f70a | |
| blogicon-editor-underline | \f70b | |
| blogicon-editor-fontsize | \f70c | |
| blogicon-editor-color | \f70d | |
| blogicon-others | \f710 | |
| blogicon-fotolife | \f711 | |
| blogicon-curation-bar-toggle | \f713 | |
| blogicon-paint | \f714 | |
| blogicon-gourmet | \f715 | |
| blogicon-flickr | \f716 | |
| blogicon-gist | \f717 | |
| blogicon-pixiv | \f718 | |
| blogicon-miil | \f719 | |
| blogicon-youtube | \f71a | |
| blogicon-instagram | \f71b | |
| blogicon-google-picker | \f71c | |
| blogicon-toggle-on | \f71d | |
| blogicon-toggle-off | \f71e | |
| blogicon-star-o | \f720 | |
| blogicon-odaislot | \f721 | |
| blogicon-rakuten | \f722 | |
| blogicon-grid-3x3 | \f723 | |
| blogicon-grid-vertical | \f724 | |
| blogicon-editor-insert-toc | \f725 | |
| blogicon-breadcrumb | \f726 | |
| blogicon-pinned | \f727 | |
| blogicon-profilecard | \f728 |
【HTML版】はてなブログのフォントアイコンの使いかた
基本コード
↑コードを書くときは『HTML編集モード』に切り替えます。
そして、以下のように書けばOKです。
<span>でも<em>でもどちらでも表示されます。
<span class="●" aria-hidden="true"> </span>
<em class="●" aria-hidden="true"> </em>
●の部分に、前述の一覧表にある、各種アイコンの名称を書けば完了です。
例：メールアイコン
<span class="blogicon-mail" aria-hidden="true"> </span>メール
上記のように書くと、次のように表示されます。
メール
フォントアイコンを大きくする
このアイコンはあくまでフォントなので、font-sizeというスタイルシートの指定によって、サイズを変更できます。
指定方法はいろいろあるのでここではシンプルにひとつだけ記載します。
<span class="●" aria-hidden="true" style="font-size: ■;"> </span>
<em class="●" aria-hidden="true" style="font-size: ■;"> </em>
style="font-size: ■;"の部分が表示サイズを指定するスタイルシートです。
この■のなかに
- 10px とか 24px など
- 2em とか 3rem など
フォントサイズを表す数値を入れるだけで完了です。
どのくらいのサイズで表示されるかは実際に数字を入れてみてお試しくださいね。
例ですが、10remを指定したメールアイコンは↓これです笑
読ませない対策：aria-hidden="true"って？
目の不自由なかたなどに向けて開発された『ウェブブラウザの文字読み上げ機能』があるのですが、そこでフォントアイコンをコンピューターが読んでしまわないようにするコードです。
親切設計を心掛けているかたは、とりあえずおまじないのように入れておいてください。
表示されない対策： って？
HTMLの表記文字で、（厳密に言うと違うのですが）ここでは半角スペースとほぼイコールの存在として使います。
どうしてわざわざ半角スペースをこの文字列で書くかといいますと、表示されなくなってしまうからです。
はてなブログのHTML編集モードでは、タグ（<span> </span>など）の間に打ち込んだ半角スペースは省略されて（＝消えて）しまいます。
そしてタグの間に中身がなにもない場合、そのタグがまるごと消えてしまいます。
せっかく書いても表示されなくなってしまうので、わざわざ で半角スペースを与えるということになってます。
余談：nbspは「Non-Breaking Space」略で、「改行しない空白」の意です。
【CSS版】はてなブログのフォントアイコンの使いかた
次に、CSSに書き込んで使うという方法もあるのでご紹介します。
ちょっと高度なことなので、必要なかただけ読んでください。
ここではクラスを指定したとき、その要素より手前（before）にアイコンを表示させるというカスタマイズをおこなっています。
カスタマイズ方法
はてなブログの編集画面のメニューから、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
と進み、ここに以下のように追記します。
.●:before {
font-family: "blogicon";
content: "■";
}
"blogicon"というのがフォントの名前で、これを指定しています。
●⇒クラス名を書いてください
■⇒前述の「CSS用コード」からお好きなものを書いてください
これにて完了です。
あとは工夫次第で、いろんな使いかたに広がります。お試しください。
お悩み解決：チェックアイコンの色を変えたい
チェックアイコンはなにもしないままだと『#5aba90』というカラーコードで緑色が指定されています。
自分の好きな色で使いたいなあ～というかたも多いはず。
そんなときは、スタイルシートでさらに重ねて指定してやればOKです。
デザインCSSに、以下のように記載してください。
.blogicon-check:before {
color: ▲;
}
この▲に、お好きな色の名称やカラーコードなどを入れてあげれば、自分で指定した色に変わります。
