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

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

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

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

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

<style>

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

}

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

</style>

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

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

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

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

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

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