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

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

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

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

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

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

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

【はてなブログ】カテゴリ表示に動きをつける方法、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番下にソースコードを入力→変更を保存する

これで完了です。

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

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

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

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

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

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

あわせて読みたい

【はてなブログ】サイドバーの「カテゴリ」をタグ風にする方法 はてなブログのサイドバーのカテゴリをタグ風にする方法です。 といっても、コピペするだけで簡単にできます。テーマによっては少し調整も必要な場合もあったので、その対処も含めて見ていきたいと思います。

最後まで読んでいただき、ありがとうございました。

あわせて読みたい

はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

ポチ

この記事が良いと思ったら、ポチっ！してくれると嬉しいです！