【はてなブログ】カテゴリ部分のカスタマイズ

記事ページの記事タイトルのそばに表示されるカテゴリ名のカスタマイズです。
トップページやアーカイブページ（カテゴリ別ページや月別アーカイブのページ）にも応用できます。




サイドバーのカテゴリ部分のカスタマイズはこちらの記事などを参照してください。
fa11enprince.hatenablog.com
www.ksmemo.com

記事ページのカテゴリ部分のカスタマイズ

記事ページのカテゴリ部分になにかカスタマイズを加える場合はこのように記述します。

.page-entry .entry-header .categories{/*カスタマイズ内容*/}

たとえばカテゴリ名の前に「カテゴリ名」みたいにアイコンを挿れたい場合、

.page-entry .entry-header .categories::before{content:"\f04a";font-family:blogicon;}

とします。（使えるアイコン一覧はこちらの記事を参照してください）

アーカイブページのカテゴリ部分のカスタマイズ

アーカイブページのカテゴリ部分になにかカスタマイズを加える場合はこのように記述します。

.page-archive .archive-entry .categories{/*カスタマイズ内容*/}

アーカイブページのタイトル部分もあわせてカスタマイズする場合は、このようにします。

.page-archive .archive-heading{/*カスタマイズ内容*/}

たとえば先ほどのアイコンをここにもいれたい場合、こうします。

.page-archive .archive-heading::before{position:relative;content:"\f04a";font-family:blogicon;font-color:white;}

トップページのカテゴリ部分のカスタマイズ

トップページのカテゴリ部分になにかカスタマイズを加える場合はこのように記述します。

.page-index .entry-categories{/*カスタマイズ内容*/}