サイドバーがずれてしまう場合、ほとんどが画像の表示に関する問題です。代表的なものを紹介します。
トップページは基本的に
・#content:日付け、タイトル、本文など
・#links:カレンダー、プロフィール、Blogtimesなどのサイドバー
で左右に分かれています。
サイドバーが落ちる理由は、
・Blogtimesの横幅が大きい
・本文に大きな写真を並べている
のどちらかが主な原因です。
Blogtimesの横幅は、
管理画面の「プラグインの設定」→「Blogtimesの設定」で、
「横幅」と「padding(pixel)」を調節してみて下さい。
変更後は「Blogの再構築」をお忘れなく。
実際のスタイルシートをこの「custom design」を例にして説明すると、
#content{
width:460px;
float:left;
}
#links{
width:194px;
float:right;
margin:20px 0 50px 50px;
text-align:center;
}
となっています。これは、
左側の本文の(#content)幅は460px、右側のサイドバーの幅は194px
ということを表します。
つまり、その大きさを超える何かがその中にあると、
サイドバーが落ちてしまうという訳です。
「spring_note」の場合、
#links{
width:148px;
}
となっていて、
右側のサイドバーは148pxを超えるとサイドバーが落ちてしまう訳ですが、
プロフィール画像については更に、
.side{
padding:5px;
}
となっているため、横幅138px以下に収めて下さい。
・#content:日付け、タイトル、本文など
・#links:カレンダー、プロフィール、Blogtimesなどのサイドバー
で左右に分かれています。
サイドバーが落ちる理由は、
・Blogtimesの横幅が大きい
・本文に大きな写真を並べている
のどちらかが主な原因です。
Blogtimesの横幅は、
管理画面の「プラグインの設定」→「Blogtimesの設定」で、
「横幅」と「padding(pixel)」を調節してみて下さい。
変更後は「Blogの再構築」をお忘れなく。
実際のスタイルシートをこの「custom design」を例にして説明すると、
#content{
width:460px;
float:left;
}
#links{
width:194px;
float:right;
margin:20px 0 50px 50px;
text-align:center;
}
となっています。これは、
左側の本文の(#content)幅は460px、右側のサイドバーの幅は194px
ということを表します。
つまり、その大きさを超える何かがその中にあると、
サイドバーが落ちてしまうという訳です。
「spring_note」の場合、
#links{
width:148px;
}
となっていて、
右側のサイドバーは148pxを超えるとサイドバーが落ちてしまう訳ですが、
プロフィール画像については更に、
.side{
padding:5px;
}
となっているため、横幅138px以下に収めて下さい。
