【無料でカンタン!】はてなブログで使えるフリーアイコン

f:id:higehigex:20181030161755j:plain
大きさ(サイズ)と色(カラー)の変更方法もあります!

ブログで『』や『 』のアイコンを使うには、『Font Awesome(PROプランは有料です。)』というサービスを利用する人が多いですが、はてなブログではそのようなサービスを使わなくても、無料でカンタンに使う方法があります。

 

htmlやcssに詳しくない方でもカンタンにできます!

この記事で得られること

はてなブログでカンタンにアイコンフォント( など)を使う方法。

● アイコンの「色」や「大きさ(サイズ)」の変える方法

 

アイコンの使い方

(ここではHTMLでの使い方をご説明します。)
の3つの手順でカンタンにできます。


以下のコードをアイコンを使いたい記事の文中に貼り付ける。

<i class="ここに使いたいアイコンの「クラス名」を入力"></i>


上の章「使えるアイコン」で紹介した3つの記事から使いたいアイコンを見つけたら、そのアイコンの隣にある『クラス名』の英単語をコピーします。

例えば、『』のアイコンを使いたい場合は、 "blogicon-truck"(⬅︎クラス名) と書かれています。


記事に戻り、コードの中にある『ここに使いたいアイコンの「クラス名」を入力』を消し、先ほどコピーした『クラス名』を貼り付けます。

<i class="blogicon-truck"></i>

これだけです。

 

色とサイズの変え方

色(カラー)を変える 『』 ➡︎ 『』

例えば、の色を緑にしたい場合は、先ほどのコードに

style="color: #008000;"

を付け加えるだけなので、以下のようにすればOKです。

<i class="blogicon-truck" style="color: #008000;"></i>


色のコードはこちらに140色あります。上のコードの『#008000』の部分を消して新たに入力するだけです。
WEB色見本 原色大辞典 - HTMLカラーコード

 

大きさ(サイズ)を変える 『』 ➡︎

大きさはpx(ピクセル)でもemでもどちらでも構いません。コードは色とほぼ同じです。

style="font-size: 50px;"

こちらのコードを付け加えるだけなので、以下のようにすればOKです。

<i class="blogicon-truck" style="font-size: 50px;"></i>

 

色と大きさどちらも変える 『』 ➡︎

この場合は、色と大きさの2つを以下のようにくっつければOKです。

<i class="blogicon-truck" style="font-size: 50px; color: #008000;"></i>


おまけ

アイコンを自由にアレンジして、自分なりのオリジナリティのある記事を作りましょう!

文字を囲む

トラック

だんだん大きくなる

 


はてなブログのカスタマイズにはこちらの本がオススメです。