ROYAL NAUGHT

57点のおじさんはダイエットを始めた

【118種一覧表】はてなブログのフリーフォントアイコンの使いかた/表示されない対策も

f:id:vintraw:20180906150446j:plain

ブログを簡単に装飾できるフォントアイコンというものがあります。

有名どころだと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版】はてなブログのフォントアイコンの使いかた

基本コード

f:id:vintraw:20180906114245j:plain

↑コードを書くときは『HTML編集モード』に切り替えます。

そして、以下のように書けばOKです。
<span>でも<em>でもどちらでも表示されます。

<span class="●" aria-hidden="true">&nbsp;</span>
<em class="●" aria-hidden="true">&nbsp;</em>

●の部分に、前述の一覧表にある、各種アイコンの名称を書けば完了です。

例:メールアイコン

<span class="blogicon-mail" aria-hidden="true">&nbsp;</span>メール

上記のように書くと、次のように表示されます。

メール

フォントアイコンを大きくする

このアイコンはあくまでフォントなので、font-sizeというスタイルシートの指定によって、サイズを変更できます。 

指定方法はいろいろあるのでここではシンプルにひとつだけ記載します。

<span class="●" aria-hidden="true" style="font-size: ■;">&nbsp;</span>
<em class="●" aria-hidden="true" style="font-size: ■;">&nbsp;</em>

style="font-size: ■;"の部分が表示サイズを指定するスタイルシートです。

この■のなかに

  • 10px とか 24px など
  • 2em とか 3rem など

フォントサイズを表す数値を入れるだけで完了です。

どのくらいのサイズで表示されるかは実際に数字を入れてみてお試しくださいね。

例ですが、10remを指定したメールアイコンは↓これです笑

読ませない対策:aria-hidden="true"って?

目の不自由なかたなどに向けて開発された『ウェブブラウザの文字読み上げ機能』があるのですが、そこでフォントアイコンをコンピューターが読んでしまわないようにするコードです。

親切設計を心掛けているかたは、とりあえずおまじないのように入れておいてください。

表示されない対策:&nbsp;って?

HTMLの表記文字で、(厳密に言うと違うのですが)ここでは半角スペースとほぼイコールの存在として使います。 

どうしてわざわざ半角スペースをこの文字列で書くかといいますと、表示されなくなってしまうからです。

はてなブログのHTML編集モードでは、タグ(<span> </span>など)の間に打ち込んだ半角スペースは省略されて(=消えて)しまいます。

そしてタグの間に中身がなにもない場合、そのタグがまるごと消えてしまいます

せっかく書いても表示されなくなってしまうので、わざわざ&nbsp;で半角スペースを与えるということになってます。

余談:nbspは「Non-Breaking Space」略で、「改行しない空白」の意です。 

【CSS版】はてなブログのフォントアイコンの使いかた

次に、CSSに書き込んで使うという方法もあるのでご紹介します。
ちょっと高度なことなので、必要なかただけ読んでください。

ここではクラスを指定したとき、その要素より手前(before)にアイコンを表示させるというカスタマイズをおこなっています。

カスタマイズ方法

はてなブログの編集画面のメニューから、

デザイン ⇒ カスタマイズ ⇒ デザインCSS

と進み、ここに以下のように追記します。

.●:before {
    font-family: "blogicon";
    content: "■";

"blogicon"というのがフォントの名前で、これを指定しています。
●⇒クラス名を書いてください
■⇒前述の「CSS用コード」からお好きなものを書いてください 

これにて完了です。 

あとは工夫次第で、いろんな使いかたに広がります。お試しください。

お悩み解決:チェックアイコンの色を変えたい

チェックアイコンはなにもしないままだと『#5aba90』というカラーコードで緑色が指定されています。

自分の好きな色で使いたいなあ~というかたも多いはず。

そんなときは、スタイルシートでさらに重ねて指定してやればOKです。
デザインCSSに、以下のように記載してください。

.blogicon-check:before {
    color: ▲;
}

この▲に、お好きな色の名称やカラーコードなどを入れてあげれば、自分で指定した色に変わります。