読者です 読者をやめる 読者になる 読者になる

えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

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

f:id:mshimfujin:20160928175928p:plain

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

f:id:mshimfujin:20160928163717p:plain

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

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

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

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

完成図

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

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

f:id:mshimfujin:20160928163717p:plain

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

f:id:mshimfujin:20160928162500p:plain

 アーカイブのページ

f:id:mshimfujin:20160928164335p:plain

コピペする場所

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

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20160925/20160925202616.png


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

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;/* 文字列までの距離 */
}

テーマによって微調整が必要だと思うので、アイコンの大きさとか位置を調節して使用して下さい。

色の見本はこちらを参考にするのがオススメです。

www.colordic.org webdesignrecipes.com

 

まとめ

ちなみに、今回の記事はこの前の記事の応用編な感じです。

blog.mshimfujin.net

如何でしたでしょう?もしも違うアイコンを呼び出したいのであれば、以前の記事をチェックしてみて下さい。

ではでは、また次の記事で…

 

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他
PVアクセスランキング にほんブログ村