seesaaブログ:ブログの幅を変更する

サイドバーが落ちるトラブルシューティング - テスト - Seesaa Wiki（ウィキ）
サイドバーが落ちるトラブルシューティング
サイドバーが落ちる（下の方に表示されてしまう）というご質問が多いようですので、いくつかサイドバーが落ちるケースを検証したいと思います。
■特にCSSやHTMLなどをカスタマイズしていないのに、ある日突然サイドバーが落ち始めたケース
このケースの場合、記事を投稿した際に入れた画像が、本文のカラムの横幅を越えていることでサイドバーが落ちることが多いようです。
大きい画像や、複数の画像を横に並べる場合は注意が必要です。
また、tableタグを使った場合も同様に、tableの横幅が大きすぎて本文のカラムの横幅を越えると、サイドバーが落ちます。
画像やtableの幅がカラムを越えていない場合でも、marginやpaddingとのあわせ技で、記事の内容が結果的にカラムの横幅を越えて、サイドバーが落ちる場合があります。
微妙に大きい画像やtableは、原因として疑った方がいいかもしれません。
個別記事にもサイドバーが表示されるテンプレートでは、個別記事を一つ一つ見て、どのページでサイドバーが落ちているのか確認してみましょう。
サイドバーが落ちているのが単独の個別記事であれば、その個別記事に原因があります。
その記事を非公開にするか、原因と思われる箇所を修正して投稿しなおしてみて下さい。
また、サイドバーの横幅が大きくなりすぎた場合も、サイドバーが落ちます。
プラグインの変更をしてからサイドバーが落ち始めた場合は、サイドバーの横幅が大きくなりすぎていないか確認してみてください。
カラムごとに、どこか横幅が大きくなっている場所がないか確認するには、カラムごとに”反転表示”をさせてみるのが有効な場合があります。
 文字を選択した状態にすると、文字が反転表示になります。
これを利用すると、一見横幅が大きくなっているように見えないけども、実は大きくなっている、という部分がわかる場合があります。

 テスト - Seesaa Wiki（ウィキ）
https://seesaawiki.jp/w/everydaydesign3/d/%A5%B5%A5%A4%A5%C9%A5%D0%A1%BC%A4%AC%CD%EE%A4%C1%A4%EB%A5%C8%A5%E9%A5%D6%A5%EB%A5%B7%A5%E5%A1%BC%A5%C6%A5%A3%A5%F3%A5%B0






ブログカスタマイズの覚書 特に気をつけたいIE6のバグ
ブラウザのバグと対策
2009/12/06
特に気をつけたいIE6のバグ
ブラウザのバグと対策のその他の記事（上が最近の記事）
修正（IE6/7）
float:leftのmargin-bottomが無視される
記事投稿時に注意すべきこと
floatとwidthとpadding（&border）の三角関係
どこまでバグ対策するかを考える
未だある程度のシェアを誇るIE6の有名なバグです。
Seesaaのブログをカスタマイズする上で、カラム落ちなど、大きくレイアウトが崩れる原因は、この２つだと思います。
この２つを覚えておくだけでも、かなり違うと思います。
1）floatを指定した場合にmarginが２倍になる
このバグは、floatと左右marginの特定の組み合わせで発生します。
下の例は、
3つのボックスにfloat:leftを指定し、
左右に10pxのmarginを指定しています。
この場合、左floatの一番左のボックスの左marginが2倍になります。
同様に、右floatの一番右のボックスの右marginも2倍になります。
全体の幅に余裕がある場合、問題ありませんが、きっちり合わせた場合、押し出されてカラム落ちになります。
>>>
（対策）marginが必要な場合、バグの発生しているボックスに、
display:inline;
と書き加える。
こうすれば、正常通りのmarginになります。
（display:inline;と書くことよる他のブラウザへの影響はないようです。）
（例）
.class名等{
float: left;
display:inline;
width:100px;
…
2）widthに、padding,borderの値が含まれてしまう
widthの正しい解釈は、下の図の左ですが、IE6では、右になります。
結果、paddingやborderの値分、内側に狭まっていきます。
このバグは、余裕のないレイアウトをしている場合、やっかいです。
（親にwidthが指定されていて、子にwidth、padding、borderを指定した場合）
FFなど、バグのないブラウザでレイアウト確認を行った人が、IE6で見たとき、子の幅が狭くなります。
IE6で確認を行った人が、バグのないブラウザで見たとき、子の幅は広くなります。
（子にwidthが指定されていて、親にwidth、padding、borderを指定した場合）
FFなど、バグのないブラウザでレイアウトの確認を行った人が、IE6で見たとき、親の幅が狭くなります。
IE6で確認を行った人が、バグのないブラウザで見たとき、親の幅は広くなります。
いずれの場合も、余裕のないレイアウトをしていると、カラム落ちにつながります。
>>>
（対策）divを追加し、外にボックスをつくり、
その外側のボックス（親）にwidthを指定、
内側のボックス（子）にpaddingを指定する。
（Paddingだけでなくborderの指定も構わないと思われますが、1px単位で合わせようとするとずれる場合もあるしく、その場合は、背景画像を使う方が安全との解説サイトもあります。）
_(アンダースコア)でハックもいいのかもしれませんが、問題のでるブラウザもありそうです。（未確認）
widthと左右padding、左右borderを指定しないことは、バグ対策の定石。と言われてるそうです。
（同様に、heightの場合は、上下padding、上下border）
この2）のバグに関しては、続編を書きます。
ここまでは、バグを意識せずに、widthと左右paddingを併用すると、レイアウトが崩れる可能性がある。と覚えてください。
その他、カラム落ちまではいかないけど、考慮しておくといいバグがあります。
3）clearのバグ（widthを指定する/margin-topを指定しない）こちらの記事参照。
IE6で発生するバグは他にもありますが、SeesaaのCSS中に、カラム落ちが発生する記述は特にありません。カスタマイズする際は、上の3つを考慮してください。
     
ブログカスタマイズの覚書
http://rain119.seesaa.net/article/134808254.html







seesaaブログ:ブログの幅を変更する
09）カスタマイズ例（レイアウト）のその他の記事（上が最近の記事）
ヘッダのコンテンツを横に並べる（clearfixの練習）
ブログの幅を変更する場合、
#contentの幅=width＋左右margin＋左右padding＋左右border
#linksの幅=width＋左右margin＋左右padding＋左右border　
の合計値が#containerのwidth以下におさまっていればカラム落ちにはなりません。
但し、IE6のバグ対策をする場合、
1）#contentのmargin-leftに数値を指定したら、display:inline;を書き加える。
2）#linksのmargin-rightに数値を指定したら、display:inline;を書き加える。
3）#content、#linksにpadding、borderを指定している場合は、こちらもお読みください。
※左サイドバーの場合は、左右が入れ替わります。3カラムの場合も考え方は同じです。

基本的は、#contentの幅を広げ、#content＋#links幅の合計内で広げればOKです。
但し、#contentの背景画像がついてこないので、画像加工ができるソフトを使って、その分広げなければなりません。（公式テンプレートは、背景画像をつかっているものがほとんどです。）

カレンダーの幅は、ここのテンプレートでは、
#calendar tableのwidth＋#calendarの左右paddingに幅になります。
これを#linksの幅内に合わせるときれいに合います。
TOP【現在の記事】09）カスタマイズ例（レイアウト）―ブログの幅を変更する
タグ：バグ width カラム落ち IE6

ブログカスタマイズの覚書
http://rain119.seesaa.net/