バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます!

【はてなブログ】ブログアイコン、Webフォント一覧(124種類)使い方、表示されない時の対処法

f:id:zuboraca:20211114160732j:plain

 

はてなブログで標準で使えるアイコンフォント(Webフォント)とその使い方を紹介します。

↓↓これぜんぶ!ダウンロードしなくても使えます!!

f:id:zuboraca:20211114160834p:plain

グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。

ポイントを目立たせたい時
↓↓

  ポイント

スマホのボトムメニュー
↓↓(ボトムメニューのCSSはこちら

f:id:zuboraca:20211114165430j:plain

SNSのシェアボタンなどをつくるのにも使えます!

 

この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。

 

アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。

これらのフォントであれば、外部から読み込むよりページが重くならず、表示も早いです!

*なお、私の作った、はてなブログのテーマ「Palette(パレット)」では、アイコンはすべて「はてなブログアイコン」を利用しています。

 

 

それでは、さっそくブログでの表示方法、注意点などを見ていきましょう〜♪
(アイコンフォント124種類の一覧表は最後に掲載しています)

 

はてなブログのアイコンフォントを表示する方法

はてなブログのアイコンを表示するには、
1) HTMLで表示
2) CSS で表示
のふた通りのやり方があります。

1) HTMLで表示する場合

はてなブログの編集画面の「html編集」でクラス名にアイコンのクラス名を入れて使います。

*基本の使い方

<em class="クラス名"> </em>

↓このままコピペして "blogicon-hatenablog" の部分は後述の一覧表の「クラス名」ってところを入れてください。

<em class="blogicon-hatenablog"> </em>

 

**ご注意**

以前は、↓の<i>タグがそのまま使えていたようですが、これを書いている2021年11月現在は、<i>タグで書いても編集画面で一度保存すると上記の<em>タグに自動的に変換されるようになっていました。(なので、最初からemタグで良いのかな)

<i class="blogicon-hatenablog"> </i>

さらに…2021年11月現在では、<span>タグや<p>などでもclass名をblogiconのクラス名で指定すると使えるっぽいです。

<span class="blogicon-hatenablog"> </span>

<p>タグも使えた↓↓

<p class="blogicon-hatenablog"> </p>

*私は個人的にこんな風なマーカーを<em>タグに設定しているので、<i>タグを使うと自動的に<em>タグに変換されてしまい、アイコンが  ←このようにマーカーされてしまうので、<span>タグを使うことにします♪

 

 例えばこんな感じで使えます♪

コード↓

<p style="font-size: 150%; font-weight: bold; color: #4682b4;"><span class="blogicon-good"> </span>例えばこんな感じで使えます♪</p>

 

外部リンク  

<a href="https://リンク先">外部リンク<span class="blogicon-external"> </span></a>

 

アイコンを少し大きく表示したい時は、"blogicon-×××  lg"←というように、スペースlgを入れると若干大きく表示されます。

 おすすめランチランキング

<p><span class="blogicon-gourmet lg"> </span>おすすめランチランキング<p>

 

はてなブログアイコンフォントが表示されない時の対処法

上記で説明した、HTMLで表示する方法は、上に表示しているものをコピペすれば、基本的に使えると思いますが、コードを直接HTMLに記述する場合には「はてなブログ」の仕様上うまくいかない場合があります。

「はてなブログ」編集画面では、タグでくくってある中が空欄だと勝手に削除されてしまうようです。(記述を間違えている場合は便利な機能だと思いますが…)

 

つまり↓↓このように〜"></span の間に何もないとHTML編集で保存した際にタグ自体が削除されてしまいます。

<span class="blogicon-good"></span>

 

これを防ぐためには、スペースの代わりになる「&nbsp;」を入れる必要があります。

↓↓こうすれば完璧!

<span class="blogicon-good">&nbsp;</span>

 

2) CSSで表示する場合

もう一つの表示の仕方として、CSSの「::before」などの擬似要素として表示することができます。

基本的には、アイコンを表示したい要素の「クラス名」::before をつけ以下のように書きます。

html

<p class="point">ポイント</p>

css

.point::before{
    font-family: blogicon;
    content: "\f041";
}

↓こんな風に表示されます

ポイント

 

例えば、リストの丸ポチをアイコンに変更したり。

  • リスト1
  • リスト2
  • リスト3
ul li{
    list-style: none;
}
ul li::before{
    font-family: blogicon;
    content: "\f029";
    color:#4682b4;
    letter-spacing:0.5rem;
}

 

「見出し」の前に入れたり。

見出しのデザイン

.entry-content h2{
    border-left:3rem solid #87cafe;
    background-color:#e0cafe;
    color:#483d8b;
    padding:10px;
}
h2::before{
    font-family: blogicon;
    content: "\f024";
    position:absolute;
    left:1.5rem;
    color:#fff;
}

 

Twitterのフォローボタンとか

 

html

<p><a href="#" class="twitter-btn"> </a></p>

CSS

.twitter-btn{
    display:block;
    width:20px;
    height:20px;
    background-color:#00a1e9;
    border-radius:50px;
    padding:20px;
    text-decoration:none;
}
.twitter-btn:hover{
    background-color:#00cafe;
}
.twitter-btn::before{
    font-family: blogicon;
    content: "\f035";
    font-size:40px;
    position:relative;
    top:-25px;
    left:-8px;
    color:#fff;
}

 

いろいろと使い道がありそうですね(^-^)♪

 

はてなブログ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

 

みなさまのブログ運営の参考になれば幸いです♪

 

このブログについて

f:id:zuboraca:20210731122423j:plain


著者:元CAバンビ

もともとは国際線のCAをしていました。趣味で「旅行ブログ」を書いているうちにブログ運営そのものに興味を持ち、HTMLやCSS、Javascripなどの言語やSEOについて独学で勉強し、はてなブログのテーマ「Palette(パレット)」を公開しました。

現在では、はてなブログやWordPressなどで5つのブログを運営しています。
当ブログでは、自身の経験からブログ運営やカスタマイズ方法などを紹介しています。
詳しくはサイトマップをご覧ください♪

はてなブログの方は読者登録よろしくお願いします。
↓↓

  

自分自身の経験からはてなブログを収益化して、ブログで戦略的に稼ぐ方法も解説しています。

◆アフィリエイトやSEO対策については、こちらもご覧ください♪

はてなブログ【アフィリエイト】で素人が月間10万円の収益を得た5つの方法 

ブロガー必見!アドセンスよりアフィリエイトASPに登録すべき3つの理由

戦略的アフィリエイトのすすめ!雑記ブログを収益化して月々5万円稼ぐ方法