懲りずにまたサイドバーを色々いじってみました。

MovableType3.2のデフォルトテンプレートの横幅をいじるでも散々サイドバーをいじくりまわしていたのですが、今ひとつ理解できていない部分があって、またいじってみました。

まずサイドバーの構成要素をもう一度、確認してみます。
各要素の背景や、borderをわかりやすい色に色分けしてみました。
各要素に、background: #xxxxxx; を追加して適当な背景色を入れていきました。

こうしてみると、なんとなく横幅に関してはborderやpaddingで定義されている雰囲気がわかるのですが、ただ、高さに関してはいじりだすとわけがわからなくなりました。
特に.module-listや.module-list .module-listの部分は下手にいじると、文字が重なってしまいました。

高さは、そっとしておきます（笑）。

さて、実際に構成要素をみてみます。

図の上の方が色分けした各要素。
下の方が各要素のpaddingやmarginを抜き出したものです。

ヘッダー部分も含めてサイドバー全体は#beta-innerに包まれています。
そして、「検索」や「カテゴリー」の各パーツは、ヘッダーも含めて.moduleに包まれています。
.moduleの緑色は、下の方にちょろっとしか出ていませんが、ヘッダーや.module-contentのピンク色の下にも.moduleの緑色があると思って下さい。

わかりにくいのが、.module-listです。
●（黒丸）は、リスト先頭に付くマークですが、どうも.module-listの中身ではないようです。

.module-contentのpadding＝●（黒丸）の開始位置。
.module-contentのpadding＋.module-listのmargin＝.module-listのリストの文章の開始位置。
みたいです。

ちなみに、list-style: disc;と指定するとリストのマークが●（黒丸）になります。

さらに、.module-list .module-listがわかりにくいです。
そもそも、何で.module-listが2つ続いているのかと言いますと、これは.module-listの中に.module-listが出現した時にだけ、このスタイルシートを適応する、というスタイルシートの定義の仕方です。

例えば
blockquote img｛border: 1px solid #000000;｝　
と定義すると、blockquoteの中に出てきたimgにだけborderを指定することができるというわけです。

.module-contentのpadding.＋.module-listのmargin＝.module-list .module-listの要素の開始位置。
.module-list .module-listの要素の開始位置＋.module-list .module-listのpadding-left＝.module-list .module-listのリストの文章の開始位置。
みたいです。

ただ、○（白丸）がなぜこの位置にあるのかはイマイチよくわかりません。
○（白丸）の位置については、そっとしておくことにします（笑）。

ちなみに、list-style:circle;と指定すると、リストのマークが○（白丸）になります。

続いて、いろいろ数値を変更してみました。
どこがどう変わったのかをみると、意外と参考になるかもしれません。
そしてますます、○（白丸）がなぜこの位置にあるのかわからなくなりました（笑）。

さらに、サイドバーの要素のヘッダー部分のカスタマイズでやったように、.moduleの背景に画像を使ってみました。
ヘッダーには前回使用した画像を使用しています。

前回はbackgroung-repeat:no-repeat;と指定しましたが、
サイドバーの中身が増えればパーツはどんどん下に伸びていくので、backgroung-repeat:repeat-y;として、縦方向に画像が繰り返し出現する設定にしています。

＠ 2006年02月13日