【24/7】高配当株とかマイレージとか車とか【独り言】

高配当&優待株で不労所得を得ながら、各航空会社のステータスを狙い、大切な愛車と過ごす日々を綴っています

はてなブログで、Font Awesomeを使えるようにしました

しょこら@です。

ブログを巡回していると、かわいらしいアイコンを使っている方をちょくちょく見かけてて、いいなぁ~と思っていました。
調べると、Font AwesomeというWeb用アイコンフォントらしい。

こういうやつ →  

思い立ったが吉日。
早速、導入にチャレンジしました!
チャレンジといっても、ググりまくってコピペしただけですが(´・ω・`)

未だの方、結構簡単ですのでトライしてみて下さい☆

f:id:syokora11:20181102111244j:plain

 

1.フォントデータを読み込ませる下準備

このアイコンフォント、自分のPCにダウンロードしなくても、サーバーに上がっているデータを自動で読みに行って、ブログに表示させることが出来るんですって。CDN(Contents Delivery Network)と言うそうで。

この設定は、一瞬で終わります!
はてなブログの「設定」→「詳細設定」→「headに要素を追加」の所に、以下のコードをコピペするだけです。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

コピペしたら一番下の「変更する」ボタンを押すのをお忘れなく。

 

2.貼りたいアイコンフォントを探しにいく

アイコン一覧は、以下サイトにあります。
サクッとショートカット、作っておきましょう。

fontawesome.com


アイコンを見ると、薄いグレー色になっているものと、黒く濃い色になっているものがあります。グレーの方は、PROにアップグレード(有料)しないと使えないアイコン達です。
とりあえず無料で使える濃い色のものから選びます。
一番左の「Free」をクリックすると、無料のものだけに絞れます。

f:id:syokora11:20181101125432p:plain

 

3.使いたいアイコンのソースをゲットする

使いたいアイコンを開いたら、このページで<i class=" ****** "></i>と表示されている部分をコピーします。(私の場合、クリックするだけでコピー出来ました)

f:id:syokora11:20181102031131p:plain

 

4.ブログの入れたい所に貼る

先ほどコピーしたアイコンのソースを自分のブログに貼るのですが、記事を書く時のモードで少々変わります。

編集見たままモードで作っている場合

「HTML編集」から、貼りたい位置にペーストします。
慣れない人は、ちょっとだけ画面と睨めっこしながら探して下さい。

貼った後にきちんと表示出来ているかどうかは「プレビュー」を見るしかありません。「編集見たまま」では空白になってると思います。

で、プレビューで確認してはみたものの・・・
表示されてない!って問題が発生していませんか?!
「HTML編集」の画面に戻ると、さっき貼ったソースが、何故か消えてしまっているのではないでしょうか。私はそうなりました。
これ、特定のタグを勝手に消してしまう、はてなブログの仕様らしい。

そんな場合は、アイコンのソースをコピーしてそのまま「HTML編集」の画面上で、<i class=" ****** "></i>の、カッコの間に「&nbsp;」という(no break space)文字列を手打ちします。
<i class=" ****** ">&nbsp;</i> という感じ。

そうしたら、表示されるはず。多分。

はてな記法モードで作っている場合

書いているモードはそのままで、コピーしたアイコンのソースを貼るだけです。
表示確認は、やはり「プレビュー」しか出来ません。

 

5.見出し用に使いたい場合は

見出しの一部にアイコンを入れたい場合は、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を使用。"\"を忘れないように。

f:id:syokora11:20181101135548p:plain

  • 4行目のfont sizeは、アイコン自体の大きさを規定。
    1emは1倍。2倍が2em、0.5倍が0.5emなど。
  • 5行目のpadding-rightは、アイコンと文字列の間の隙間を規定
  • 6行目のcolorは、アイコン自体の色を規定


私は、PCサイトではないですが、スマホ用で一部使ってみました。凄い地味ですw

f:id:syokora11:20181101140807p:plain


以上、Font Awesome導入についての手順でした。
慣れるまではちょっとめんどくさいかもしれませんが、ワンポイントとして使えば、結構良い見た目になると思います!!


※導入にあたっては、こちらのサイトの説明が非常に分かり易かったです。アイコンのカスタマイズのやり方も一通り紹介されています。

saruwakakun.com




【スポンサーリンク】