はてなブログのサイドバーのカテゴリーをボタン風に表示

hatenaロゴ

このブログは、まだカテゴリーが少ないのでタグクラウドまではいりませんが、サイドバーのカテゴリーをタグクラウドっぽくボタン風(タグ風)にCSSで表示してみました。

コードは次のとおり(デザイン設定→カスタマイズ→デザインCSSにコードを入力)

.hatena-module-category .hatena-urllist {
	margin: 23px 0 0;
}

.hatena-module-category .hatena-urllist li {
	display: inline-block;
	font-size: 14px;
	margin: 0 0 25px;
}

.hatena-module-category .hatena-urllist li a {
	text-decoration: none;
	padding: 9px;
	color: #454545;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	transition: 0.3s; /*ふわっと表示させる*/
}

.hatena-module-category .hatena-urllist li a:hover {
	text-decoration: none;
	color: #fff;
	background: #454545;
	border-color: #454545;
}

「display: inline-block」で縦並びだったカテゴリーのリストを横並びにしました。
リンクを選択したときに色を反転させたのがポイントでお気に入りです。

※ このブログのテーマはMinimalismなので、他のテーマで表示できないかもしれません。

参考にしたブログ・Webサイト
16bit! - 【CSS】はてなブログのカテゴリ欄をタグクラウド風に
えむしとえむふじんがあらわれた - 【カスタマイズ】コピペするだけ!カテゴリーをタグ風にカスタマイズする方法