かまさんちのブログ

かまさんちのぶろぐ

[+1の収入源を構築するための教科書]ブロガー兼、アフィリエイター兼、ポイ活マニアの弟子の記録!

kamasanchi-blog
ぶろぐデザインの教科書
生活、暮らしの教科書
ぶろぐの教科書
アフィリエイトの教科書
スポンサーリンク

はてなブログアイコン素材一覧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はコピペして使用していただいて大丈夫です。

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

まずは、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名をつけることができます。

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

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

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

スポンサーリンク