階層表示の崩れを直す

カテゴリー表示で子カテゴリーありだと、配置崩れがひどいので修正。

前提

  • テーマ「Sparkling」でのみ確認。
  • Chromeでのみ確認。
  • 子カテゴリーまでという状態で確認。

ウイジェットのクラス指定

ウィジェットのスタイルは統一したい。
サイドバー以外に、記事の下にウィジェットが配置するパターンもあるのだ。
結論だけ言うと、当テーマではwidgetクラスを使う。
LIの場合は次のように指定する。ULは省略しないほうがいいだろう。

.widget ul li {~}

行間はLIで設定

LIタグの基本値を先に決める。
margin-bottomは0にすべきだ。
入れ子構造により二重に取り、下が広くなりすぎるため。

  • margin-topで行間を調整した。他marginは0とした。
  • paddingは0とした。

子カテゴリーのズレはULで設定

子カテゴリーの配置は、右にずらさねばならない。
UL(親のpadding)で調整か、LI(子のmargin)で調整のいずれかだが。

今回はULで調整した。
LIで何回も計算させるよりスマートなはず、と仮定した。
現時点では問題ないようにみえる。

  • padding-leftで横ズレを調整した。他paddingは0とした。
  • marginは0とした。

全体のバランス

見栄えをよくするためには、全体を見る必要がある。
margin-topのみ設定するということで、上が空きすぎたとする。
その場合、上に位置する要素にもmarginかpaddigが設定されているはずで、そちらでスタイル調整する。