東海道・山陽三十五次(はてな)

(旧タイトル:がゆゆキごきわ)Yahooブログ「東海道・山陽三十五次」より移転してきました。

はてなブログのカスタムCSSでサイドバーデザインを微修正

はてなブログCSSをかなり自由に書き加えられるようで、CSS学びたての身としてはあれこれ弄りたくなるものでして。
そんな訳で、ちょっとビビりながらもカスタムCSSでサイトデザインを小変更してみました。

以前からPC表示時のサイドバーにカテゴリ一覧を置いていましたが、これがかなり嵩張る。
記事数が多いカテゴリ順に上位15件まで表示する設定だったのですが、もともとは上位30件くらいまでは表示したいなと思っておりました。

変更前のカテゴリ部分
しかし、30件にするとこの状態。
もうちょっとコンパクトにまとめたかったので、ここのCSSを弄ってみることにしました。


デベロッパツールでカテゴリ部分につけられているクラス名を探したところ、hatena-module-categoryという名前がそれらしく。
その中にあるli要素について、paddingを縮めてborder-bottomを非表示に、font-sizeを80%まで縮めてfloat: leftを指定。さらにmargin-rightも1em追加。

ここまでやったところで一度CSSを適用させてみると、うっかりfloatを解除し忘れたためにカテゴリ以下のすべての要素が左側に回りこんでしまいました。慌てて直後のhatena-module-archiveにclearプロパティを追加。

また白色になる背景部分の高さが最小になってしまったので、hatena-module-categoryクラスのdiv要素にoverflow: hiddenと追加。

コンパクトにまとめた状態
とりあえずはコンパクトに。

1番最初の鉄道カテゴリだけが上側に寄っているので調べてみると、hatena-urllistクラスのli:first-childでpadding-topが0にされていました。
これを3pxに変更して完成。

完成
ついでに上位40件までの表示に変更しました。