MTAppjQuery のメイン機能の中で意外と影が薄い user.css ですが、Movable Type 6 のサポートブラウザが IE8 からということもあり、CSS だけでも色々とできるようになってきています。
今回は、user.css だけで、記事編集画面とテンプレート編集画面のメインカラムをほぼ画面いっぱいに広げるカスタマイズを紹介します（ちなみに PowerCMS は標準の機能で左メニューを左側に隠せます）。
個人的に、かなり気に入ってます。まずは動画をどうぞ。
※音声ありです。
記事投稿画面とテンプレート編集画面をワイドにするCSS
以下の CSS を user.css にコピペすればOKです。CSS の説明は省略します。
ちなみに、上の方の Fix the header とコメントしてある数行は、ヘッダーを fixed にするコードです。これまたいい感じ。
/* ==================================================
Full Screen Edit Entry
================================================== */
/* Fix the header */
#header {
position: fixed;
width: 100%;
z-index: 99999;
}
#header #brand, #header #menu-bar {
position: relative;
}
#content {
margin-top: 60px;
}
/* Full wide content */
body.edit-template.has-menu-nav #content,
body.edit-entry.has-menu-nav #content {
margin-left: 20px;
overflow: hidden;
}
body.edit-template #menu,
body.edit-entry #menu {
position: fixed;
z-index: 99999;
left: 40px;
}
body.edit-template #menu:hover,
body.edit-entry #menu:hover {
left: 168px;
box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-moz-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
border-radius: 3px;
}
body.edit-template #scope-selector,
body.edit-entry #scope-selector {
left: 22px;
}
body.edit-template.has-related-content #content-body,
body.edit-entry.has-related-content #content-body {
margin-right: 30px;
}
body.edit-template.edit-screen #related-content,
body.edit-entry.edit-screen #related-content {
position: absolute;
right: 45px;
border-bottom: 1px solid #c0c6c9;
}
body.edit-template.edit-screen #related-content .widget,
body.edit-entry.edit-screen #related-content .widget {
margin-bottom: 0;
border-bottom: none;
border-radius: 0;
}
body.edit-template.edit-screen #related-content:hover,
body.edit-entry.edit-screen #related-content:hover {
right: 258px;
box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-moz-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
border-radius: 3px;
background-color: #ffffff;
}
body.edit-template.edit-screen #related-content:hover .widget.last-child,
body.edit-entry.edit-screen #related-content:hover .widget.last-child {
margin-bottom: 0;
}
右サイドバーを２段組（２列）にする CSS
上記 CSS に以下の CSS を追加でコピペすれば OK です。この段組には CSS3 の colums 関係を使っていますが、IE10 からの対応になるので少し注意が必要ですね。その他のモダンブラウザは prefix を付ければOKです。
/* 2 Column */
body.edit-entry.edit-screen #related-content {
right: -200px;
width: 482px;
border: 1px solid #c0c6c9;
-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
-ms-column-count: 2;
-webkit-column-gap: 1px;
-moz-column-gap: 1px;
-o-column-gap: 1px;
-ms-column-gap: 1px;
-webkit-column-rule: 1px solid #c0c6c9;
-moz-column-rule: 1px solid #c0c6c9;
-o-column-rule: 1px solid #c0c6c9;
-ms-column-rule: 1px solid #c0c6c9;
}
body.edit-entry.edit-screen #related-content > div {
display: inline-block;
width: 240px;
border-right: none;
}
body.edit-entry.edit-screen #related-content .widget {
border: none;
}
以上です。これ結構いい感じですよ！
