しょこら＠です。
ブログを巡回していると、かわいらしいアイコンを使っている方をちょくちょく見かけてて、いいなぁ～と思っていました。
調べると、Font AwesomeというWeb用アイコンフォントらしい。
こういうやつ →
思い立ったが吉日。
早速、導入にチャレンジしました！
チャレンジといっても、ググりまくってコピペしただけですが(´･ω･`)
未だの方、結構簡単ですのでトライしてみて下さい☆
１．フォントデータを読み込ませる下準備
このアイコンフォント、自分のPCにダウンロードしなくても、サーバーに上がっているデータを自動で読みに行って、ブログに表示させることが出来るんですって。CDN（Contents Delivery Network）と言うそうで。
この設定は、一瞬で終わります！
はてなブログの「設定」→「詳細設定」→「headに要素を追加」の所に、以下のコードをコピペするだけです。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
コピペしたら一番下の「変更する」ボタンを押すのをお忘れなく。
２．貼りたいアイコンフォントを探しにいく
アイコン一覧は、以下サイトにあります。
サクッとショートカット、作っておきましょう。
アイコンを見ると、薄いグレー色になっているものと、黒く濃い色になっているものがあります。グレーの方は、PROにアップグレード（有料）しないと使えないアイコン達です。
とりあえず無料で使える濃い色のものから選びます。
一番左の「Free」をクリックすると、無料のものだけに絞れます。
３．使いたいアイコンのソースをゲットする
使いたいアイコンを開いたら、このページで<i class=" ****** "></i>と表示されている部分をコピーします。（私の場合、クリックするだけでコピー出来ました）
４．ブログの入れたい所に貼る
先ほどコピーしたアイコンのソースを自分のブログに貼るのですが、記事を書く時のモードで少々変わります。
編集見たままモードで作っている場合
「HTML編集」から、貼りたい位置にペーストします。
慣れない人は、ちょっとだけ画面と睨めっこしながら探して下さい。
貼った後にきちんと表示出来ているかどうかは「プレビュー」を見るしかありません。「編集見たまま」では空白になってると思います。
で、プレビューで確認してはみたものの・・・
表示されてない！って問題が発生していませんか？！
「HTML編集」の画面に戻ると、さっき貼ったソースが、何故か消えてしまっているのではないでしょうか。私はそうなりました。
これ、特定のタグを勝手に消してしまう、はてなブログの仕様らしい。
そんな場合は、アイコンのソースをコピーしてそのまま「HTML編集」の画面上で、<i class=" ****** "></i>の、カッコの間に「 」という（no break space）文字列を手打ちします。
<i class=" ****** "> </i> という感じ。
そうしたら、表示されるはず。多分。
はてな記法モードで作っている場合
書いているモードはそのままで、コピーしたアイコンのソースを貼るだけです。
表示確認は、やはり「プレビュー」しか出来ません。
５．見出し用に使いたい場合は
見出しの一部にアイコンを入れたい場合は、CSSの方をいじります。
「デザイン」→「カスタマイズ」→「デザインCSS」の画面で、以下をコピペします。そうしたら、以降は勝手に見出しの冒頭にアイコンが挿入されます。
h3:before {
font-family: "Font Awesome 5 Free";
content: "\f17b";
font-size: 1em
padding-right : 5px;
color: #f89174;
}
ここで補足。
- 1行目で、見出しの種類を規定。（h3/h4/h5）
- 3行目のcontentは、先ほどのFont Awesomeのサイトで欲しいフォントを選んだ時に表示される、4桁のunicodeを使用。"\"を忘れないように。
- 4行目のfont sizeは、アイコン自体の大きさを規定。
1emは1倍。2倍が2em、0.5倍が0.5emなど。 - 5行目のpadding-rightは、アイコンと文字列の間の隙間を規定
- 6行目のcolorは、アイコン自体の色を規定
私は、PCサイトではないですが、スマホ用で一部使ってみました。凄い地味ですｗ
以上、Font Awesome導入についての手順でした。
慣れるまではちょっとめんどくさいかもしれませんが、ワンポイントとして使えば、結構良い見た目になると思います！！
※導入にあたっては、こちらのサイトの説明が非常に分かり易かったです。アイコンのカスタマイズのやり方も一通り紹介されています。
