サイドバートラブル解決法

ケース１

ブログを改造したらサイドバーがない！

いや、あった！記事の下に。

ケース２

サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！

そうなってしまうのはなぜか？どうやれば直るのか。

widthとheight

この記事を書いている部分の横幅は470ピクセル(px)です。
その幅の中で下のような配置をするとします。

横幅が、記事とサイドバーをあわせて470ピクセルまでなら、はみだしません。

では、記事が300ピクセル、サイドバーが171ピクセルならどうなるか。
入りきらないので下に下がります。

ここまでは問題なく理解できると思います。

記事部分とサイドバーのwidthが外枠の幅に合わせてあるのに下がる場合

borderの太さを計算しているか？

borderの説明は「色つきの枠で文章を囲みたい」でしているので、それを見てください。

borderは、その枠の外側に追加されます。
つまり、外枠のwidthが470ピクセルの時に、内枠が470ピクセルなら入りますが、それにborderをつけると、その枠の分だけはみ出します。

ちなみに左右にそれぞれ2ピクセルのボーダーがあれば、合計4ピクセルはみ出します。
はみださないようにするには、borderの付いているものの幅をその分狭めます。

marginとpadding

marginとpaddingについての説明は「背景画像と重ならない文字配置」を見てください。

内枠にmarginを付けていれば、その分も内枠の大きさに足さないといけません。

borderの時と同じで
はみださないようにするには、marginを指定しているものの幅をその分狭めます。

個人的にはこれが一番意外だったのですが、サイドバーの中にpaddingをつけている場合
sidebarのwidthと左右padding分を足したサイズが外枠のwidthを超えるとはみ出します。

サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！

タイトル部分の背景が下のように中途半端になる場合は、高さの指定がされていないからです。

背景がただの色の場合は、それでもうまくいきます。

上のソースの表示結果

しかし、背景にno-repeatで画像を指定する場合、その画像の高さと同じサイズを指定しないと
いけません。

heightでの指定

この画像は横幅250ピクセル、高さ45ピクセルなので、それを指定します。

画像は全体が表示されますが、文字の位置が高すぎます。そんな時に便利なのが

line-heightです。
line-heightの説明は「背景画像と重ならない文字配置」を見てください。

heightをやめて、line-heightを使います。

これでもおかしい時はpaddingを使って調整します。

これでうまくいきました。

文字を太くするには、font-weight:bold;を追加します。
文字の色変更に関しては「スタイルシートでの色の指定方法」を見てください。