• Home
  • MTAppjQuery
  • フィールドやメニューの表示・非表示だけの制御だったら user.css がおすすめ

フィールドやメニューの表示・非表示だけの制御だったら user.css がおすすめ

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

表示オプション

しかし、フィールドの表示・非表示の制御だけであれば 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 が付いているので、それに打ち勝つ必要があります。

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

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

/* 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;
}

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

クイックポストを消す

/* 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 でクラス名を付ける方が楽ですしオススメです。

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

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。