【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

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

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

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

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

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

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

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴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番下にソースコードを入力→変更を保存する

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

これで完了です。

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

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

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

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

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

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

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村


この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次