モジュールのタイトルにアイコンを追加する - はてなブログカスタマイズ

f:id:nasust:20170104181124j:plain

こんにちは、nasustです。
はてなブログのテーマを作成しましたが、その中のテクニックで他のブログでも、 汎用的に使用できそうなものがありましたので紹介します。

モジュールのタイトルにアイコンを追加する

はてなブログの設定でサイドバーのモジュールを設定することができます。
今回は、そのモジュールのタイトルにCSSでアイコンを追加する方法を紹介します。 以下のCSSをコピペするだけで、僕が作成した「 monolithic - テーマ ストア 」と同じアイコンが追加されます。

もしアイコンを変更したい場合は、この「 はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい! 」で紹介されているアイコンのコードとcssのcontent:“\fXXX"の部分を入れ替えて下さい。

/*デフォルトのアイコン*/
.hatena-module-title::before{
    content: "\f000";
    display: inline-block;
    font-family: blogicon;
    margin-right: 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* プロフィール */
.hatena-module-profile .hatena-module-title::before{
    content: "\f016";
}

/* 検索 */
.hatena-module-search-box .hatena-module-title::before{
    content: "\f01a";
}

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

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

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

/* 関連記事 */
.hatena-module-related-entries .hatena-module-title::before{
    content: "\f032";
}

/* アクセスランキング */
.hatena-module-entries-access-ranking .hatena-module-title::before{
    content: "\f02d";
}

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

/* 執筆者 */
.hatena-module-authors-list .hatena-module-title::before{
    content: "\f00b";
}

/* 最近のコメント */
.hatena-module-recent-comments .hatena-module-title::before{
    content: "\f01d";
}

/* はてなグループ */
.hatena-module-circles .hatena-module-title::before{
    content: "\f021";
}

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

広告を非表示にする