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

かまさん
かまさん

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

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

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

アイコンについて

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

何年もたっている記事を見てもそのまま表示はされているので、増えることはあっても消されることはないと思いますが、万が一があるので多様はオススメできません。

絵文字の方はちょっと違ってデバイスによって表示が微妙に変わるので

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

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

アイコンを使う方法

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

①アイコン名(class名)を使う

②コード(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の記述(○)をはさみ込ます。

<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をコピーしました