はてなブログでFont Awesomeを使いたい話

はてなブログでも「Font Awesome」が使えるような気がして調べたら簡単だったので覚え書きしておきます。これはアイコン画像のようなものを文字として表示させたり、見出しの前に持ってきたりといろいろ使えるやつです。CSSとかでもっといろいろできると思いますよ。

←こういうのがあります。

こういうのですね。

headタグ内に記述なのですが、はてなブログはheadタグ直接いじれません。

でも、headタグ内に追記できる場所があるのでそこに貼り付けるだけという、なんとも簡単な作業です。

Proじゃなくてもできるのでラッキー。

①Font Awesome 5 のサイトから「How To Use」をクリックして必要なタグをコピーしてくる。

っていうやつですね。全部コピーしましょう。

②はてなブログのダッシュボードへ行き、headに追記する場所に貼り付けておしまい。

ダッシュボード→設定

設定の詳細設定タブへ

「検索エンジン最適化」内の「headに要素を追加」に先ほどコピーしたタグを貼り付けます。後は下まで行って「変更する」ボタンを忘れずに押しましょう。

あちこちで説明してるのでそっち見たほうが早いと思うけど基本的なものだけ。

Font Awesomeのサイトから「Icons」をクリックするとアイコン一覧が表示されます。使いたいものをクリックしてタグを貼り付けるだけ。

もちろんHTML編集で使うので、まったくわからない人には向いていません。

<i class="fab fa-angellist"></i>を使うと

←のようになります！

※Font AwesomeはProがあり、$60でアイコンをたくさん使えたり、その他の機能が使えるようになります。一度支払うだけでいいようです。

「Icons」の一覧の中のグレーのアイコンはProにすると使えるようになります。

はてなブログのタグを勝手に互換したり補完したりいらないタグを消してくれる機能で消えてしまいがちなので、

と追記しましょう。iタグがemとか適当なものになってしまうけど消えてしまうことがなくなります。

ほんのちょっとhtml使える身としては「余計なことすんな～～～」って気持ちになります。「見たまま編集」というエディタも当然使うので、あまり文句は言えませんね。

CSS書いて、クラスとかで呼び出す方がはてなブログに向いていると思います。

ちょう　かんたん！！アイコンとかカスタマイズとかはほかのブログで詳しくCSSとかについても説明されているのでそっちを見よう！コピペで済むぞ！

はてなブログの方にもCSSとかつけて見やすくしていきたいなあとほんのちょっぴり思います。

ただのおぼえがき