redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

【ブログカスタマイズ】「はてなブログ」のアイコンフォントの種類・使い方を解説|グローバルメニューにおすすめ

はてなブログ アイコンフォント

今回ははてなブログ」でデフォルトで使えるとても便利な”アイコンフォント”の表示方法を紹介したいと思います。

アイコンフォントを使いこなすとはてなブログの見た目がオシャレになり、見栄えもよくなります。

毎年はてなブログで使えるアイコンフォントは増えており、昨年から「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">&nbsp;</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 Twitter
blogicon-facebook f036 Facebook
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 Instagram
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

redo5151.hatenablog.com