はてなブログで標準で使えるアイコンフォント(Webフォント)とその使い方を紹介します。
↓↓これぜんぶ!ダウンロードしなくても使えます!!
グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。
ポイントを目立たせたい時
↓↓
ポイント
スマホのボトムメニュー
↓↓(ボトムメニューのCSSはこちら)
SNSのシェアボタンなどをつくるのにも使えます!
この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。
アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。
これらのフォントであれば、外部から読み込むよりページが重くならず、表示も早いです!
*なお、私の作った、はてなブログのテーマ「Palette(パレット)」では、アイコンはすべて「はてなブログアイコン」を利用しています。
それでは、さっそくブログでの表示方法、注意点などを見ていきましょう〜♪
(アイコンフォント124種類の一覧表は最後に掲載しています)
はてなブログのアイコンフォントを表示する方法
はてなブログのアイコンを表示するには、
1) HTMLで表示
2) CSS で表示
のふた通りのやり方があります。
1) HTMLで表示する場合
はてなブログの編集画面の「html編集」でクラス名にアイコンのクラス名を入れて使います。
*基本の使い方
↓このままコピペして "blogicon-hatenablog" の部分は後述の一覧表の「クラス名」ってところを入れてください。
**ご注意**
以前は、↓の<i>タグがそのまま使えていたようですが、これを書いている2021年11月現在は、<i>タグで書いても編集画面で一度保存すると上記の<em>タグに自動的に変換されるようになっていました。(なので、最初からemタグで良いのかな)
さらに…2021年11月現在では、<span>タグや<p>などでもclass名をblogiconのクラス名で指定すると使えるっぽいです。
<p>タグも使えた↓↓
*私は個人的にこんな風なマーカーを<em>タグに設定しているので、<i>タグを使うと自動的に<em>タグに変換されてしまい、アイコンが ←このようにマーカーされてしまうので、<span>タグを使うことにします♪
例えばこんな感じで使えます♪
コード↓
アイコンを少し大きく表示したい時は、"blogicon-××× lg"←というように、スペースlgを入れると若干大きく表示されます。
おすすめランチランキング
はてなブログアイコンフォントが表示されない時の対処法
上記で説明した、HTMLで表示する方法は、上に表示しているものをコピペすれば、基本的に使えると思いますが、コードを直接HTMLに記述する場合には「はてなブログ」の仕様上うまくいかない場合があります。
「はてなブログ」編集画面では、タグでくくってある中が空欄だと勝手に削除されてしまうようです。(記述を間違えている場合は便利な機能だと思いますが…)
つまり↓↓このように〜"></span の間に何もないとHTML編集で保存した際にタグ自体が削除されてしまいます。
これを防ぐためには、スペースの代わりになる「 」を入れる必要があります。
↓↓こうすれば完璧!
2) CSSで表示する場合
もう一つの表示の仕方として、CSSの「::before」などの擬似要素として表示することができます。
基本的には、アイコンを表示したい要素の「クラス名」::before をつけ以下のように書きます。
html
css
↓こんな風に表示されます
ポイント
例えば、リストの丸ポチをアイコンに変更したり。
- リスト1
- リスト2
- リスト3
「見出し」の前に入れたり。
見出しのデザイン
Twitterのフォローボタンとか
html
CSS
いろいろと使い道がありそうですね(^-^)♪
はてなブログWEBフォント一覧【124種類】
2021年11月現在、私が把握しているフォントは次の122種類+2種類。
+と書いたのは、これのクラス名が良くわからないので別にしています。
no | アイコン | クラス名 | コード |
---|---|---|---|
1 | blogicon-hatenablog | \f000 | |
2 | blogicon-plus | \f001 | |
3 | blogicon-minus | \f002 | |
4 | blogicon-reorder | \f003 | |
5 | blogicon-grid | \f004 | |
6 | blogicon-chevron-left | \f005 | |
7 | blogicon-chevron-right | \f006 | |
8 | blogicon-chevron-up | \f007 | |
9 | blogicon-chevron-down | \f008 | |
10 | blogicon-external | \f009 | |
11 | blogicon-plugin | \f00a | |
12 | blogicon-mspanber | \f00b | |
13 | blogicon-account | \f00c | |
14 | blogicon-design | \f00d | |
15 | blogicon-cog | \f00e | |
16 | blogicon-pages | \f00f | |
17 | blogicon-edit | \f010 | |
18 | blogicon-addstar | \f011 | |
19 | blogicon-subscribe | \f012 | |
20 | blogicon-entry | \f013 | |
21 | blogicon-notify | \f014 | |
22 | blogicon-private | \f015 | |
23 | blogicon-user | \f016 | |
24 | blogicon-home | \f017 | |
25 | blogicon-setting | \f018 | |
26 | blogicon-draft | \f019 | |
27 | blogicon-search | \f01a | |
28 | blogicon-analytics | \f01b | |
29 | blogicon-help | \f01c | |
30 | blogicon-comment | \f01d | |
31 | blogicon-import | \f01e | |
32 | blogicon-odai | \f01f | |
33 | blogicon-truck | \f020 | |
34 | blogicon-group | \f021 | |
35 | blogicon-folder | \f022 | |
36 | blogicon-add | \f023 | |
37 | blogicon-pen | \f024 | |
38 | blogicon-close | \f025 | |
39 | blogicon-trash | \f026 | |
40 | blogicon-bookmark | \f027 | |
41 | blogicon-redirect | \f028 | |
42 | blogicon-check | \f029 | |
43 | blogicon-crop | \f02a | |
44 | blogicon-repeat | \f02b | |
45 | blogicon-logout | \f02c | |
46 | blogicon-star | \f02d | |
47 | blogicon-star-o | \f720 | |
48 | blogicon-pro | \f02e | |
49 | blogicon-myblog | \f030 | |
50 | blogicon-recent | \f031 | |
51 | blogicon-info | \f032 | |
52 | blogicon-good | \f033 | |
53 | blogicon-amazon | \f034 | |
54 | blogicon-twitter | \f035 | |
55 | blogicon-facebook | \f036 | |
56 | blogicon-share | \f037 | |
57 | blogicon-code | \f038 | |
58 | blogicon-list | \f039 | |
59 | blogicon-calendar | \f03a | |
60 | blogicon-bracket | \f03b | |
61 | blogicon-photo | \f03c | |
62 | blogicon-color | \f03d | |
63 | blogicon-public | \f03e | |
64 | blogicon-realtime-preview | \f040 | |
65 | blogicon-warning | \f041 | |
66 | blogicon-link | \f042 | |
67 | blogicon-time | \f043 | |
68 | blogicon-markdown | \f044 | |
69 | blogicon-evernote | \f045 | |
70 | blogicon-music | \f046 | |
71 | blogicon-niconico | \f047 | |
72 | blogicon-heart | \f048 | |
73 | blogicon-heart-alt | \f049 | |
74 | blogicon-tag | \f04a | |
75 | blogicon-mail | \f04b | |
76 | blogicon-help-alt | \f04c | |
77 | blogicon-sushi | \f04d | |
78 | blogicon-rss | \f04e | |
79 | blogicon-smartphone | \f051 | |
80 | blogicon-laptop | \f052 | |
81 | blogicon-mixi | \f053 | |
82 | blogicon-haiku | \f054 | |
83 | blogicon-amp | \f055 | |
84 | blogicon-quote | \f704 | |
85 | blogicon-toggle-on | \f71d | |
86 | blogicon-toggle-off | \f71e | |
87 | blogicon-odaislot | \f721 | |
88 | blogicon-grid-3×3 | \f723 | |
89 | blogicon-grid-vertical | \f724 | |
90 | blogicon-pinned | \f727 | |
91 | blogicon-editor-unorderedlist | \f700 | |
92 | blogicon-editor-orderedlist | \f701 | |
93 | blogicon-editor-link | \f702 | |
94 | blogicon-editor-seemore | \f703 | |
95 | blogicon-editor-blockquote | \f704 | |
96 | blogicon-editor-footnote | \f705 | |
97 | blogicon-editor-toolbar-show | \f706 | |
98 | blogicon-editor-toolbar-hide | \f707 | |
99 | blogicon-editor-bold | \f708 | |
100 | blogicon-editor-italic | \f709 | |
101 | blogicon-editor-strike | \f70a | |
102 | blogicon-editor-underline | \f70b | |
103 | blogicon-editor-fontsize | \f70c | |
104 | blogicon-editor-color | \f70d | |
105 | blogicon-editor-insert-toc | \f725 | |
106 | blogicon-fotolife | \f711 | |
107 | blogicon-curation-bar-toggle | \f713 | |
108 | blogicon-paint | \f714 | |
109 | blogicon-gourmet | \f715 | |
110 | blogicon-flickr | \f716 | |
111 | blogicon-gist | \f717 | |
112 | blogicon-pixiv | \f718 | |
113 | blogicon-miil | \f719 | |
114 | blogicon-youtube | \f71a | |
115 | blogicon-instagram | \f71b | |
116 | blogicon-google-photos | \f71c | |
117 | blogicon-others | \f710 | |
118 | blogicon-rakuten | \f722 | |
119 | blogicon-breadcrumb | \f726 | |
120 | blogicon-profilecard | \f728 | |
121 | blogicon-snippet | \f72a | |
122 | blogicon-dazn | \f72b | |
123 | - | \f050 | |
124 | - | \f712 |
みなさまのブログ運営の参考になれば幸いです♪
このブログについて
著者:元CAバンビ
もともとは国際線のCAをしていました。趣味で「旅行ブログ」を書いているうちにブログ運営そのものに興味を持ち、HTMLやCSS、Javascripなどの言語やSEOについて独学で勉強し、はてなブログのテーマ「Palette(パレット)」を公開しました。
現在では、はてなブログやWordPressなどで5つのブログを運営しています。
当ブログでは、自身の経験からブログ運営やカスタマイズ方法などを紹介しています。
詳しくはサイトマップをご覧ください♪
はてなブログの方は読者登録よろしくお願いします。
↓↓
自分自身の経験からはてなブログを収益化して、ブログで戦略的に稼ぐ方法も解説しています。
◆アフィリエイトやSEO対策については、こちらもご覧ください♪
はてなブログ【アフィリエイト】で素人が月間10万円の収益を得た5つの方法
ブロガー必見!アドセンスよりアフィリエイトASPに登録すべき3つの理由
戦略的アフィリエイトのすすめ!雑記ブログを収益化して月々5万円稼ぐ方法