Movable Type の記事編集画面で MTAppjQuery を使ってカテゴリ選択欄をメインカラムに移動した時に適用しておくといい CSS

Movable Type の記事編集画面でカテゴリ選択欄をメインカラムに移動した時に適用しておくといい CSS をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

Movable Type の記事編集画面において、MTAppjQuery を使ってカテゴリ選択欄を右サイドバーから中央のメインカラムに移動するというのは良くやるカスタマイズのうちの一つです。

あ、余談ですが、MTAppFieldSort というメソッドは、普通に下記のようにしてカテゴリ欄もメインカラムに移動した上で順番を揃えることができます。

$.MTAppFieldSort({
 sort: 'title,category,tags,text,excerpt,keywords'
});

話を戻すと、カテゴリ欄をメインカラムに移動すると、そのままでは下図のように幅を持て余して少しもったいない感じになります。

CSS適用前

この時、MTAppjQuery の user.css に下記のスタイルを追加しておくと、下図のように横幅が広がってしっくりきます。

#main-content #category-selector {
 max-width: none;
}
#main-content #category-selector #category-selector-list div.list-item div {
 width: inherit !important;
}

CSS適用後

このスタイル、MTAppjQuery 本体の MTAppjQuery.css に入れておこうかな。

以上です。みなさま、夏バテにご注意ください!

Published 2016-08-11
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧