はてなブログで使えるアイコンの表示方法2パターン[はてなブログ限定]

かまさん
かまさん

ご訪問ありがとうございます。

僕は、はてなブログを使ってプログラミング(ブログデザイン)CSSやHTMLを一応・・・勉強しています。

この記事は完全にはてなブログを使用している方向けなので、はてなブログを使用している方の参考になればと思います。

はてなブログのアイコンについて

はてなブログで使えるデフォルトのアイコンはあくまで管理側のものなので管理側がデータを消したり、変更すると使えなくなります。

何年もたっている記事を見てもそのまま表示はされているので、増えることはあっても消されることはないと思いますが、万が一があることは頭の片隅にでも置いておいてください。

はてなブログアイコンの一覧記事

はてなブログアイコンをまとめてある記事はいくつかありますが、コチラの記事を紹介します。

かまさん
かまさん

はてなブログで僕がまとめたものです。

アイコンを使う方法

かまさん
かまさん

アイコンを使う方法は、大まかに2パターンです。

  1. アイコン名(class名)を使う
  2. コード(code)を使う

アイコン名を使っても、コードを使っても表示されるアイコンに変わりはありません。

アイコン名を使って表示させる方法

はてなブログで使えるアイコンはデフォルトでアイコン名(class名)がつけてあります。

アイコン名(class名)が分かっていればアイコン名(class名)を使用してHTMLだけで呼び起こす事が出来るので一番簡単でオススメです。

HTMLの記述では、spanタグもしくはemタグを使って呼び起こします。

<span class="class名">&nbsp;</span>
かまさん
かまさん

もしくは、

<em class="class名">&nbsp;</em>

上記のようにclass名を使いたいアイコン名に変更するだけでアイコンが表示されます。

はてなブログでemタグは斜め文字なのでspanタグの方がオススメです。

かまさん
かまさん

アイコンは斜めになりませんけどね・・・

タグ内記述されている&nbspは改行しないスペース(non-break-spaceの略)を意味してます。

かまさん
かまさん

タグ内容に文字を入れれば必要はありません。

ですが、アイコンだけを表示させたいときは&nbspの記述がないと表示されず、編集画面の切り替え(見たまま編集↔HTML編集)で記述ごと消えてしまうので注意が必要です。

かまさん
かまさん

はてなブログで&nbsp;は編集画面の切り替えで・(半角の赤点)に置き変わります。

かまさん
かまさん

図解になりますが、実際にアイコンを表示させてみましょう。

下記は、はてなブログのアイコンマークを表示させるための記述です。

<span class="blogicon-hatenablog">&nbsp;</span>
かまさん
かまさん

はてなブログのHTML編集で記述すると⇩のようになります。

図解のように記事の編集では表示されないのですが、プレビューで見るとアイコンが出てきます。

プレビューでもアイコンが出てこないときはアイコン名(class名)に間違いがあるかもしれません。

かまさん
かまさん

正しいアイコン名(class名)を使わないと表示されることはないので注意です。

ここまでは、アイコン名(class名)が分かっている場合に出来ることになります。

中には、アイコン名(class名)がわからないものもあって、HTMLだけでは呼び起こす事が出来ないものがあります。

コードを使って表示させる方法

アイコン名(class名)がわからないものはコード(code)を使って表示させることになります。

コード(code)はCSSでアイコンにclass名をつける為に使います。

かまさん
かまさん

アイコン名(class名)が長くて使いづらいときにもオススメです。

今回はHTML編集内で直接使用出来るようにstyleタグを使用します。

styleタグはCSSの記述をHTML内で記述できるようにしてくれる便利なタグです。

かまさん
かまさん

下記のように記述し、○の部分にCSSを記述します。

<style><!--○--></style>
かまさん
かまさん

それでわ、実際にやってみましょう。

今回ははてなブログのアイコンマークである(f000)を使ってみましょう。

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

青字でこのclass名にしますよと指定して、緑字でアイコンを指定しています。

また、青字の名前は半角英数字で書けば何でも大丈夫です。極端にいえばaでもbとかでも大丈夫です。

ちなみに/*blogicon-hatenablog*/部分は/*○*/CSS内ではさみ込んだ文字をメモとして残す為の記述です。

かまさん
かまさん

良くなんだっけ?って忘れがちになる僕には必需です。

font-family: blogicon;はフォントの種類を指定しています。

無くても表示はされるのですが、もしかしたら使用しているフォントの種類によっては表示されないかもしれないので念のため記述してます。

これで、はてなブログのアイコンコード(f000)にclass名ができました。

class名ができたあとは①のアイコン名(class名)を使って表示させた方法と一緒です。

styleタグを使ったCSSのあとにHTMLで呼び起こします。

<style><!--
.f000:before{
font-family: blogicon;
content: "\f000";
}--></style>
<span class="\f000">&nbsp;</span>
かまさん
かまさん

上記の記述をすると下記(図)のようになります。

図でわかると思いますが、class名だけで表示させた時と違い、編集見たままでも☒印になって何かあることは表示されます。

HTMLだけのときはなんの表示もなかったので、<style>CSSを一緒に使った方が少し記事編集が見やすくなると思います。

おわり

かまさん
かまさん

これで2パターンの使い方がマスターできたと思います。

今回の記事では、アイコン一種しか紹介出来ていませんので、是非下記の記事をご覧ください。

かまさん
かまさん

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

コメント

タイトルとURLをコピーしました