はてなブログを見ていて、「このアイコン、どうやって表示しているんだろう？」と思ったことはありませんか？アイコンフォントを使えば、ブログのデザインをちょっとおしゃれにしたり、見やすく整理したりできます。
この記事では、はてなブログで使えるアイコンフォントを一覧にまとめて、実際に表示させる方法をわかりやすくシェアします。コードもシンプルなので、初心者の方でもすぐに試せますよ！ぜひブログのデザインにアイコンを取り入れてみてください。
Contents
はてなブログ アイコンフォント表示のさせ方
見たままモード
<span class="blogicon-hatenablog"> </span> hatenablogのところを使いたいアイコン名に変える
ＨＴＭＬ表記
<i class="blogicon-hatenablog"></i>hatenablogのところを変える
<a href="自分のＨＰアドレス">
<i class="blogicon-hatenablog"></i>はてなブログ
</a>
大きく表示したい場合
見たままモード
<span class="blogicon-hatenablog lg"> </span> ＨＴＭＬ表記
<i class="blogicon-hatenablog lg"></i>一覧表
WordPressではアイコンフォントの表示が異なるため、アイコン一覧と見本は以下より確認できます。
Naluとシェア
【はてなブログ】アイコンフォント一覧＆使い方 – Naluとシェア
はてなブログでは、アイコンフォントを活用することでデザインや視認性を向上させることができます。本記事では、はてなブログで使用可能なアイコンフォントの全種一覧を掲…
| f000 | はてなブログ | blogicon-hatenablog |
|---|---|---|
| f001 | プラス | blogicon-plus |
| f002 | マイナス | blogicon-minus |
| f003 | 並び替え | blogicon-reorder |
| f004 | グリッド | blogicon-grid |
| f005 | 山形 左 | blogicon-chevron-left |
| f006 | 山形 右 | blogicon-chevron-right |
| f007 | 山形 上 | blogicon-chevron-up |
| f008 | 山形 下 | blogicon-chevron-down |
| f009 | 外部 | blogicon-external |
| f00a | プラグイン | blogicon-plugin |
| f00b | メンバー | blogicon-member |
| f00c | アカウント | blogicon-account |
| f00d | デザイン | blogicon-design |
| f00e | 歯車 | blogicon-cog |
| f00f | ページ | blogicon-pages |
| f010 | 編集 | blogicon-edit |
| f011 | スター | blogicon-addstar |
| f012 | 購読 | blogicon-subscribe |
| f013 | 記事 | blogicon-entry |
| f014 | 通知 | blogicon-notify |
| f015 | 鍵 | blogicon-private |
| f016 | ユーザー | blogicon-user |
| f017 | ホーム | blogicon-home |
| f018 | スパナ | blogicon-setting |
| f019 | ドラフト | blogicon-draft |
| f01a | 検索 | blogicon-search |
| f01b | アナリティクス | blogicon-analytics |
| f01c | ヘルプ | blogicon-help |
| f01d | コメント | blogicon-comment |
| f01e | インポート | blogicon-import |
| f01f | お題 | blogicon-odai |
| f020 | トラック | blogicon-truck |
| f021 | グループ | blogicon-group |
| f022 | フォルダ | blogicon-folder |
| f023 | 追加 | blogicon-add |
| f024 | ペン | blogicon-pen |
| f025 | 閉じる | blogicon-close |
| f026 | ゴミ箱 | blogicon-trash |
| f027 | ブックマーク | blogicon-bookmark |
| f028 | リダイレクト | blogicon-redirect |
| f029 | チェック | blogicon-check |
| f02a | クロップ | blogicon-crop |
| f02b | リピート | blogicon-repeat |
| f02c | ログアウト | blogicon-logout |
| f02d | スター | blogicon-star |
| f720 | スター | blogicon-star-o |
| f02e | プロ | blogicon-pro |
| f030 | マイブログ | blogicon-myblog |
| f031 | 最新 | blogicon-recent |
| f032 | インフォメーション/告知 | blogicon-info |
| f033 | いいね | blogicon-good |
| f034 | Amazon | blogicon-amazon |
| f035 | blogicon-twitter | |
| f036 | blogicon-facebook | |
| f037 | シェア | blogicon-share |
| f038 | コード | blogicon-code |
| f039 | リスト | blogicon-list |
| f03a | カレンダー | blogicon-calendar |
| f03b | 中括弧 | blogicon-bracket |
| f03c | 写真 | blogicon-photo |
| f03d | 色 | blogicon-color |
| f03e | パブリック/公共の | blogicon-public |
| f040 | リアルタイムプレビュー | blogicon-realtime-preview |
| f041 | 警告 | blogicon-warning |
| f042 | リンク | blogicon-link |
| f043 | 時間 | blogicon-time |
| f044 | マークダウン | blogicon-markdown |
| f045 | Evernote | blogicon-evernote |
| f046 | iTunes | blogicon-music |
| f047 | ニコニコ動画 | blogicon-niconico |
| f048 | ハート | blogicon-heart |
| f049 | ハート | blogicon-heart-alt |
| f04a | タグ | blogicon-tag |
| f04b | メール | blogicon-mail |
| f04c | ヘルプ | blogicon-help-alt |
| f04d | すし | blogicon-sushi |
| f04e | RSS | blogicon-rss |
| f051 | スマホ | blogicon-smartphone |
| f052 | パソコン | blogicon-laptop |
| f053 | ミクシィ | blogicon-mixi |
| f054 | 俳句 | blogicon-haiku |
| f055 | AMP | blogicon-amp |
| f704 | 引用 | blogicon-quote |
| f700 | 箇条書き | blogicon-editor-unorderedlist |
| f701 | 番号付きリスト | blogicon-editor-orderedlist |
| f702 | リンク | blogicon-editor-link |
| f703 | 続きを読む | blogicon-editor-seemore |
| f704 | 引用 | blogicon-editor-blockquote |
| f705 | 脚注 | blogicon-editor-footnote |
| f706 | ツール バー表示 | blogicon-editor-toolbar-show |
| f707 | ツールバー非表示 | blogicon-editor-toolbar-hide |
| f708 | 太字 | blogicon-editor-bold |
| f709 | 斜体 | blogicon-editor-italic |
| f70a | 打消 | blogicon-editor-strike |
| f70b | 下線 | blogicon-editor-underline |
| f70c | 文字の大きさ | blogicon-editor-fontsize |
| f70d | 文字色 | blogicon-editor-color |
| f710 | その他 | blogicon-others |
| f711 | フォトライフ | blogicon-fotolife |
| f713 | サイドバー開閉 | blogicon-curation-bar-toggle |
| f714 | ペイント | blogicon-paint |
| f715 | レストラン | blogicon-gourmet |
| f716 | Flickr | blogicon-flickr |
| f717 | Gist | blogicon-gist |
| f718 | pixiv | blogicon-pixiv |
| f719 | ミイル | blogicon-miil |
| f71a | YouTube | blogicon-youtube |
| f71b | blogicon-instagram | |
| f71c | Googleフォト | blogicon-google-photos |
| f71d | トグル ON | blogicon-toggle-on |
| f71e | トグル OFF | blogicon-toggle-off |
| f721 | スロット | blogicon-odaislot |
| f722 | 楽天 | blogicon-rakuten |
| f723 | グリッド 3×3 | blogicon-grid-3×3 |
| f724 | グリッド 縦 | blogicon-grid-vertical |
| f725 | 目次 | blogicon-editor-insert-toc |
| f726 | パンくずリスト | blogicon-breadcrumb |
| f727 | ピン留め | blogicon-pinned |
| f728 | プロフィール | blogicon-profilecard |
| f72a | 定型文 | blogicon-snippet |
| f72b | DAZN | blogicon-dazn |
アイコンフォントを事前に登録して便利に使おう！
頻繁に使うアイコンフォントのコードを、はてなブログの定型文機能に登録しておくことで、記事作成の際に簡単に呼び出すことができます。
定型文登録手順
- はてなブログの「ダッシュボード」に移動
- 「定型文」設定を開く
- よく使うアイコンコードを登録
- 記事作成時に定型文を呼び出して、コードをすぐに挿入
