チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】タイトル下に表示されるカテゴリのデザインを変更してみた

 スポンサード リンク

 今回ははてなブログの記事タイトル下のカテゴリリンクのデザイン変更方法をご紹介していこうと思います。


f:id:chipsforest:20150206230559j:plain:w300

 上画像の赤い○で囲んだ部分です。

 これはスマホ用ページのものなんですが、今回はPCページも同じデザインにしてみました。

カテゴリデザイン変更方法

<style>

.categories
{
font-weight:bold;
background: #444B99;/*カテゴリの背景色*/
padding: 5px 10px;/*カテゴリ文字のまわりのスペース*/

}

.categories a
{
color:#ffffff; /*カテゴリリンクの文字色*/
}

</style>

 「background」「padding」「color」はお好みで変更してください。

 あとは「font-size」で文字のサイズ変更してもいいんじゃないかなと思います。


 上のソースを「はてなブログ管理画面」→「設定」→「詳細設定」→「headに要素を追加」に書き込めば完成。

f:id:chipsforest:20150206230025j:plain:w300

 ↑こうなっていれば成功です。



f:id:chipsforest:20150206231801j:plain:w200

 スマホページにのみ反映させたい場合は「headに要素を追加」の中ではなく、「デザイン」→「スマホのマーク」→「ヘッダ」→「タイトル下」(上画像の部分)に書き込めばOKです。

 PCページのみに反映したい場合は「デザイン」→「スパナっぽいマーク」→「ヘッダ」→「タイトル下」に記入でいいと思います。

広告を非表示にする

PAGE TOP