オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログです!ᔪ(°ᐤ°)ᔭ

はてなブログのサイドバータイトルでFont Awesomeとはてなブログ純正アイコンを使う方法

f:id:a24o92:20180113140933p:plain

こんにちは。オークニ(@okui_jiwaru)です^^

はてなブログのサイドバーで、タイトルの前にFont Awesomeアイコンの挿入なんて簡単やろーって思っていたら、若干めんどくさかったのでその手順をご紹介します。

Font Awesomeを使う場合と、地味に搭載されているはてなブログの純正アイコンを使う場合と2種類あるので、どちらか都合の良い方を選んで頂ければと!

Font Awesomeってなんぞ?って方はこちらをどうぞ

WordPressみたいにHTML直打ちでいけるかと思っていた

そもそも僕は、普通に管理画面から直接打ち込むだけでいけるものかと思っていました。そう、WordPressみたいにねw

実際に、管理画面から「デザイン」→「カスタマイズ」→「サイドバー」→「検索」でやってみた。

f:id:a24o92:20180113145925j:plain

 

その結果。。。

 

f:id:a24o92:20180113150005j:plain

マジかw

ここで直接いじれないとなると。。。あとはCSSで擬似要素の「:before」を使って挿入するしかないですね><

Font Awesomeを使う場合の手順

CSSをコピペで貼り付ける

Font Awesomeのアイコンフォントをどのように見せるか、という前提のCSSと、実際にプロフィールとか検索とかの文字の前にどのアイコンを使うか、というサンプルCSSがこちらです。

冒頭でアイコンの呼び出しを指定しています。フォントサイズ等は任意で変更してください。

次に、主にサイドバーで使いそうなものに関して、あらかじめ僕の方で勝手にアイコンをチョイスしてコードを記載しておりますw

この「f2be」とかのコードを変更することによって、表示されるアイコンが変わってくる仕様ですね!

アイコンコードの変え方

Font Awesomeのページへいき、それぞれ似合いそうなアイコンを探します。そしてアイコンをクリックするとそのアイコンだけのページへ変わります。

そこで、一番大きなアイコンのスグ下にちっさいうっすい字でUnicode: f002とか書いてます。これが、アイコンのコードです。

f:id:a24o92:20180113154430j:plain

これを、「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個ほどあるっぽいですw

まー、よく使いそうなアイコンはだいたいあるので、リアルにFont Awesomeなんて読み込まなくてもいいんじゃね?!って人は使ってみてください!

まとめ

ぶっちゃけ、アイコンがあろうがなかろうがユーザー的には大差はないんですが(身も蓋もないw)まー、ビジュアルって大事ですやん😂

おしゃれブログ目指してる僕としては、そこは譲れないところだったので今回記事にさせてもらいました!

参考になれば幸いですm(_ _)m

 

一緒におしゃれブログ目指そうぜ!😂