monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

トップ > よく使うはてなブログのWebアイコンフォント

よく使うはてなブログのWebアイコンフォント

はてなブログでは、独自のWebアイコンフォントが用意されています。

Webアイコンフォントで有名なのが Font Awesome ですが、アイコンの種類はとても豊富にありますが、サイトが若干重くなってしまいます。はてなブログのWebアイコンフォントは120種類以上ありますが、動作が軽いので、できるだけはてなブログのWebアイコンフォントを利用したいです。

よく利用するWebアイコンフォントをコピペできるようにメモしておくことにします。

解説で使う用

スマホの詳細設定

「管理画面」→「 デザイン」→「 デザインスマートフォン」→高度な設定の「 詳細設定」

「管理画面」→「<span class="blogicon-design">&nbsp;</span>デザイン」→「<span class="blogicon-smartphone">&nbsp;</span>デザインスマートフォン」→高度な設定の「<span class="blogicon-setting">&nbsp;</span>詳細設定」

ブログタイトル下

「管理画面」→「 デザイン」→「 カスタマイズ」 →「ヘッダ」→「ブログタイトル下」

「管理画面」→「<span class="blogicon-design">&nbsp;</span>デザイン」→「<span class="blogicon-setting">&nbsp;</span>カスタマイズ」 →「ヘッダ」→「ブログタイトル下」

フッタ

「管理画面」→「 デザイン」→「 カスタマイズ」 →「フッタ」

「管理画面」→「<span class="blogicon-design">&nbsp;</span>デザイン」→「<span class="blogicon-setting">&nbsp;</span>カスタマイズ」 →「フッタ」

メタタグ

「管理画面」→「  設定」→「詳細設定」→「<head要素>にメタタグを追加」

「管理画面」→「<span class="blogicon-setting">&nbsp;</span> 設定」→「詳細設定」→「&lt;head要素&gt;にメタタグを追加」

デザインCSS

「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」

「管理画面」→「<span class="blogicon-design">&nbsp;</span>デザイン」→「<span class="blogicon-setting">&nbsp;</span>カスタマイズ」 →「<span class="blogicon-bracket">&nbsp;</span>デザインCSS」

はてなブログのWebアイコンフォントの調べ方

はてなブログのWebアイコンフォントは公式サイトには掲載がないようですが、自分のブログのソースを見るとわかります。

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=514492980bb71aeaaa26727c8c8821">

CDNのスタイルシートを読み込んでいるのがわかります。

awesome fontを利用する場合は、ヘッダ部分に読み込む記述を書かないといけませんが、このはてなブログのWebアイコンフォントは全てのブログに自動的に読み込まれているので、特にメタタグへの記述は必要ありません。

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

はてなブログのWebアイコンフォントをどんな時に使うかですが、テーマを作成するときに:afterや:beforeなどの擬似要素でCSSを書く時に使ったり、記事の中に使ったりします。

記事の中に使う場合やグローバルメニューに表示させたい時

記事の中に使う場合や、ヘッダなどに表示させたい場合は、HTMLで書きます。

記事の中に書く場合

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

span classの後にブログアイコンのクラス名を入れて表示させます。見たまま編集で行う場合はHTML編集画面に入力するのですが、span要素の中に何もないと見たまま編集に戻した時に消えてしまうので空白(&nbsp;)を入れるようにしています。

Markdown編集の時は空白はいらないような気がします。

ヘッダなどのカスタマイズで利用したい場合は、下記のように書きます。

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

ちなみに、クラス名にlgを加えるとフォントサイズが大きくなります。

グローバルナビを飾る時に便利そうですね。

CSSの擬似要素で使う

このテーマでもタイトル横やカテゴリのフォルダマークなどで利用していますが、擬似要素として利用することもできます。

h2:before {
    font-family: "blogicon";
    content: "\f012";
}

font-familyをblogiconにして、contentにはコードを入力します。

はてなブログのアイコンフォント ピックアップ

タイトル横に使えそうなWebアイコンフォントをピックアップしてみました。

アイコン クラス名 コード
blogicon-home f017
blogicon-pen f024
blogicon-check f029
blogicon-star f02d
blogicon-star-o f720
blogicon-music f046
blogicon-heart f048
blogicon-heart-alt f049
blogicon-sushi f04d
blogicon-smartphone f051
blogicon-laptop f052
blogicon-gourmet f715

はてなブログのアイコンフォントは120種類以上あって、追加されたりすることもあるので探してみるのも楽しいかもしれませんね。

雑感

サイトはできるだけ軽い方がいいので、はてなの Webアイコンフォントは軽量で使いやすいのでおすすめです。

追記

テーマを作っているときにアイコンをいつも探すので、一覧表にしてみました。

アイコン クラス名 コード
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 f052
blogicon-gourmet f00a
blogicon-member f00b
blogicon-account f00c
blogicon-design f00e
blogicon-cog f04d
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
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
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-photos f71c
blogicon-others f710
blogicon-rakuten f722
blogicon-breadcrumb f726
blogicon-profilecard f728
blogicon-snippet f72a
blogicon-dazn f72b

※2022年9月現在

© 2022 - monoのメモ帳