こんにちわ、@kamasanchiです。
はてなブログのアイコン素材って沢山あるんですね(*^^*)
今回は、はてなブログのアイコン素材を、使いたいときにすぐに使えるように自分用にまとめてみました。
一部、アイコン名が分からなかったので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万文字ほど書いたのに残念なことになってます。
せっかくなので公開してます。
みてもらえたら、それだけで嬉しいです。
はてなブログアイコン素材使い方
アイコンを記事に表示するにはアイコンの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"> </span>
上記のHTMLの記述で緑字のclass名がついたアイコンを呼び起こします。
紫字の は改行しないスペース(半角)という意味で、このスペースがないとアイコン単体での表示はできません。
アイコン単体ではなく、 を他の文字に置き換えて使用することもできます。
そのままコピペして使用する場合は、緑字の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"> </span>
最後に
アイコン名(class名)がわかっているものでもCSSを記述すると同じようにclass名をつけることができます。
使いやすい方法で表示させてみましょう。
僕は、プログラミング素人ですが、出来る事を増やして誰かの役に立つサイトにしていきたいと思っています。
調べる事は得意な方なので何かお題をいただければチャレンジしていきます(*^^*)