はてなブログアイコン素材一覧127種と使い方

はてなブログのアイコン素材って沢山あるんですね…　

はてなブログのアイコン素材を、使いたいときにすぐに使えるように自分用にまとめてみましたが、一部、アイコン名が分からなかったのでCSS<style>を使って勝手にclass名をつけています。

あくまで自分用に用意したのですが、誰かの参考になればと思います。

ハイ！…参考にします。　

はてな買ってよ３リンク

できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 できるポケットシリーズ

【こんな方におすすめ】

• CSS&HTMLを勉強中の方
• 毎回ググっている方

Amazonで確認

楽天市場で確認

Yahoo!ｼｮｯﾋﾟﾝｸﾞへ

はてな買ってよ３リ

アイコン素材一覧

※注意：はてなブログアイコン素材は管理人者側のものなので管理者側が変更すると使えなくなります。　

icon	blogicon-class名	code
	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-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-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-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-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-crown※style※	f050
	blogicon-smartphone	f051
	blogicon-laptop	f052
	blogicon-mixi	f053
	blogicon-haiku	f054
	blogicon-amp	f055
	blogicon-plugin	f00a
	blogicon-member	f00b
	blogicon-account	f00c
	blogicon-design	f00d
	blogicon-cog	f00e
	blogicon-pages	f00f
	blogicon-search	f01a
	blogicon-analytics	f01b
	blogicon-help	f01c
	blogicon-comment	f01d
	blogicon-import	f01e
	blogicon-odai	f01f
	blogicon-crop	f02a
	blogicon-repeat	f02b
	blogicon-logout	f02c
	blogicon-star	f02d
	blogicon-pro	f02e
	blogicon-calendar	f03a
	blogicon-bracket	f03b
	blogicon-photo	f03c
	blogicon-color	f03d
	blogicon-public	f03e
	blogicon-tag	f04a
	blogicon-mail	f04b
	blogicon-help-alt	f04c
	blogicon-sushi	f04d
	blogicon-rss	f04e
	blogicon-unorderedlist※style※	f700
	blogicon-orderedlist※style※	f701
	blogicon-slanting-link※style※	f702
	blogicon-seemore※style※	f703
	blogicon-quote	f704
	blogicon-footnote※style※	f705
	blogicon-toolbar-show※style※	f706
	blogicon-toolbar-hide※style※	f707
	blogicon-bold※style※	f708
	blogicon-italic※style※	f709
	blogicon-others	f710
	blogicon-fotolife	f711
	blogicon-configuration※style※	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-star-o	f720
	blogicon-odaislot	f721
	blogicon-rakuten	f722
	blogicon-grid-3x3	f723
	blogicon-grid-vertical	f724
	blogicon-insert-toc※style※	f725
	blogicon-breadcrumb	f726
	blogicon-pinned	f727
	blogicon-profilecard	f728
	blogicon-font※style※	f729
	blogicon-strike※style※	f70a
	blogicon-underline※style※	f70b
	blogicon-font-size※style※	f70c
	blogicon-text-color※style※	f70d
	blogicon-youtube	f71a
	blogicon-instagram	f71b
	blogicon-google-photos	f71c
	blogicon-toggle-on	f71d
	blogicon-toggle-off	f71e
	blogicon-snippet	f72a
	blogicon-dazn	f72b
	blogicon-000※style※	000
	blogicon-7f7※style※	7f7
	blogicon-b83※style※	b83

はてなブログ Perfect GuideBook [改訂第2版]

【こんな方におすすめ】

• ぶろぐを始めたい方
• はてなブログを使いこなしたい方

Amazonで確認

楽天市場で確認

Yahoo!ｼｮｯﾋﾟﾝｸﾞへ

気になった一覧

気になったのでやってみた一覧もあります。　

大半がコピペですがスマホでHTML20万文字ほど書いたのに残念なことになっていますが、せっかくなので公開してます。

みてもらえたら、それだけで嬉しいです。　

kamasanchi.hatenablog.com

はてなブログアイコン素材使い方

ここからは使い方の説明をしていきます。　

アイコンを記事に表示するにはアイコンのclass名(blogicon-class名)が必要になります。

コードだけでも表示させることは出来ると思うのですが、素人の僕にはちょっと分からなかったので、class名が分からないものはアイコンにclass名をつけて表示させる方法をとってます。

※注意：一覧の※style※と表記しているものはclass名をCSSで付けてるので本当のclass名ではありません。　

アイコンにclass名をつける

class名が分からないアイコンには、最初にclass名をつけていきます。　

CSSの記述でclass名をつけていくのですが、記事編集ページだけで完結出来るように<style>タグを使って記述します。

<style><!--
.blogicon-class:before{
font-family: blogicon;
content: "\code";
}--></style>

記事編集のHTML編集では、<style>タグで挟むことでその中にCSSの記述を書くことができ、記事編集ページの見たまま編集でも反映させることができます。

デザイン等を確認しながらCSSの記述ができるのでとても便利です。　

CSSの記述ですので、<style>タグを外してダッシュボードのデザインCSSに入れ込んでも大丈夫ですし、記事のHTML編集に残したままでも何の問題も起きません。

見えないのでどこにあっても一緒です。　

上記のCSSから変更する箇所はたった２つで、まずは、class名です。

blogicon-classの部分がclass名になるのですが、半角英数字で記述する事を守っていれば何と書いても大丈夫です。

例えばblogicon-001などでもOKです。　

そして、次は"\code"の部分です。対象のアイコン"\code"（ナンバー）記述すると、アイコンのclass名が任意のclass名なります。

アイコンを表示させる

class名が分かっている場合は名前（class名）を付ける必要はありません。　

class名が分かっている場合（class名を作っても同様）は、HTMLを使ってアイコンを表示させることができます。

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

HTML記述の為、色が変わりました。　

上記のHTMLの記述でblogicon-classがついたアイコンを呼び起こします。

&nbsp;は改行しないスペース(半角)という意味で、このスペースがないとアイコン単体での表示はできません。

アイコン単体ではなく、&nbsp;を他の文字に置き換えて使用することもできます。

そのままコピペして使用する場合は、blogicon-classを対象アイコンのclass名に変更するだけとなります。

以上がアイコンの使い方です。　

コピペ用サンプル

<style><!--
.blogicon-crown:before{
font-family: blogicon;
content: "\f050";
}--></style>
<span class="blogicon-crown">&nbsp;</span>

この記述をHTML編集で貼り付けるだけで のアイコン表示ができます。　

はてなブログアイコン素材一覧のまとめ

簡単にまとめます。　

• はてなブログのアイコンは管理者側の物です。
• 表示させるにはアイコン名(class名)が必要です。
• class名がわからないときはCSSでclass名を付けます。
• HTMLでは<span>タグで呼び起こせます。

ザックリしすぎだって…　

さぁ～せん！！　

あとがき

アイコン名（class名）が分かっている場合でも同じ方法でCSSを記述するとclass名を付けなおすことができます。

もちろん有効範囲は自分のぶろぐのみです。　

また、今回は<span>タグ使ってHTML記述をしていますが、<em>タグでも同様に呼び起こす事ができます。

ただし、<em>タグ内に文字を入れると斜体（ななめ）の指定になるので<span>タグの方が使い勝手はいいと思います。

自身のやりやすい、使いやすい方法で表示させてみましょう。

今回は以上になります。　

お疲れ様でした。　

最後までお付き合いいただきありがとうございました。