サイドバーが落ちるトラブルシューティング

サイドバーが落ちる(下の方に表示されてしまう)というご質問が多いようですので、いくつかサイドバーが落ちるケースを検証したいと思います。


■特にCSSやHTMLなどをカスタマイズしていないのに、ある日突然サイドバーが落ち始めたケース

このケースの場合、記事を投稿した際に入れた画像が、本文のカラムの横幅を越えていることでサイドバーが落ちることが多いようです。

大きい画像や、複数の画像を横に並べる場合は注意が必要です。

また、tableタグを使った場合も同様に、tableの横幅が大きすぎて本文のカラムの横幅を越えると、サイドバーが落ちます。

画像やtableの幅がカラムを越えていない場合でも、marginやpaddingとのあわせ技で、記事の内容が結果的にカラムの横幅を越えて、サイドバーが落ちる場合があります。
微妙に大きい画像やtableは、原因として疑った方がいいかもしれません。


個別記事にもサイドバーが表示されるテンプレートでは、個別記事を一つ一つ見て、どのページでサイドバーが落ちているのか確認してみましょう。サイドバーが落ちているのが単独の個別記事であれば、その個別記事に原因があります。その記事を非公開にするか、原因と思われる箇所を修正して投稿しなおしてみて下さい。


また、サイドバーの横幅が大きくなりすぎた場合も、サイドバーが落ちます。

プラグインの変更をしてからサイドバーが落ち始めた場合は、サイドバーの横幅が大きくなりすぎていないか確認してみてください。


カラムごとに、どこか横幅が大きくなっている場所がないか確認するには、カラムごとに”反転表示”をさせてみるのが有効な場合があります。
文字を選択した状態にすると、文字が反転表示になります。
これを利用すると、一見横幅が大きくなっているように見えないけども、実は大きくなっている、という部分がわかる場合があります。







■CSSやHTMLのカスタマイズをし始めてからサイドバーが落ち始めたケース

バックアップしておいたCSS、HTMLに戻すか、他のテンプレートに変えるのが一番無難です。

サイドバーが落ちない状態に戻してから、サイドバーが落ちないか確認しつつ、一から少しずつカスタマイズしなおすのが良いと思われます。


カスタマイズしてサイドバーが落ちるのは、カラムの各要素が大きくなりすぎてサイドバーが落ちるケースが多いです。

3カラムのテンプレートの場合は、「3カラムデザインのカラムの大きさを変更」を参考にして、各要素がそれを包む要素より横幅が大きくなっていないか確認されてみてください。
2カラムの場合は#wrapperや#leftはありません。また、#rightが#linksとなります。
また、各要素のmarginやpaddingの設定が大きすぎて、サイドバーが落ちる場合もあります。



カスタマイズした後は、いくつかのブラウザでサイドバーが落ちていないかを確認してみてください。
インターネットエクスプローラーでは大丈夫だったけど、Firefoxではサイドバーが落ちている、というケースもありますし、また逆のケースもあります。


また、ブログによっては、全体の大きさが%で決められていたりして、ブラウザのウインドウを小さくするとサイドバーが落ちる場合があります。

これはcontainerの大きさをpx指定に変えるとウィンドウを小さくしてもサイドバーが落ちなくなりますが、ウィンドウが大きくなったときもブログの大きさが同じ、ということになります。
それがいいかどうか、この辺は好みの問題かもしれません。
2007年07月09日(月) 19:04:35 Modified by everydaydesign