Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

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

| 0件のコメント

ケース1
ブログを改造したらサイドバーがない!
いや、あった!記事の下に。
ケース2
サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている!

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

ブログの中に作った表(テーブル)が下に下がってしまうのは別の理由です。
その解決方法は「表テーブルが下がる原因と対処法」に書いてあります。

またファンブログの場合はサーバートラブルでサイドバーだけ出ない事があります。
その解決方法は、かこの記事「サイドバーが消えても慌てない:ファンブログ」にあります。

widthとheight

width
横幅を指定する。
height
高さを指定する。

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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル
サイドバー 170ピクセル


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

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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル
サイドバー 171ピクセル


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

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

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

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

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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル

サイドバー 170ピクセル
ボーダー 2px


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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル

サイドバー 166ピクセル
左右ボーダー各2px
合計170pxなら収まる



marginとpadding

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

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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル

サイドバー 170ピクセル
左右マージン各2px


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


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

← width:470px →
← width:300px →
← width:170px →
記事部分 300ピクセル

サイドバー 170ピクセル
左右パディング各2px


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

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

カテゴリーアーカイブ

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

<div style=”background:#fc0;color:#fff;text-align:center”>背景がただの色の場合</div>

上のソースの表示結果

背景がただの色の場合

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

no-repeatに関しては「枠の中の背景に画像を使いたい!」の説明を見てください。

heightでの指定

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

<div style=”width:250px;height:45px;background:url(‘画像のURL’) no-repeat;text-align:center;”>カテゴリーアーカイブ</div>
カテゴリーアーカイブ

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

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

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

<div style=”width:250px;line-height:45px;background:url(‘画像のURL’) no-repeat;text-align:center;”>カテゴリーアーカイブ</div>
カテゴリーアーカイブ

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

<div style=”width:250px;line-height:45px;padding-top:8px;background:url(‘画像のURL’) no-repeat;text-align:center;”>カテゴリーアーカイブ</div>
カテゴリーアーカイブ

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

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

コメントを残す

Top