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

はてなブログ初心者

「はてなブログで書いているけど、フォントアイコンの使い方ってどうやって使うの？教えてほしいな」

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

この記事で分かること

はてなブログはデフォルトでフォントアイコンがある
はてなブログのフォントアイコンの使い方
はてなブログのフォントアイコンの種類一覧
はてなブログアイコンを使うメリット・デメリット

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

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

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

はてなブログはデフォルトでフォントアイコンがある
はてなブログのフォントアイコンの使い方
- HTMLで入力する方法
- CSSで入力する方法
はてなブログのフォントアイコンの種類一覧
はてなブログのフォントアイコンを使うメリット・デメリット
- はてなブログのフォントアイコンを使うメリット
- はてなブログのフォントアイコンを使うデメリット
まとめ｜フォントアイコンの使い方を知って、見やすいブログ作成をしよう

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

フォントアイコンと言ったら、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で入力する方法
CSSで入力する方法

それぞれ確認します。

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