BizVektor 1.7にアップデートしたらレイアウトが崩れたとき

BizVektorのバージョン1.7ではCSS関連で大きな変更がありました。子テーマを使ってカスタマイズしていた場合、旧バージョンからアップデートするとレイアウトが崩れる場合があります。

原因は、テンプレートファイル（index.php、single.php、page.phpなど）の「id="content"」の部分です。

<div id="content">

BizVektor1.7以降は「class="content"」が追加されています。

<div id="content" class="content">

これまで「id="content"」（#content）に対して指定されていたスタイルが「class="content"」に対する指定に変更されている部分があります。

CSSの差分をチェックできる方はplain.cssなどを比較してみてください。以下、BizVektor 1.6.3とBizVektor 1.7.3のplain.cssから同じ部分を抜粋してみます。

#content { margin-bottom: 36px; text-align:left; display:block; overflow:visible; }
#content hr	{ clear:both; display:block; margin:1em 0; }
#content .post	{ padding-bottom:25px; }
#content .alert	{ color:#f00; }
#content .caption	{ font-size:11px; line-height:110%; }
#content .center{ text-align:center; }
#content .right	{ text-align:right; }
#content .nowrap	{ white-space:nowrap; }
#content .sectionBox	{ margin-bottom:30px; display:block; overflow:hidden; }
#content .entry-meta	{ margin-bottom:15px; font-size:11px; color:#666; }
#content .leadTxt { color:#333; }

BizVektor 1.7.3では次のようにセレクタが「#content」が「.content」に変更されています。セレクタがidからclassに変わったということです。

.content { margin-bottom: 36px; text-align:left; display:block; overflow:visible; }
.content hr	{ clear:both; display:block; margin:1em 0; }
.content .post	{ padding-bottom:25px; }
.content .alert	{ color:#f00; }
.content .caption	{ font-size:11px; line-height:110%; }
.content .center{ text-align:center; }
.content .right	{ text-align:right; }
.content .nowrap	{ white-space:nowrap; }
.content .sectionBox	{ margin-bottom:30px; display:block; overflow:hidden; }
.content .entry-meta	{ margin-bottom:15px; font-size:11px; color:#666; }
.content .leadTxt { color:#333; }

これを見てピンと来た方は、さっそく修正作業に取りかかってください。

よくわからない方のため、アップデート後にレイアウトが崩れる例を以下に紹介します。

たとえば、旧バージョン（1.7以前）のBizVektorをカスタマイズするため、子テーマフォルダ（例：biz-vektor-child）にindex.phpやsingle.phpなどのテンプレートをコピーしているとします。