●おかしな表示の原因
ある時から突然、表示が2カラムから1カラムのようにすべてが縦に表示されてしまう現象がありました。 エントリーの部分が左カラムの下に行ってしまいかなり不恰好に見えます。
この原因はいろいろ考えられるようですが、今回の場合は非常に簡単でした。が、、、発見するには店長のお力を借りましたとさ！！
結果から話すと、スタイルシートの
/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
width: 750px; ←この部分に対し！！！
margin-right: auto;
margin-left: auto;
padding: 0 0 0 0;
border-bottom: 1px solid #36414d;
border-left: 1px solid #36414d;
border-right: 1px solid #36414d;
text-align: left;
background-color: #ffffff;
}
もとは、「width: 665px;」の幅を「イの葉」に合わせて「width: 750px;」に変更しました。
ここに対し、２カラム表示なので、
.layout-two-column-left #links-left-box {
float: left;
width: 185px; ←ここはデフォルトのまま。
}
の左側のボックスの幅、「width: 185px;」があります。
残りの幅を右側のボックスにしようと
/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
float: left;
width: 565px; ←この部分を変更！！
！ ここが原因。
margin: 0 0 10px 0;
border-bottom: 1px solid #36414d;
border-left: 1px solid #36414d;
}
もとは、「width: 478px;」の幅を、単純計算で「750-185=565」としました。
ところがこれでは、駄目で2px少ない「width: 563;」
だと上手く動きました。「750-185-2=563;」
なぜ2pxなのかは詰めていませんが、おそらくボーダーラインが1pxなので左右で2pxは消費しているのかなぁ？！
それとも、マージンやパディングが関係しているのかもしれません。
いずれにしても、表示が狂う原因として
・ width
・ margin
・ padding
などが関係していることが多いです。