はてなブログのサイドバータイトルでFont Awesomeとはてなブログ純正アイコンを使う方法
こんにちは。オークニ（@okui_jiwaru）です^^
はてなブログのサイドバーで、タイトルの前にFont Awesomeアイコンの挿入なんて簡単やろーって思っていたら、若干めんどくさかったのでその手順をご紹介します。
Font Awesomeを使う場合と、地味に搭載されているはてなブログの純正アイコンを使う場合と2種類あるので、どちらか都合の良い方を選んで頂ければと！
Font Awesomeってなんぞ？って方はこちらをどうぞ
WordPressみたいにHTML直打ちでいけるかと思っていた
そもそも僕は、普通に管理画面から直接打ち込むだけでいけるものかと思っていました。そう、WordPressみたいにねｗ
実際に、管理画面から「デザイン」→「カスタマイズ」→「サイドバー」→「検索」でやってみた。
その結果。。。
マジかｗ
ここで直接いじれないとなると。。。あとはCSSで擬似要素の「:before」を使って挿入するしかないですね＞＜
Font Awesomeを使う場合の手順
CSSをコピペで貼り付ける
Font Awesomeのアイコンフォントをどのように見せるか、という前提のCSSと、実際にプロフィールとか検索とかの文字の前にどのアイコンを使うか、というサンプルCSSがこちらです。
冒頭でアイコンの呼び出しを指定しています。フォントサイズ等は任意で変更してください。
次に、主にサイドバーで使いそうなものに関して、あらかじめ僕の方で勝手にアイコンをチョイスしてコードを記載しておりますｗ
この「f2be」とかのコードを変更することによって、表示されるアイコンが変わってくる仕様ですね！
アイコンコードの変え方
Font Awesomeのページへいき、それぞれ似合いそうなアイコンを探します。そしてアイコンをクリックするとそのアイコンだけのページへ変わります。
そこで、一番大きなアイコンのスグ下にちっさいうっすい字でUnicode: f002とか書いてます。これが、アイコンのコードです。
これを、「content: '\◯◯◯';」のところへ差し替えて下さい。必ず「\」これの後ろに！
以上、CSSをコピペするだけで簡単にアイコンを付けることができます^^
はてなブログの純正アイコンを使う場合
「ページが重くなると困るから、どうしてもFont Awesomeを使いたくない！」という人のために！なんと！はてなブログが自前のアイコンを用意してくれていました！
それ先言えよ〜😱
嘘です。そんな理由で用意してるはずありません😂
単純に、運営側が管理画面等で使う目的で用意されていたものです。ただ、これをはてなブログユーザーは全員デフォで使うことができるってやつです！
使い方はFont Awesomeと全く一緒。
すでに上記のCSSを全部コピペしている場合、
3行目を「font-family:blogicon;」
このように変更すればOKです！
あとはFont Awesomeと同じく「content: '\◯◯◯';」ここに指定のコードを差し込むだけです。楽勝ですね！^^
はてな純正アイコンのコードはこちら
| アイコン | クラス名 | コード |
|---|---|---|
| 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 | |
| \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 | |
| \f050 | ||
| 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-blockquote | \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 | |
| \f712 | ||
| 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 |
これ、公式のブログとかでは一覧で発表されていないらしく、とりあえず現状は117個ほどあるっぽいですｗ
まー、よく使いそうなアイコンはだいたいあるので、リアルにFont Awesomeなんて読み込まなくてもいいんじゃね？！って人は使ってみてください！
まとめ
ぶっちゃけ、アイコンがあろうがなかろうがユーザー的には大差はないんですが（身も蓋もないｗ）まー、ビジュアルって大事ですやん😂
おしゃれブログ目指してる僕としては、そこは譲れないところだったので今回記事にさせてもらいました！
参考になれば幸いですm(_ _)m
一緒におしゃれブログ目指そうぜ！😂
