- ケース１
- ブログを改造したらサイドバーがない！
- いや、あった！記事の下に。
- ケース２
- サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！
そうなってしまうのはなぜか？どうやれば直るのか。
ブログの中に作った表（テーブル）が下に下がってしまうのは別の理由です。
その解決方法は「表テーブルが下がる原因と対処法」に書いてあります。
またファンブログの場合はサーバートラブルでサイドバーだけ出ない事があります。
その解決方法は、かこの記事「サイドバーが消えても慌てない：ファンブログ」にあります。
widthとheight
- width
- 横幅を指定する。
- height
- 高さを指定する。
この記事を書いている部分の横幅は470ピクセル(px)です。
その幅の中で下のような配置をするとします。
横幅が、記事とサイドバーをあわせて470ピクセルまでなら、はみだしません。
では、記事が300ピクセル、サイドバーが171ピクセルならどうなるか。
入りきらないので下に下がります。
ここまでは問題なく理解できると思います。
記事部分とサイドバーのwidthが外枠の幅に合わせてあるのに下がる場合
borderの太さを計算しているか？
borderの説明は「色つきの枠で文章を囲みたい」でしているので、それを見てください。
borderは、その枠の外側に追加されます。 つまり、外枠のwidthが470ピクセルの時に、内枠が470ピクセルなら入りますが、それにborderをつけると、その枠の分だけはみ出します。
サイドバー 170ピクセル
ボーダー 2px
ちなみに左右にそれぞれ2ピクセルのボーダーがあれば、合計4ピクセルはみ出します。
はみださないようにするには、borderの付いているものの幅をその分狭めます。
サイドバー 166ピクセル
左右ボーダー各2px
合計170pxなら収まる
marginとpadding
marginとpaddingについての説明は「背景画像と重ならない文字配置」を見てください。
内枠にmarginを付けていれば、その分も内枠の大きさに足さないといけません。
サイドバー 170ピクセル
左右マージン各2px
borderの時と同じで
はみださないようにするには、marginを指定しているものの幅をその分狭めます。
個人的にはこれが一番意外だったのですが、サイドバーの中にpaddingをつけている場合
sidebarのwidthと左右padding分を足したサイズが外枠のwidthを超えるとはみ出します。
サイドバー 170ピクセル
左右パディング各2px
サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！
タイトル部分の背景が下のように中途半端になる場合は、高さの指定がされていないからです。
背景がただの色の場合は、それでもうまくいきます。
上のソースの表示結果
しかし、背景にno-repeatで画像を指定する場合、その画像の高さと同じサイズを指定しないと
いけません。
heightでの指定
この画像は横幅250ピクセル、高さ45ピクセルなので、それを指定します。
画像は全体が表示されますが、文字の位置が高すぎます。そんな時に便利なのが
line-heightです。
line-heightの説明は「背景画像と重ならない文字配置」を見てください。
heightをやめて、line-heightを使います。
これでもおかしい時はpaddingを使って調整します。
これでうまくいきました。
文字を太くするには、font-weight:bold;を追加します。
文字の色変更に関しては「スタイルシートでの色の指定方法」を見てください。