地味に細かすぎて目立たないブログカスタマイズ

hatenaロゴ

このブログは、Minimalismというデザインテーマをカスタマイズして使っていますが、記事タイトルの日付やカテゴリー、サイドバータイトルのアイコンは、このテーマにインポートされているWebアイコンフォントのFont Awesomeをずっとそのまま使っていました。

ただ、オヨミヨ - これは便利!はてなブログで手っ取り早くサイドバータイトルにアイコンを表示する方法を見て、はてなの純正アイコンのほうがFont Awesomeより軽くて表示が早くて統一感があっていいかもと思いながらカスタマイズしてみました。

上記のブログやサイドバーのモジュールの追加の画面、FOXISM - はてなブログで使えるアイコンフォント(Webフォント)120種類を見ながらアイコンを選びました。
※  カテゴリー  最新記事  月別アーカイブ  リンク

モジュールを追加

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
/* サイドバータイトルの位置 */
.hatena-module-title {
    position: relative;
}

/* サイドバータイトルのアイコン設定 */
.hatena-module-title:before {
    font-family: blogicon;
    font-weight: normal;
    content: "";
}

/* カテゴリー */
.hatena-module-category .hatena-module-title:before {
    content: "\f04a";
}

/* 最新記事 */
.hatena-module-recent-entries .hatena-module-title:before {
    content: "\f013";
}

/* 月別アーカイブ */
.hatena-module-archive .hatena-module-title:before {
    content: "\f039";
}

/* リンク */
.hatena-module-links .hatena-module-title:before {
    content: "\f021";
}

「注目記事」と「このブログについて」は、HTMLのモジュールで作ったので、タイトルを<div class="~"></div>で囲んでアイコンを表示しました。
※ 注目記事 このブログについて

(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)

HTML
<div class="hatena-module-title">
    <div class="topic">注目記事</div>
</div>

<div class="hatena-module-title">
    <div class="info">このブログについて</div>
</div>

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
/* サイドバータイトルの位置 */
.hatena-module-title {
    position: relative;
}

/* サイドバータイトルのアイコン設定 */
.hatena-module-title:before {
    font-family: blogicon;
    font-weight: normal;
    content: none;
}

/* 注目記事 */
.topic:before {
    font-family: blogicon;
    content: "\f050";
    position: absolute;
    font-weight: normal;
    left: 0;
    top: 0;
}

/* このブログについて */
.info:before {
    font-family: blogicon;
    content: "\f01c";
    position: absolute;
    font-weight: normal;
    left: 0;
    top: 0;
}