サイドバーのカテゴリーデザインを変更
１行１カテゴリだと、縦幅もとるしはてなの仕様だと
カテゴリーっていうか、タグに近いよなーと思ってそれっぽく変更
タグクラウドみたく、文字の大きさ変えようと思ったんだけど
大きさは一定の方が綺麗なきがするので、角を丸くして満足
やりかた
このタグをデザイン設定＞カスタマイズ＞デザイン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月追記
３年前の記事なのに使っていただき、嬉しいです✨
コメント
こんばんは！
WEBエンジニア女子のみきです(*￣∇￣*)
私たちのブログをご覧いただきありがとうございます＼(^o^)／
はてブって、用意されたブログサービスなのに
すごいカスタマイズ性ありますよね！！
すごく気に入っています(*´ω｀*)
id:we-girlsさん
コメントありがとうございます！
女子のエンジニアが増えるのは大歓迎、なのでこれからも更新楽しみにしています♪
普段はバックエンドの開発なので、テンプレートいじったりして、いろいろ楽しんでます
あとmarkdownでかけるのも、個人的には楽だったり( ´ ▽ ` )
こちら使用させて頂きました！
ありがとうございます！
もともとのカテゴリーの表示より目立つしカッコイイし、とても素敵です！
記事へのリンクまで貼って頂きまして、重ねてお礼申し上げます。
誠にありがとうございました！
こちらこそ、ご紹介いただきありがとうございました！
自分のメモ書きくらいに考えていたので、使っていただいてとても嬉しかったです
また機会がありましたら、よろしくお願い致しますー。
こんにちは。
記事へのリンクをありがとうございます。
使用させていただいたのに何の連絡もしていなかったことに気づきました。
すみませんでした。
角丸、とても気に入っています♪
id:kiiroihoshi さん コメントまでいただき、ありがとうございます。
全然、言及されただけてほくほくしますｗ
お互いブログがんばりましょうね♪