紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

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

f:id:slash1196:20210616213039p:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

「はてなブログで書いているけど、フォントアイコンの使い方ってどうやって使うの?

誰か教えて」

 

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

 

 この記事で分かること

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

 

こんにちわ、紅蓮です。

 

僕は、はてなブログ3年目。

今では、アフィリエイトでの収益も月に3,000円くらいいただいています。

 

 

そんな僕が、はてなブログでフォントアイコンを使う方法についてわかりやすくお話していきます。

 

この記事を読み終わるころには、はてなブログで、フォントアイコンの使い方や使うメリット・デメリット、そして、コード表までばっちりわかるようになっています。

 

ぜひ最後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

 

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

f:id:slash1196:20210120212128j:plain

フォントアイコンと言ったら、Fontawsomeみたいなイメージがあるかもしれません。

 

確かにFontawsomeはアイコンフォントとしては無料で使えることもあり、種類もたくさんあるので重宝しますよね。

 

これは結構知らない人も多いんですが、はてなブログは、デフォルトでアイコンの設定があるんですよね。

 

しかも読み込みを設定することもなく使えるので、びっくりです。

 

自分のブログ表示させて、F12を押して、HTMLソースをコピーして、メモ帳に張り付けてみてください。

 

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

 

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

 

実はこれが読込先なんです。

 

簡単に言うと、はてなブログの運営側が設定してくれていて、アイコンを読み込んでくれているってことなんですね。

 

本来なら、別の読込先を設定しないといけないんですが、はてなブログは設定しなくてもそのまま使えます。

 

めちゃくちゃ便利ですよね。

 

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

f:id:slash1196:20210402145132j:plain

ここでは、はてなブログのアイコンを使うメリットとデメリットをお話ししていきましょう。

 

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

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

 

  • メリット①厳選されているので、読み込みが早い
  • メリット②迷うことがない

 

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

 

 メリット①厳選されているので、読み込みが速い

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

 

はてなブログに限らず、カスタマイズしたものって基本的にヘッダと呼ばれる部分で読み込まれています。

 

しかも書かれているコードを順番に読み込んでいく感じなので、読込先の数が多ければ多いほど時間がかかってしまいます。

 

ですから、読込先を少なくすれば、データ量も少なくなるので表示速度の軽量化にもつながるんですよね。

 

ですから、SEO的にもメリットですし、読者的にもメリットですよね。

 

 メリット②迷うことがない

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

 

はてなブログのフォントアイコンってほかのアイコンサービスに比べると、122種類と少なく厳選されているんですよね。

 

そのために、フォントアイコンを使うときに迷うことがありませんね。

 

人ってたくさんあると逆に決められなくなるというものが、心理学の実験で分かっていますね。

 

だから迷うことなく使えるのがいいところですね。

 

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

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

 

  • デメリット①ほしいものがない時もある
  • デメリット②運営側の都合によって、使えない時もある

 

では詳しく見ていきましょう。

 

 デメリット①ほしいものがない時もある

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

 

はてなブログのフォントアイコンは先ほども言いましたが、だいぶ厳選されているんですよね。

 

そのために、Wordpressなどを使っているサイトを見たときに「いいな」と思ったフォ0ントアイコンがはてなブログの中にないことがあるんです。

 

そうなると最終的にはフォントアイコンの読込先を設定しないといけませんから、表示速度も遅くなります。

 

ただ年々数は増えているようなので、使いがってはよくなってきていますね。

 

 デメリット②運営側の都合によって、使えない時もある

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

 

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

 

なのでちょっと注意が必要になることもありますね。

 

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

f:id:slash1196:20210225174909j:plain

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

 

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

 

トータルで、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
  blogicon-twitter f035
  blogicon-facebook f036
  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
  blogicon-music f046
  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
- - f050
  blogicon-smartphone f051
  blogicon-laptop f052
  blogicon-mixi f053
  blogicon-haiku f054
  blogicon-amp f055
  blogicon-quote f704
  blogicon-toggle-on f71d
  blogicon-toggle-off f71e
  blogicon-odaislot f721
  blogicon-grid-3x3 f723
  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
  blogicon-gist f717
  blogicon-pixiv f718
  blogicon-miil f719
  blogicon-youtube f71a
  blogicon-instagram f71b
  blogicon-google-picker f71c
  blogicon-others f710
  blogicon-rakuten f722
  blogicon-breadcrumb f726
  blogicon-profilecard f728
  blogicon-snippet f72a
  blogicon-dazn f72b

 

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

f:id:slash1196:20210128180612j:plain

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

使い方は以下の2種類があります。

 

  • 使い方①HTMLで入力する方法
  • 使い方②CSSで入力する方法

 

では詳しく見ていきましょう。

 

使い方①HTMLで入力する方法

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

HTMLにタグを入力して表示する方法ですね。

 

表示するHTMLは以下の通り。

 

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

 

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

 ←こんな感じに見えます。

 

 はてなブログでは、アイコン単体では使えない

はてなブログは非常に賢いシステムが採用されていまして、上記の状態でプレビューすると消えちゃうんですよね。

f:id:slash1196:20210616190424p:plain


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

 

そんな時には魔法の言葉、&nbsp;を入れてあげましょう。

 

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

 

この言葉は、半角を示す言葉です。

これを入れておくと、フォントアイコンを単体でも入れることができるようになります。

 

 フォントアイコンの色や大きさを変えたいとき

フォントアイコンの大きさを変えたい時ってありますよね。

 

そんな時には、以下のような感じで変えてあげるといいですね。

 

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

 

これは、フォントサイズを20pxで入力してくださいねという意味ですね。

 

すると以下のように変わります。

 

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

 

ちなみに色も変更することができます。

色の変更は、以下のようにしましょう。

 

<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」と進み、書いてあるコードの一番下にコードをコピペしましょう。

f:id:slash1196:20210606181402j:plain

 

 コピー用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種類ある
  • 使い方はHTMLで直接入力する方法とCSSから読み出す方法がある。

 

どんどん使って、わかりやすい文章になるようにしましょうね。

 

そうするとSEO的にもよくなりますし、読者のためにもなるので万々歳ですね。

さあどんどん使いましょうね。

 

なお、こう言ったカスタマイズには、基本的にhtmlやCSSの知識が不可欠になりますので、もし興味がわいたら、必要な知識を勉強するのも一つですね。

 

HTMLやCSSなどのデザインの本に関しては、アフィリエイトを勉強するのにおすすめな本15選【行動も説明】 にてお話ししておりますので、是非お読みになってくださいね。

 

 ちょっと宣伝

なおこのブログでは、アフィリエイトをやったことがないあなたにアフィリエイトのやり方や考え方、はてなブログの使い方などを中心に記事を毎日更新中です。

 

もしこの記事が「面白い」、もしくは「ためになった」と思っていただけたらコメントや読者登録をしていただけると励みになりますので、よろしくお願いいたします。

読者登録はこちらから

 

では今回はこの辺で。

また次回に。