読者です 読者をやめる 読者になる 読者になる

プログラマ独女の貯金生活

プログラマをしているアラサー独女。家計簿をつけながら貯金に勤しみます。

はてなブログのカテゴリーをCSSでタグっぽくしてみた

ブログカスタマイズ css

サイドバーのカテゴリーデザインを変更

はてなダイアリー 実践デザインカスタマイズガイド

1行1カテゴリだと、縦幅もとるしはてなの仕様だと
カテゴリーっていうか、タグに近いよなーと思ってそれっぽく変更
タグクラウドみたく、文字の大きさ変えようと思ったんだけど
大きさは一定の方が綺麗なきがするので、角を丸くして満足

やりかた

このタグをデザイン設定>カスタマイズ>デザインCSS にいれるだけ

.hatena-module {
    clear: both;
    overflow: hidden;
}

.hatena-module-category .hatena-module-body ul.hatena-urllist li {
    float: left;
}

/* category css */
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
    float: left;
    list-style-type: none;
    margin: 0 2px 2px;
    padding: 7px;
    background-color: #ff99cc;
    text-decoration: none;
    border-radius: 10px 10px 10px 10px
}

.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
    color: #fff;
}

リストのマーカーを無くす

ul li をつかうとデフォルトだと
・カテゴリ1
・カテゴリ2
みたくなっちゃうので、この『・』のマーカーは邪魔

  list-style-type: none;

list-style-type-スタイルシートリファレンス

角丸にする

何も指定しないと、背景色だけついて長方形になっちゃうので
ボタンっぽく?角丸にする

    border-radius: 10px 10px 10px 10px

border-radius-CSS3リファレンス

昔は画像とか使ってたんだけど、便利になりました

参考にしたサイト

tech.tmd45.jp

nohack-nolife.hatenablog.com

clear:both;を忘れずに-ブログ・テンプレート作成入門

ご紹介いただきました!

参考にしていただいたということで、ブログに載せてくださいました

紹介していただけると小躍りしたくなりますね

みなさまのカテゴリが充実しますように✨

dokuwohaku.hateblo.jp

xxkiko.hateblo.jp

www.hoshinokiiro.com

tricoro.hateblo.jp

dac.hateblo.jp