はてなブログのサイドバーのカテゴリーの簡単カスタマイズ

はてなブログのサイドバーに設置できるカテゴリーのパーツいいのですが、
縦1列に並んで、非常に長くなっていやだ(´・ω・`)というのがあります。
カテゴリーが多くなると余計に長くなっていやだ。
ということで、ちょっとだけデザインを加えてカスタマイズしました。

適用前

なにこのカテゴリー長すぎ(´・ω・`)……

改造方針

inline-blockを使って、li要素を横に並ぶようにします。
あとはhoverを使ってマウスオーバーしたときにちょっと光るようにします。

コピペでデザインCSSに追加しましょう

下記のコードをデザインCSSに貼り付けます。

/**
 * サイドバーのカテゴリーモジュール
 */
div.hatena-module-category div.hatena-module-body ul li a {
    color : #ffffff;    /* 文字色 */
}
div.hatena-module-category div.hatena-module-body ul li {
    display: inline-block; /* 横並びに変更 */
    border-radius: 6px;
    line-height: 10px;
    transition: none;
    background-color: #8CB2A3; /* お好きな色に */
    margin-top: 0.5em; /* 要素の間隔調整 */
} 
div.hatena-module-category div.hatena-module-body ul li:hover {
    background-color: #9fc9b8; /* お好きな色に */
}

貼り付け場所はここ！

ここをクリックして……

ペタリ。
コメントを描いているところはお好きなように変更してください。
色見本はこのサイトが良いですよ。

適用後

カテゴリーが多くて根本的な解決にはなっていませんが、
縦に長い状態が解消されました。

参考にしたサイト

https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
ここを見るともっとゴージャスなものができたりします。

お詫び

なんでかCSSの閉じの波かっこ(brace)が切れていました。修正いたしました。