【2019年11月最新版】はてブロでFont Awesome5の最新版を超簡単に使う方法

タイトルの通り,

使う方法を解説します.

難しいことは全部抜きに, 自分の備忘録も兼ねてサクッといきます.

今回の方法だと, バージョンの指定をしないので, 今後ずっとFont Awesomeの最新版を使うことができます.

また, これまでのFont Awesome4系も読み込めます.

※Font Awesomeとは, このブログのメニューバーのアイコンや, SNSシェアボタンなどにも使っている, 通常のフォントでは出てこない図形などをWebフォントとして表示できるサービスです.

まずは, こちらからFont Awesomeに登録します.

メールアドレスを入力するだけの簡単仕様です.

登録確認メールが送られてくるので待ちます.

登録確認メールのリンクを踏むと, ユーザー情報入力画面になります.

画面に従って1分もあれば終わるでしょう.

すると, 自動的にこんな感じの自分のKitのページに移動するはずですので, 右上にある"Setting"を押しましょう.(この画像は設定に飛んだ後です.)

ここで確認すべきことは, 上から3つが

になっていることです.

おそらくデフォルトでこうなっていると思いますが, ここが肝心なので要チェックです.

あとは全部そのままでいじらなくて大丈夫です. Kit Nameはお好みで.

ここまでできたら, ページ下にある"Save Changes"を押し設定を保存します.

最後に, ページ右上にある"Copy Kit Code"をクリックして, スクリプトをコピーしたら準備完了です.

ここはお馴染みかと思いますが, 自分のはてブロのダッシュボードに行き,

設定>詳細設定>検索エンジン最適化>ヘッドに要素を追加

に先ほどコピーしたスクリプトを貼り付けます.

仕上げにページ下部の更新ボタンを押したら, 全ての設定は終わりです.

これであなたもFont Awesomeを使えるようになりました.

使い方は詳しく解説したサイトがたくさんあると思いますが, 一応書いておきます.

まずFont Awesomeで使いたいアイコンを検索します.

例えば"LINE"と検索すると, このようなアイコンがあります.

ここで, アイコンタイトルの下にある"Copy HTML"でコピーします.

後は, このタグを自分のサイトで使いたいところにペーストする, という流れになります.

細かいことは他サイトで事例が多くあるので参考にしてみてください…

以上, Font Awesome5を, 無料で, 常に最新版で使う方法でした.

りちょう