Movable Type の記事投稿画面において、MTAppjQuery の MTAppCustomize というメソッドを使えば、「表示オプション」に関係なく簡単にフィールドの表示・非表示を制御することができます。

しかし、フィールドの表示・非表示の制御だけであれば CSS で行った方がパフォーマンス的に良いかも知れません。メニューも然り。

そこで今回は、CSS でフィールドやメニューの表示を制御する方法をご紹介します。

なお、下記で紹介するコードは user.css に書いていくと良いでしょう。

また、フィールドの表示制御は記事の編集画面だけに適用するようにしています。記事編集画面以外にも使う場合は、先頭の #edit-entry を削除するか、適宜変更してください。メニューについては全ページ共通です。

フィールドの表示・非表示

表示オプションを消す

/* Hide the display options */
#edit-entry #display-options {
 display: none;
}

すべてのフィールドを表示する

/* Show the every fields */
#edit-entry #sortable .field {
 display: block !important;
}

おしりに !important を付けるのがポイントです。デフォルトの表示制御は .hidden クラスで行っていますが、hidden クラスには !important が付いているので、それに打ち勝つ必要があります。

また、これ以降は上記２つのコードに追記していくようにすると良いでしょう。そうすれば、表示オプションのチェック状態に関わらず制御することができます。

キーワード欄とタグ欄を消す

/*　Hide the keywords and the tags */
#edit-entry #sortable #keywords-field,
#edit-entry #sortable #tags-field {
 display: none !important;
}

細かいことを言えば、#sortable は不要ですが、メンテナンスを考えるとあった方が良いかもしれません。

本文欄を消す

#edit-entry #sortable #text-field {
 display: none !important;
}

または、

#edit-entry #sortable #text-field {
 position: absolute;
 top: 0;
 left: 0;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

以前は１番目の書き方だと何かしらエラーがでていたりしましたので、２番目のような書き方をしていました。今は、１番目の書き方でもエラーは出ていないようです。

クイックポストを消す

/* Hide the quickpost field */
#edit-entry #quickpost {
 display: none !important;
}

ここでは #sortable は入れてはいけません。クイックポストは #sortable の外にあります。

コメントウィジェットと記事アイテムウィジェットを消す

#edit-entry #related-content #feedback-field,
#edit-entry #related-content #assets-field {
 display: none !important;
}

ウィジェットは #sortable ではなく #related-content になります。

メニューの非表示

記事メニューだけ表示

/* Hide menus except the entry menu */
#menu .menu-nav > li {
 display: none;
}
#menu .menu-nav #menu-entry {
 display: block;
}

これで記事メニューだけになりますが、これだとメニューの下の線がない状態になります。これを解消するためには user.js に以下のようなコードを書き、first-child と last-child クラスを付けてあげましょう。

$('#menu-entry').addClass('field-child last-child');

このようにメニューの表示をいじった場合は、一番上のものには .first-child を、一番下のものには .last-child を付けましょう。これは CSS だけでスタイルを整えるよりも jQuery でクラス名を付ける方が楽ですしオススメです。

次回は、ユーザーやブログごとに表示の制御をしたりする方法を紹介しようと思います。

以上です。