masalibの日記

システム開発、運用と猫の写真ブログです

はてなブログに「アイコンセット」の導入と運用について

以前にも書いたのですがFontAwesome5の運用方法が変わったので記載します

masalib.hatenablog.com

FontAwesome5とは

アイコンセットになります。絵文字に近いものです。

無料版と有料版があります。有料版の方が多いのですがデザインをガチでやっているわけではないので 無料でいいかと思う。

プライス アイコン数
無料 1,609
有料 6,256

FontAwesomeは今度FontAwesome6がでるもよう・・・もちろん無料版もでるみたいなのでその時は対応したい

FontAwesome5の導入手順

はてなブログの編集画面に行く

https://blog.hatena.ne.jp/XXXuserIDXXX/XXXblogIDXXX/config

自分の場合 https://blog.hatena.ne.jp/masalib/masalib.hatenablog.com/config

ヘッダーの編集画面に遷移する

  1.  設定】をクリック
  2. 【詳細設定】をクリック

ヘッダーの編集をおこなう

下記の内容を追加する

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

そこまで難しくないかと思う。

以前の運用(使い方)

前までは

fontawesome.com

にアイコンのタグを探しに行っていたがブログを書くのにいちいちサイトに飛ぶのは非効率だった

現在の運用(使い方)

Chrome拡張機能をインストール

https://chrome.google.com/webstore/detail/font-awesome-icon-picker/mcepmpclbgahgbpcgbmnpplcfmlaiopm

あとはアイコンを探してコピペするだけ

f:id:masalib:20201125162814g:plain

プレビューじゃないと確認できないのが・・・ちょっとめんどくさい