今回は「はてなブログ」でデフォルトで使えるとても便利な”アイコンフォント”の表示方法を紹介したいと思います。
アイコンフォントを使いこなすとはてなブログの見た目がオシャレになり、見栄えもよくなります。
毎年はてなブログで使えるアイコンフォントは増えており、昨年から「DAZN」など6種類増えて、"合計123種類”になっています。
私のTOPページのグローバルメニューに以下の様なアイコンフォントを追加しています。
今回は最もカンタンな”はてなブログのアイコンフォント”の使い方と種類を紹介します。
アイコンフォントの使い方
このアイコンフォントを使う時は、タグを使って、”HTML”上で下記のように記入します。
<i class="クラス名"></i>
すると上の様に”クラス名”にあわせて色んなアイコンが表示されます。
例えば
<i class="blogicon-home"></i> TOP
この様に記述すると、
「 TOP」という感じで表示されます。各自必要に応じて、アイコンフォントを使ってみましょう。
アイコンフォントのサイズを変えたい場合
「lg」をクラス名の後に半角スペースをあけて記述します。
<i class="blogicon-home lg"></i> TOP
「 TOP 」と少し協調した感じになりますね。
私のグローバルメニューでアイコンフォントを使った一例を紹介しておきます。
「管理メニュー」→「デザイン」→「カスタマイズ」→「ヘッダー」に下記HTMLを記述してます。
<li> <a href="https://redo5151.hatenablog.com/archive"><i class="blogicon-home"></i> TOP</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/音楽"><i class="blogicon-music"></i> 音楽</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/節約術"><i class="fas fa-coins"></i> 節約術</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/便利商品"><i class="fas fa-rocket"></i> 便利商品</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/健康"><i class="blogicon-miil"></i> 健康</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/Amazon"><i class="blogicon-amazon"></i> Amazon</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/山登り"><i class="fas fa-hiking"> </i> 山登り</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/ブログカスタマイズ"><i class="fa fa-cogs"></i> ブログカスタマイズ</a></li> <li> <a href="https://redo5151.hatenablog.com/archive/category/アフィリエイト"><i class="fas fa-tv"></i> ブログ運営</a></li> <li> <a href="https://redo5151.hatenablog.com/entry/2019/10/03/privacy"><i class="blogicon-account"></i> privacy policy</a></li>
このままコピーしてしまうと、私のURLにリンクしてしまうので、各自のURLに置き換えてグローバルメニューを見やすくしましょう。
Amazonやツイッター,Facebookさらにはmixiのアイコンまで合計”123種類”登録されているようです。
私ははてなブログのアイコンフォントに加えて、Fontawesomeのアイコンも使っています。
アイコンフォントがうまく表示されない方は以下の記事で対処方法を紹介していますので、参考にしてください。
redo5151.hatenablog.com
はてなブログアイコンフォント一覧
下記に現在までに登録されているはてなブログで使えるアイコンフォントを紹介しておきます。冒頭に紹介した方法で、ご自身の目的にあわせてアイコンフォントを使いこなしていきましょう。
| アイコン | クラス名 | コード | (日本語名) |
|---|---|---|---|
| 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 | Amazon | |
| 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 | Evernote | |
| blogicon-music | f046 | iTunes | |
| 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 | RSS | |
| - | - | f050 | - |
| blogicon-smartphone | f051 | スマホ | |
| blogicon-laptop | f052 | パソコン | |
| blogicon-mixi | f053 | ミクシィ | |
| blogicon-haiku | f054 | 俳句 | |
| blogicon-amp | f055 | 増幅 | |
| blogicon-quote | f704 | 引用 | |
| blogicon-toggle-on | f71d | トグル ON | |
| blogicon-toggle-off | f71e | トグル OFF | |
| blogicon-odaislot | f721 | スロット | |
| blogicon-grid-3x3 | f723 | グリッド 3x3 | |
| 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 | Flickr | |
| blogicon-gist | f717 | Gist | |
| blogicon-pixiv | f718 | pixiv | |
| blogicon-miil | f719 | ミイル | |
| blogicon-youtube | f71a | YouTube | |
| blogicon-instagram | f71b | ||
| blogicon-google-picker | f71c | Googleフォト | |
| blogicon-others | f710 | その他 | |
| blogicon-rakuten | f722 | 楽天 | |
| blogicon-breadcrumb | f726 | パンくずリスト | |
| blogicon-profilecard | f728 | プロフィール | |
| blogicon-snippet | f72a | 定型文 | |
| blogicon-dazn | f72b | DAZN |
まとめ
今回は「はてなブログ」でデフォルトで使える便利な”アイコンフォント”の表示方法を紹介しました。
グローバルメニューに追加すると見栄えが良くなりおすすめです。手っ取り早く代表的なフォントアイコンを使いたい方はまずははてなブログの”デフォルトアイコン”をうまく利用してみましょう。
ある程度慣れてきたら数万種類のアイコンフォントが使える「Font Awesome」を実装して、そちらと併用して使っていきましょう。
ブログのカスタマイズ方法を紹介してます。
・【SEO対策 はてなブログ】レイアウトもスッキリ｜グローバルメニュー追加方法紹介
・【SEO対策】はてなブログのお手軽カスタマイズ｜サイドバーに「カテゴリー」を追加する方法！
・【はてなブログ 吹き出し会話作成手順】 BUMPのライブMCを吹き出しで表現！
はてなブログで収益化を目指している方へ以下の記事も紹介しています。
redo5151.hatenablog.com
