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

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

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.hatena-module-category li {
    display: inline-block;
    font-size: 14px;
    padding: 0 0 30px;
}

.hatena-module-category li a {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 7px 6px;
    color: #000;
    text-decoration: none;
    transition: 0.5s; /*ふわっと表示*/
}

.hatena-module-category li a:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    text-decoration: none;
    transition: 0.5s; /*ふわっと消す*/
}

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

16bit!｜【CSS】はてなブログのカテゴリ欄をタグクラウド風に
えむしとえむふじんがあらわれた｜【カスタマイズ】コピペするだけ！カテゴリーをタグ風にカスタマイズする方法
Webpark｜マウスを乗せたときと外したときでtransitionの内容を変える方法