Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

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

スポンサードリンク

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

適用前

f:id:fa11enprince:20150730072342p:plain
なにこのカテゴリー長すぎ(´・ω・`)……

改造方針

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; /* お好きな色に */
}

貼り付け場所はここ!
f:id:fa11enprince:20150730072738p:plain
ここをクリックして……
f:id:fa11enprince:20150730072751p:plain
ペタリ。
コメントを描いているところはお好きなように変更してください。
色見本はこのサイトが良いですよ。www.color-sample.com

適用後

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

参考にしたサイト

www.nxworld.net
ここを見るともっとゴージャスなものができたりします。

お詫び

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