【はてなブログ-カスタマイズ】サイドバーの各項目にアイコンを設定してみる（CSS対応）

数日前から適用しているのですが、サイドバーの各項目にアイコンを設定しています。

これはCSSを追加適用することで実現しています。

サイドバーの項目の中でも特に「関連記事」「注目記事」「最新記事」の3つは表示内容が似通っています。

これをパッと見で、どれがどれか分かるようにするためにはアイコンを設定するのが良いかなと思った次第です。

それでは、どんな対応をしたか書いていきます。

変更内容（画像）
参考サイト
適用したCSS
デザインの適用手順
注意事項
おわりに
関連記事

変更内容（画像）

まずは変更前後の画像を貼ります。

記事の冒頭でも触れた「関連記事」「注目記事」「最新記事」それぞれの変更前後の画像を貼ってみます。

注目記事

参考サイト

以下のサイトを参考にさせて頂きました。ありがとうございます。
shiroyuki2020.hatenablog.com
www.fuji-blo.com

適用したCSS

/***サイドバー：アイコン***/
/*全体*/
.hatena-module-title:before {
    position: static;
    border: none;
}
/*プロフィール*/
.hatena-module-profile .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f016  ";
}
/*検索*/
.hatena-module-search-box .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f01a  ";
}
/*カテゴリ*/
.hatena-module-category .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f022  ";
}
/*注目記事*/
.hatena-module-entries-access-ranking .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f02d  ";
}
/*最新記事*/
.hatena-module-recent-entries .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f031  ";
}
/*関連記事*/
.hatena-module-related-entries .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f029  ";
}
/*月別アーカイブ*/
.hatena-module-archive .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f03a  ";
}
/*HTML*/
.hatena-module-html .hatena-module-title:before {
    font-family: "blogicon";
    content: "\f037  ";
}
/***サイドバー：アイコンここまで***/

上記のCSSを適用すると、アイコンが設定されます。

ついでに「関連記事」「注目記事」「最新記事」のリンクの下線も消しました。
その方がスッキリしそうだなと思い。

/***注目・最新・関連記事：リンク***/
/*下線なし*/
.hatena-module-entries-access-ranking a,
.hatena-module-recent-entries a,
.hatena-module-related-entries a {
    text-decoration: none;
}
/*ホバー：下線あり*/
.hatena-module-entries-access-ranking a:hover,
.hatena-module-recent-entries a:hover,
.hatena-module-related-entries a:hover {
    text-decoration: underline;
}
/***注目・最新・関連記事：リンクここまで***/