しかし、ある程度コンテンツが増え、サイドバーなどに画像などを配置していくと、まれに、サイドバーがメインの下に回りこんでしまうことがあると思います。
特に両サイドバーをつかっていると良く起きるのではないでしょうか。
これは、サイドの幅以上のコンテンツを貼り付けたときなどに起きます。
ブラウザを大きくすれば、表示されるかと思いますが、初めて訪れたユーザは、サイドバーに情報があるにもかかわらず、下に回りこんでいることに気づかないかもしれません。
それならば、同様にブラウザを大きくしないと表示されないとしても、サイドスクロールバーが表示され、下に回りこまない方が、ユーザーに親切かと思います。
では、このサイドの幅はどのように指定されているのでしょうか。
1.ブログのメニュー(ページ上部)から「デザイン」を選択(クリック)
2.サブメニューから、「スタイルシート」を選択
3.現在使用しているタイトルを選択
4.「スタイルシート」欄から「#content」を見つける
この部分がメイン部分のデザイン指定になります。
width:55%;
となっていると思います。
(両サイドバーの場合。片サイドの場合は%では無いと思います。)
これは、ブラウザの画面に対する55%をメインの幅とするという指定です。
なので、画面のサイズを変えるとそれに応じて、メインの幅も変わります。
同様に、サイドバーのサイズのデザインである
#links-left
#links
という部分を見ると、
width:20%;
となっています。
画面全体のそれぞれ20%をサイドバーの幅としてます。
もし、これを固定の幅にしたい場合、
width:200px;
といった表記に変更します。
これにより画面のサイズに関わらず、幅は固定されます。
その代わり、画面を小さくしすぎると、横スライドバーが表示されてしまいます。
指定終了後・・・
5.「スタイルシートを変更する」をクリック
6.右上の「再構築」をクリック
7.「再構築を実行する」をクリック
キッチリデザインしたい方は、幅を固定すると良いと思います。