SI企業に勤めるSEのブログです。

技術系、小説やドラマの感想、雑記など、雑多な日記です。

トップ > 技術 > 【技術】はてなブログのカテゴリーごとに異なるアイコンをつけてみる

【技術】はてなブログのカテゴリーごとに異なるアイコンをつけてみる

技術 ブログカスタマイズ HTMLCSS

はじめに

現在ブログのカスタマイズに取り組んでいます。
今回は、サイドバーや記事の上部に表示される、「カテゴリー」に個別のアイコンを表示する方法についてです。
（パンくずリストは現在検討中。。。）

前提

以下の記事は、基本的に以下のことを理解している方を対象としています。
ご理解ください。

方法

以下の手順で、実施していきます。

  1. WebFont ( IconFont ) の選定 / 導入
  2. ブログのカスタムCSSに追加
  3. 確認

WebFont ( IconFont ) の選定 / 導入

選定

WebFontといっても色々ですが、
今回は、「FontAwesome」を採用しました。

FontAwesome(https://fontawesome.com/)

そのほかにもいろいろありますので、よかったら調べてみてください。

導入

CDN方式で提供されているので、ブログのHead要素に追加します。

  1. ブログのダッシュボードを開く
  2. 設定をクリックする
  3. アカウント作成し、CDNのコードを入手する（2020年11月6日修正）
  4. 設定 > 検索エンジン最適化 > headに要素を追加 に入手したコードを追加する

ブログのカスタムCSSに追加

導入が完了したら、ブログのカスタムCSSに追加します。

  1. ブログのダッシュボードを開く
  2. デザインをクリックする
  3. カスタマイズ > デザインCSSをクリックする
  4. カテゴリを示すCSSのクラスに記述を追加する
a.category-技術:before {
  content: "\f109";
  font-family: FontAwesome;
}

CSSのクラス名は、以下のようになっています
category-[カテゴリ名]

結果確認

このブログ上部のカテゴリー一覧の「技術」にLapTopが表示されました！
技術

おまけ

いいアイコンを探していたら、色々見つけたのでご紹介。