Movable Typeの投稿画面は「表示オプション」で項目の表示・非表示を切り替えたり、ドラッグ・ドロップで順番を変えられるようになっていますが、CMSとしてクライアントに納品する場合、この機能は混乱のもとになります。

「MTAppjQuery」プラグインでこれらの機能を停止し、かつ見やすい体裁に変更する方法を紹介します。 Movable Typeの5.1・5.2で動作を確認しています。

MTAppjQueryを入手する

MTAppjQueryプラグインは、Movable Typeの管理画面をjQueryやCSSでカスタマイズしやすくするプラグインです。 GitHubで最新バージョンが公開されています。

プラグインの下記ファイルを編集すると、管理画面のCSSを上書きできます。 mt-static/plugins/MTAppjQuery/css/user.css

また、下記ファイルにjQueryのソースを書くと、管理画面の表示直後に実行されます。 mt-static/plugins/MTAppjQuery/js/user.js

導入方法は通常のプラグインの追加と同じですが、アップロードの際に「mt-static/plugins/」以下にある「_MTAppjQuery」のアンダーバーを取らなければ動作しない点に注意が必要です。

入力項目の並び替えを禁止する

入力項目を操作させないようにするには、記事・ページ編集画面の右上にある「表示オプション」を非表示にし、かつ並び替えスクリプトを停止する必要があります。

user.cssとuser.jsに、以下のコードを追加します。CSSの方ははじめから記入されているので、前後のコメントアウトを解除してください。

user.cssに追加

/* ブログ記事編集画面の[表示オプション]を非表示にする */
#display-options {
    display: none;
}

user.jsに追加

//並び替えを禁止する
if(mtappVars.screen_id == 'edit-entry'){
  $('div.sort-enabled').removeClass('sort-enabled');
}
if(mtappVars.screen_id == 'edit-page'){
  $('div.sort-enabled').removeClass('sort-enabled');
}

項目の体裁を整える



上記のカスタマイズをすると、ドラッグする枠がなくなるため、投稿画面の各入力項目が見づらくなります。

これは、CSSの上書きで調整できます。user.cssに以下のコードを追加してください。

/* カスタムフィールドの並び替えを禁止した場合のスタイル */
#main-content #sortable .field {
  margin-bottom: 45px;
}

  #main-content #sortable .field .field-header {
    margin-bottom: 20px;
    font-size: 120%;
    padding-top: 5px;
    border-top: 3px solid #BBB;
  }

ヒントを読みやすくする



上記のCSSを追加すると、各項目に見出しが付き、ゆとりが出ますが、まだ気になる個所があります。 カスタムフィールドを追加していた場合、入力項目の下に「ヒント」が出ますが、Movable Typeのデフォルトのスタイルがグレーの斜体になっているため、日本語環境では非常に読みにくくなっています。

user.cssに以下のコードを追加してください。

/* ヒントを見やすくする */
#main-content .sortable .hint {
  color: #008822;
  background-color: #E6F3DD;
  width: auto;
  padding: 5px;
  font-style: normal;
}


修正後は、このような状態になります。 ヒントが緑の網掛けで強調され、見やすくなりました。

補足

mt-static以下のディレクトリ名にアンダーバーが付いているのは、アップグレード時にCSS・JSファイルを上書きしてしまう事故が多いため、それを防ぐ対策とのことです。

こういった事故は、プラグインを利用する側が注意しましょう^^; 以下の対策を取ると、意識しなくてもミスを防ぐことができます。

  • ウェブサイトのインデックス・テンプレートとして編集できるようにする
  • 納品直前にuser.cssとuser.jsの複製を作ってバックアップする