ビジュアルエディタを公開ページに合せる(Twenty Eleven)

2013/10/14

 Twenty Elevenの幅を800pxにしたら、ビジュアルエディタの表示と実際の公開ページの表示が違うので、それを近い形にでも合せたい。

1.表示幅を800pxに変更しただけでは、

 ビジュアルエディタを開いて、<hr>タグを使って線の長さを測ると、584pxになっている。やっぱり、fanctions.phpにあった、cotentのwidthの数値が関係する?

 でも、まずは、editor-style.cssだろうってことで、みて見ると

html .mceContentBody {
    max-width: 584px;
}
* {
    color: inherit;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: inherit;
    font-weight: inherit;
    line-height: 1.625;
}

 最初に出てくる数値が584。
editor-style.cssをそのまま子テーマにコピーして、数値を550に変更

html .mceContentBody {
    max-width: 550px;   /*584px*/
}

これで、もう一度、ビジュアルエディタでテストすると、、、

幅が、550pxになっている。

と、ここだけでした。もっと、複雑かと構えてこの記録をしていました。