はてなブログのカテゴリーをCSSでタグっぽくしてみた
サイドバーのカテゴリーデザインを変更
１行１カテゴリだと、縦幅もとるしはてなの仕様だと
カテゴリーっていうか、タグに近いよなーと思ってそれっぽく変更
タグクラウドみたく、文字の大きさ変えようと思ったんだけど
大きさは一定の方が綺麗なきがするので、角を丸くして満足
やりかた
このタグをデザイン設定＞カスタマイズ＞デザイン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 をつかうとデフォルトだと
・カテゴリ１
・カテゴリ２
みたくなっちゃうので、この『・』のマーカーは邪魔
list-style-type: none;
角丸にする
何も指定しないと、背景色だけついて長方形になっちゃうので
ボタンっぽく？角丸にする
border-radius: 10px 10px 10px 10px
昔は画像とか使ってたんだけど、便利になりました
参考にしたサイト
clear:both;を忘れずに－ブログ・テンプレート作成入門
ご紹介いただきました！
参考にしていただいたということで、ブログに載せてくださいました
紹介していただけると小躍りしたくなりますね
みなさまのカテゴリが充実しますように✨
2018年9月追記
３年前の記事なのに使っていただき、嬉しいです✨
