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

こんにちわ、かまさんです。

【kamasanchi-blog】の管理人をしています。

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

今回は、はてなブログのアイコン素材を、使いたいときにすぐに使えるように自分用にまとめてみました。

一部、アイコン名が分からなかったのでCSS<style>を使って勝手にclass名をつけています。

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

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

アイコン素材一覧

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

気になった一覧

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

大半がコピペですがスマホで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編集で、CSSの記述を青字の<style>タグではさむ事で記事ページ内に反映するCSSを作る事ができます。

CSSの記述ですので、<style>タグを外してダッシュボードのデザインCSSに入れ込んでも大丈夫です。

上記のHTMLはコピペして使用していただいて大丈夫です。

変更箇所はたった２つです。

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

そして、水色字のcode部分です。対象のアイコンcodeを記述すると、アイコンが緑字のclass名となります。

アイコンを表示させる

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

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

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

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

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

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

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

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

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

・はてなブログのアイコンは管理者側のもの

・表示させるにはアイコン名(class名)が必要

・class名がわからないときはCSSでclass名を付ける

・HTMLでは<span>タグで呼び起こせます

ざっくりこんな感じです。

コピペ用に

コピーしてHTML編集で貼り付けるだけで のアイコン表示ができます。

 <style><!--

.blogicon-crown:before{

font-family: blogicon;

content: "\f050";

}--></style>

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

最後に

アイコン名(class名)がわかっているものでもCSSを記述すると同じようにclass名をつけることができます。

使いやすい方法で表示させてみましょう。

僕は、プログラミング素人ですが、出来る事を増やして誰かの役に立つサイトにしていきたいと思っています。

調べる事は得意な方なので何かお題をいただければチャレンジしていきます(*^^*)