16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【CSS】はてなブログのカテゴリ欄をタグクラウド風に

カテゴリ表示周りのCSSを少し弄りました。
具体的には、

・サイドバーのカテゴリ表示がタグクラウド風に
・記事タイトル部のカテゴリ表示がふわっとした感じに

なっています(記事投稿時点)。

タグクラウドがまだ流行ってるのかどうかは正直知りませんが、
とりあえずサイドバーを短くしたかった。

それに件数じゃなくて文字の大きさで記事の多寡が分かるほうが直感的だし、
ブログそのもののプロフィールとして良い、気がします。

サイドバーをタグクラウド風に

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする!

やり方はほぼほぼこちらのサイト*1のものをそのまま使わせていただきました。

アレンジした点は記事数の判定条件と、
あとはdisplayをinlineではなくinline-blockにしたくらいです。
理由としてはhover時に文字列をふわっと大きくさせたかったから。

CSS初心者ですが、今のところCSSゆるふわ感がマイブームです。
だからタイトル部のカテゴリ表示もふわっとさせました。

.hatena-module-category .hatena-module-body ul li {
  display: inline-block;
  margin: 0 0.3em 0 0;
  padding: 0em;
  border-bottom: 0px;
  transition: 0.2s;
}
.hatena-module-category .hatena-module-body ul li:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 20;
}

終わり。

*1:このサイトのデザインすごく好み