【はてなブログ】カテゴリ表示に動きをつける方法、CSSコードで簡単

サイドバーのあるカテゴリスペースはトップページの中でも重要な集客ポイントになります。

シンプルなカテゴリも良いですが、読者の目に映るようなインパクトのあるものにしたいと考えることもあるでしょう。

どうも、ブログ運営者のポチ（@sunrise_033）です。

この記事では「はてなブログ」でカテゴリ表示にカーソルを合わせた時、動きをつけるCSSコードを紹介したいと思います。

↑完成すると上記のような動きになります。

【はてなブログ】カテゴリ表示に動きをつける方法、CSSコードで簡単

ではさっそく解説していきたいと思います。

CSSコードはこちらになります↓

/**
 * サイドバーのカテゴリーモジュール
 */
 div.hatena-module-category div.hatena-module-body ul li a {
    color :;    /* 文字色 */
}
div.hatena-module-category div.hatena-module-body ul li {
    display: block; /* 縦並びに変更 */
    line-height: 30px;
} 
div.hatena-module-category div.hatena-module-body ul li {
  display: block;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
div.hatena-module-category div.hatena-module-body ul li:hover {
 -webkit-animation: zoom .3s;
  animation: zoom .3s;
}
@-webkit-keyframes zoom {
  50% {
    -webkit-transform: scale(1.05);
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.05);
  }
}

貼り付ける手順

はてなのダッシュボード→デザイン→スパナマーク（カスタマイズ）→デザインCSS→CSSの1番下にソースコードを入力→変更を保存する

これで完了です。

実際にサイトを開いてみて反映されているか確認してみてくださいね。

文字が動くとさりげないインパクトが出る

文字が動くとさりげないインパクトが出ます。

このさりげなさが良い塩梅になってて良いということもあるので、こうしたカスタマイズは実践していくとよさそうですね。

なぜなら、演出がありすぎると読者もくどいと思ってしまうから( ・∇・)

もしカテゴリをタグ風にしたい場合は下記記事に詳しくまとめているので参考にしてみてください↓