はてはカスタマイズ

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

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

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

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

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

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

この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。

【はてなブログ】カテゴリ表示に動きをつける方法、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

CSSの1番下にソースコードを入力→変更を保存する

これで完了です。

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

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

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

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

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

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

【はてなブログ】サイドバーの「カテゴリ」をタグ風にする方法この記事では、はてなブログのサイドバーのカテゴリをタグ風にする方法を画像付きで解説していきたいと思います。カテゴリを見やすくすることによって、読者にとってサイトが発信していることは何か分かりやすくなります。ユーザーファーストを意識したサイトはPVも増加する傾向にあるので積極的に取り入れていきましょう。 ...

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

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

 

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


↓「ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です