フォントアイコンの使い方を知ればはてなブログは最高な話

こんなお悩みに、お答えします。

この記事で分かること

こんにちわ、Jouji(@jouji0720)です。僕は、現在webライター4年目、専業でWebライターとして生活しています。

僕も映画ブログを運営していて、はてなブログを使っています。そんな僕が、はてなブログでフォントアイコンを使う方法について、お話していきます。

この記事を読むと、はてなブログでフォントアイコンの使い方や使うメリット・デメリット、コード表の例までばっちりわかるようになりますので、ぜひ最後までお読みくださいね。

はてなブログはデフォルトでフォントアイコンがある

フォントアイコンと言ったら、Font Awesomeというイメージはありませんか。確かにFontawesomeは、無料で使えるし、フォントアイコンの数も多いから、利用したいときの感情で使えます。

とはいえ、使う分量が決まっている人からすれば、利用に必要な分のみでいいというのが本音ではないでしょうか。

そんな時に利用できるのが、はてなブログのアイコン機能です。はてなブログにはアイコン機能が備わっています。読み込み先の設定も不要なので、びっくりです。

自身のブログを表示させた状態で、F12を押してみましょう。そして、HTMLソースをコピーして、メモ帳に張り付けてみてください。

確認してみると、以下のような文があるはずです。

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=c0855a8d3aff2a993131d08088e3d2c67cfcd12b&amp;env=production">

これが読込先です。

はてなブログの運営側が設定してくれていて、アイコンを読み込んでくれています。Wordpressの場合は、読み込み先がFontawesomeなので、そちらが有名になったということです。

別の読込先を設定しないといけないけど、はてなブログは設定しなくてもそのまま使えます。便利な機能なので覚えておきましょう。

はてなブログのフォントアイコンの使い方

はてなブログでのフォントアイコンの使い方は、2種類あり、次の通りです。

それぞれ確認します。

HTMLで入力する方法

はてなブログでフォントアイコンを使う方法の1つ目は、HTMLで入力する方法です。HTMLで入力する方法は、HTML編集画面にタグを入力して表示する方法です。

表示するHTMLコードは、次の通りです。

<i class="blogicon-check">&nbsp;</i>

するとチェックマークが入力されます。

はてなブログは賢いシステムが採用されていまして、下記の状態でプレビューすると、表示されません。

<i class="fas fa-check"></i>

というのも、タグの間に何も入っていないと、囲んでいるものがないので、必要がないと勘違いして、消えてしまうんです。

そんな時は、 を入れましょう。

<i class="blogicon-check">&nbsp;</i>

上記の＆nbsp;は、半角を示すコードです。入れておくと、フォントアイコンを単体で使えるようになります。

アイコンフォントのサイズの変更方法

フォントアイコンのサイズを変更の仕方は、次のように書きます。

<i class="blogicon-check" style="font-size:20px;">&nbsp;</i>

コードの解説
style属性を使って、font-sizeプロパティを使って20pxと指定しています。20pxのところの数値は変更可能です。好きな数値にしておくといいです。

とはいえ、あまり大きすぎると、文字とのバランスが悪くなるので、文字とのフォントサイズ差は5px以内にするのがおすすめです。

←大きさが変わっていますね。

ちなみに、色も変更することができます。色の変更は、以下のようにしましょう。

<i class="blogicon-check" style="color:#4682b4;">&nbsp;</i>

すると、以下のような見え方になります。

←色が変わっていますね。

色のコードに関しては、WEB色見本 原色大辞典 で確認をしてみるといいでしょう。もちろん大きさと色両方変えたいときには、1つにまとめられます。

以下の通り。

<i class="blogicon-check" style="font-size:20px;color:#4682b4;">&nbsp;</i>

とすると、大きさと色が変わります。次が見栄えです。

←大きさと色変更が完了してます。

CSSで入力する方法

はてなブログでフォントアイコンを使う方法の2つ目は、CSSで入力する方法です。

この方法はCSSを入力して、ある一定の時だけフォントアイコンを読み出す方法です。

CSSコード置く場所

「デザイン」→「カスタマイズ」→「デザインCSS」と進み、書いてあるコードの一番下に、コードをコピペしましょう。

コピー用CSSコード

.blogicon:before{
font-family:blogicon;
content;"\f029";

赤文字のところは、変更が可能です。content:”\f029”;のところは、好きなものを入れてください。

.blogiconの部分ですが、好きなclass分けを行って、結構です。ただ注意が必要で、今まで使ったことがないclassを定義づけることです。先にあると、別のclassが干渉する恐れがあるので注意が必要ですね。

色や大きさを変えたいとき

色や大きさを変えたいときには、先ほどのCSSコードの中に、color:とfont-size:を入れてあげましょう。

先ほどの例で行くと、以下のような感じ。

.blogicon:before{
font-family:blogicon;
content;"\f029";
font-size:20px;
color:#4682b4;
}

HTMLコードを入力して使う

使うHTMLコードは、次の通りです。

<span class="blogicon">ポイント</span>

すると、見栄えは次のような感じです。

 ポイント←こんな感じ

以上がフォントアイコンの使い方になります。

はてなブログのフォントアイコンの種類一覧

実ははてなブログの公式サイトにも、アイコンの使い方って載っていないみたいなんですよね。

ここでは、ちょっとアイコンを使いたいので、はてなブログのフォントアイコンの種類を一覧にしてみました。

トータルで、122種類あります。

アイコン	クラス名	コード	(日本語名)
	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-3×3	f723	グリッド 3×3
	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

はてなブログのフォントアイコンを使うメリット・デメリット

はてなブログのフォントアイコンを使うメリットとデメリットをお話ししていきます。

はてなブログのフォントアイコンを使うメリット

はてなブログのフォントアイコンを使うメリットは、次のものがあります。

では一つずつ見ていきましょう。

厳選されているので、読み込みが速い

はてなブログのフォントアイコンを使うメリットの１つ目は、厳選されているので、読み込みが早いことです。

はてなブログに限らず、ブログは、ヘッダと呼ばれる部分で読み込まれています。しかも書かれているコードを順番に読み込んでいくので、読込先の数が多ければ多いほど時間がかかってしまいます。

ですから、読込先を少なくすれば、データ量も少なくなるので表示速度の軽量化にもつながります。SEO的にもメリットですし、読者的にもすぐに答えを得られるのでメリットです。

迷うことがない

はてなブログのフォントアイコンを使うメリットの２つ目は、迷うことがないことです。

はてなブログのフォントアイコンは、ほかのアイコンサービスに比べると、124種類と少ないです。これは、使うものを厳選されていることを意味します。つまり、フォントアイコンを選ぶ時に、迷うことがありません。

人は選択肢が多いと、逆に決められなくなるという心理学の実験結果があります。だから迷うことなく使えるのがいいところですね。

はてなブログのフォントアイコンを使うデメリット

はてなブログのフォントアイコンを使うデメリットは、次の通りです。

それぞれ解説します。

欲しいものがない時がある

はてなブログのフォントアイコンを使うデメリットの1つ目は、欲しいものがない時もあることです。

はてなブログのフォントアイコンは、先ほども言いましたが、だいぶ厳選されています。Wordpressで作った記事を見て、使いたいと思ったフォントアイコンが、はてなブログの中にないことがあります。

そうなるとフォントアイコンの読込先を設定しないといけませんから、ちょっと面倒くさいと感じるかもしれません。ただ年々数は増えているようなので、使い勝手はよくなってきています。

運営側の都合で、使えない時もある

はてなブログのフォントアイコンを使うデメリットの2つ目は、運営側の都合で、使えない時もあることです。

アイコンを使うときには、読込先に接続して読み込んで表示させています。しかし、メンテナンスやアップデートなどの運営側の都合によって使えない時もあります。

そうなると更新したいときには使えなくなり、記事をかけなかったり投稿したい記事を投稿できなかったりすることもありますので、注意が必要です。

まとめ｜フォントアイコンの使い方を知って、見やすいブログ作成をしよう

ここまで、はてなブログでフォントアイコンの使い方をお話してきました。

はてなブログのアイコンはFontawesomeよりも少ないので、使いやすいですし、SEO的にもよくなりますし、読者のためにもなるのでぜひ使ってみましょう。

今回は以上です。

次に読むのにおすすめの記事