【無料でカンタン!】はてなブログで使えるフリーアイコン
大きさ(サイズ)と色(カラー)の変更方法もあります!
ブログで『』や『 』のアイコンを使うには、『Font Awesome(PROプランは有料です。)』というサービスを利用する人が多いですが、はてなブログではそのようなサービスを使わなくても、無料でカンタンに使う方法があります。
htmlやcssに詳しくない方でもカンタンにできます!
使えるアイコン
使えるアイコンはこちらの記事を参照してください。
はてなブログで使えるアイコンフォント(Webフォント)116種類
はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ
【118種一覧表】はてなブログのフリーフォントアイコンの使いかた/表示されない対策も
アイコンの使い方
(ここでは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>