サイドバーのあるカテゴリスペースはトップページの中でも重要な集客ポイントになります。
シンプルなカテゴリも良いですが、読者の目に映るようなインパクトのあるものにしたいと考えることもあるでしょう。
どうも、ブログ運営者のポチ(@sunrise_033)です。
この記事では「はてなブログ」でカテゴリ表示にカーソルを合わせた時、動きをつけるCSSコードを紹介したいと思います。
↑完成すると上記のような動きになります。

「高コスパ」・「日常の節約」をテーマにブログを運営
Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン
食べること大好き。レビュー記事を更新中
月間平均54,000PV/収益5桁達成
【はてなブログ】カテゴリ表示に動きをつける方法、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番下にソースコードを入力→変更を保存
する
デザイン

スパナマーク(カスタマイズ)
→デザインCSS

変更を保存
する
これで完了です。
実際にサイトを開いてみて反映されているか確認してみてくださいね。
文字が動くとさりげないインパクトが出る
文字が動くとさりげないインパクトが出ます。
このさりげなさが良い塩梅になってて良いということもあるので、こうしたカスタマイズは実践していくとよさそうですね。
なぜなら、演出がありすぎると読者もくどいと思ってしまうから( ・∇・)
もしカテゴリをタグ風にしたい場合は下記記事に詳しくまとめているので参考にしてみてください↓
コメント