こんにちは。シンプルライフナビです🌿
ブログでデザインアイコンを使ってみたいと思ったことはありませんか？
私のブログでは無料で使えるアイコンフォントを一部利用しています。
そこで、はてなブログユーザーが標準で使える、はてなブログのアイコンフォントの使い方を記事にしました。
この記事のオススメ対象
- はてなブログユーザーにオススメです。
- はてなブログでは、外部のフォントを読み込まなくても標準で使えるアイコンフォントが備わっています。
ぜひ使ってみましょう！
例えば、このページの左上の方にある「 トップ」というところや日付の前の時計マークなどにアイコンフォントを使用しています。
アイコンがあると文字だけよりもイメージしやすく、わかりやすく感じますよね😄
ブログのデザインカスタマイズや表現の修正をしようとお考えの場合などに、参考にしていただけると幸いです。
はてなブログユーザーならアイコンフォントを使ってみよう
いろんな方のブログを見ていると、アイコンを使ってわかりやすい表示をされている方がいらっしゃいます。
どのようにすればアイコンを使えるのかご存知ですか？🧐
意外と簡単に利用できますよ！😄
それでは、使えるアイコンの種類や使い方をご紹介します！
はてなブログユーザーが使えるアイコンフォント
はてなブログユーザーが標準で使えるアイコンフォントは100種類以上あります。
どんなものがあるのでしょうか？
表にしましたので、早速使いたいものがあるかどうか、確認してみてください。
アイコンの名称（クラス名）とコード一覧
| アイコン | クラス名 | コード |
|---|---|---|
| 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-star-o | f720 | |
| 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-amp | f055 | |
| blogicon-quote | f704 | |
| blogicon-toggle-on | f71d | |
| blogicon-toggle-off | f71e | |
| blogicon-odaislot | f721 | |
| blogicon-grid-3x3 | f723 | |
| blogicon-grid-vertical | f724 | |
| blogicon-pinned | f727 | |
| blogicon-editor-unorderedlist | f700 | |
| blogicon-editor-orderedlist | f701 | |
| blogicon-editor-link | f702 | |
| blogicon-editor-seemore | f703 | |
| 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-editor-insert-toc | f725 | |
| 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 | |
| - | f71c | |
| blogicon-others | f710 | |
| blogicon-rakuten | f722 | |
| blogicon-breadcrumb | f726 | |
| blogicon-profilecard | f728 | |
| blogicon-snippet | f72a |
アイコンフォントを表示する方法（使い方）
それでは、実際にアイコンフォントを表示させてみましょう。
HTML編集の画面で、次のようにコードを入力します。
次の文をHTML編集画面に入力（またはコピペ）してみてください。
<p>
<span class="blogicon-hatenablog"> </span>はてなブログ<br />
<span class="blogicon-good"> </span>いいね！
</p>
コードの赤い部分にアイコンの名前（クラス名）、青い部分は説明文を入れます。
入力したあと、プレビュー画面にすると、下記のように表示されます。
はてなブログ
いいね！
<p>と</p>の間にはさんだ情報がウェブ上に表示されています。<span〜 /span>の部分ではアイコンを指定し、青字の部分で文字情報を決めています。
なお、<br/>は改行の意味です。
アイコンを表示させてみたい方は、ご自身でも試してみてください。
一つ試してみてできたら他のアイコンでも同じようにHTML欄に記述すれば大丈夫ですよ。新しい「下書き」ページなどで試してみてくださいね。
なお公開前に表示状態を確認するには、「HTML編集」画面に上記コードを入力後、 「編集見たまま」画面ではアイコンは表示されないので「プレビュー」画面に切り替えて表示を確認してください。
アイコンフォントの表示を少し大きくする方法
アイコンが少し小さく感じるときは次のように、アイコンを指定する部分に「 lg」を追加します。*1
「アイコンの名前＋スペース＋lg」です。
<p>
<span class="blogicon-hatenablog lg"> </span>はてなブログ<br />
<span class="blogicon-good lg"> </span>いいね！
</p>
はてなブログ
いいね！
表示が変わってアイコンが少し大きくなっていることが確認できますね。
アイコンのみを表示したい場合
アイコンフォントのみ表示するときは「 」が必須です。注意です。
×<span class="blogicon-good"> </span>
○<span class="blogicon-good"> </span>
上の一つ目の文のように入力した場合はアイコンが表示されませんが、二つ目の文のように入力すると、 ←表示されます。
なお「編集見たまま」画面では表示されないので、「プレビュー」で確認してください。
アイコンの後ろに何か文字がないと上記のように表示されないのですが、「 」は半角スペース（改行なし）を意味するのでこれを入れておけば大丈夫です。なおプレビュー確認後HTML編集画面に戻ると が赤い点に変わってしまいますが、そのままで大丈夫です。
はてなブログのアイコンフォントのまとめ
はてなブログユーザーは、いろいろなアイコンを利用することができます。
本文以外にも、HTMLの使えるところ（HTMLで情報を書き込みできるところ）なら、ヘッダーやフッター、サイドバーなどでも表示させることができます。
ブログのデザインを見直しする際に一部取り入れてみてもいいかもしれないですね😊
コピペで使えるコードを載せました。こちらの記事もぜひご覧ください！
最後までご覧いただき
ありがとうございました🤗✨
*1:lgは多分大きい（＝large）の省略形ですね。
