モジュールのタイトルにアイコンを追加する - はてなブログカスタマイズ
こんにちは、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"; }
- 作者:JOE AOTO
- 発売日: 2016/07/22
- メディア: 単行本
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ
- 作者:相澤 裕介
- 発売日: 2016/10/01
- メディア: 単行本