【ブログカスタマイズ】コピペするだけ！カテゴリー欄にタグのアイコンを表示させる方法

こんにちは、えむしです。今日は上の図にあるように、カテゴリーの横にタグのマークを出すカスタマイズをして行きます。

f:id:mshimfujin:20160928163717p:plain

テーマによっては標準で表示させられるようになっているので不要かもしれませんが、興味を持った方は是非導入してみてください。

えむふじんにボツって言われたので、現在当サイトでこのカスタマイズを導入していません。

ですがせっかく作ったので残しておきたくて記事にしました。

カテゴリーが多いからたくさんマークが出て気持ち悪いんですって…

完成図
コピペする場所
CSS
まとめ

完成図

テーマのInnocentで、何もカスタマイズしていない状態での完成図です。

先ほどと同じものですがトップページにアクセスした時の見え方です

f:id:mshimfujin:20160928163717p:plain

サイドバーのカテゴリー欄

f:id:mshimfujin:20160928162500p:plain

アーカイブのページ

f:id:mshimfujin:20160928164335p:plain

コピペする場所

まずはコピペ場所を開きます。場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。ここをクリックして開いてください

以下に紹介するコードを一番下なんかにペーストして下さい。

CSS

以下のコードを貼ります。

/* タグつけ */
.hatena-module-category .hatena-module-body ul.hatena-urllist li a:before {
    font-family:"FontAwesome";
    content:"\f02b";/* アイコンを変えたいときはココを変更 */
    color:#5d5d5d;/* アイコンの色 */
    font-size:.7em;/* アイコンの大きさ */
    margin-right:.5em;/* 文字列までの距離 */
}
.entry-header .categories :before{
    font-family:"FontAwesome";
    content:"\f02b";/* アイコンを変えたいときはココを変更 */
    color:#5d5d5d;/* アイコンの色 */
    font-size:.7em;/* アイコンの大きさ */
    margin-right:.5em;/* 文字列までの距離 */
}
.archive-entry .categories :before {
    font-family:"FontAwesome";
    content:"\f02b";/* アイコンを変えたいときはココを変更 */
    color:#5d5d5d;/* アイコンの色 */
    font-size:.7em;/* アイコンの大きさ */
    margin-right:.5em;/* 文字列までの距離 */
}