みずー工房

気ままライフを綴るブログです

【はてなブログ】アイコンを使う(はてな編)

絵文字を記事の中につけると華やかに見えますが、実は結構リスキーです。
以下のように、OS(Winodwsとか)やブラウザ(Chromeとか)によって、表示の仕方が変わってしまうからです。
はてなが提供するアイコン を使うと、環境を気にせずにきれいに表示することができます。



キーボードで打てる絵文字を使うと...

アメーバブログのようなサービスでは、動く絵文字など独自の機能として確立しているものもありますが、
はてなブログにはそのような機能はありません。


そのような機能を使わなくても、最近の多くのパソコンやスマホでは絵文字が打てるようになっています。
ですが、そのような付属の絵文字を使ってしまうと、 記事を読んでくれる人の環境によっては、
意図しない絵文字になってしまったり、きれいに表示できない
場合があります。


はてなの提供するアイコンフォント

そこではてなブログでは、環境に左右されないアイコンを提供してくれています。
アメブロの絵文字の華やかさを演出できるとまでは言えないかもしれませんが、
読んでくれる方を配慮して、わかりやすさを目的に利用するとよいでしょう。
こんな感じで表示できます。


アイコンフォントを使う(HTML)

アイコンフォントを利用するには、HTMLで利用する必要があります。
編集モードを「Markdown」か「はてな記法」モードに切り替えることをお勧め します。


さて準備ができたら、これを貼り付けてみましょう。


HTML
<i class="blogicon-hatenablog"></i>
Result


こんな感じで、はてなブログのアイコンを貼り付けることができます。
肝になっているのは、class の指定です。
この指定を変えることで、様々なアイコンに変更することができます。
利用できるアイコンのリストは、以下に記します。


アイコンの大きさを変える

アイコンの大きさを変えるには2通りの方法があります。
1つはclassの末尾に「lg」をつける方法です。


HTML
<i class="blogicon-hatenablog"></i>
<i class="blogicon-hatenablog lg"></i>
Result


少し大きくなっていることが確認できると思います(約1.3倍らしいです)。


ただこれだと、少し不便なのでstyle属性を利用して自由に大きくまた小さくしてみましょう。
以下のように「font-size」を指定すると、指定した大きさに変更できます。
ちなみに「em」という単位は1文字の大きさを表していて、2emと指定すれば2倍 の大きさになります。

HTML
<i class="blogicon-hatenablog" style="font-size:0.5em;"></i>
<i class="blogicon-hatenablog"></i>
<i class="blogicon-hatenablog" style="font-size:2em;"></i>
Result

これで自由にアイコンの大きさを変えることができます。


アイコンの色を変える

こちらもstyle属性を利用し「color」を指定すれば、色を変更できます。

HTML
<i class="blogicon-hatenablog" style="color:#080; font-size:2em;"></i>
<i class="blogicon-hatenablog" style="color:#FA0; font-size:2em;"></i>
<i class="blogicon-hatenablog" style="color:#F00; font-size:2em;"></i>
Result

色の詳しい指定については、別途記事にしようかなと思います。


CSSの疑似要素で使う

CSSの疑似要素としても提供されています。
例えばこのように指定することでアイコンを使うことができます。
疑似要素については、別途記事にしようかなーと思います。

CSS
.icon-sample:before {
    font-family: blogicon;
    content: "\f000";
}

font-familyには「blogicon」を指定し、
contentの内容には、アイコンに応じてコンテンツを変更します。
コンテンツ一覧は、以下に記しています。


利用できるアイコン

利用できる私的にお気に入りなアイコンを紹介しようと思います。

アイコンクラス(HTML)コンテンツ(css)
blogicon-hatenablog\f000
blogicon-external\f009
blogicon-plugin\f00a
blogicon-account\f00c
blogicon-design\f00d
blogicon-addstar\f011
blogicon-notify\f014
blogicon-private\f015
blogicon-home\f017
blogicon-folder\f022
blogicon-plugin\f023


ここで紹介しきれていないアイコンについては、以下をご覧ください。
はてなのアイコンフォントは、全部で123種類あるそうです。

参考


おわりに

環境に関係なく利用できる便利なアイコンです。
私の場合は、記事以外にもサイドバーなどで活躍してくれています!


おすすめ記事