Movable Type の記事投稿のエディタ部分を全画面表示するカスタマイズ

Movable Type の記事投稿のエディタ部分を全画面表示にできるように管理画面をカスタマイズしてみました。このブログ記事も全画面表示で投稿していますが、我ながらかなり便利です。

fullscreen02.gif

エディタ部分だけでは、使い勝手が悪いので、その他のフィールドや、保存ボタンなども一緒に表示されるようにしてあります。

インストール

次のファイルをダウンロードして解凍してください。

解凍して出来たフォルダは次のようになっています。

  • fullScreen_edit_entry
    • entry_edit.tmpl
    • include
      • jquery.tmpl
      • fullscreen_edit_entry_js.tmpl
      • fullscreen_edit_entry_css.tmpl

この fullScreen_edit_entry フォルダの中身をすべて Movable Type のアプリケーションディレクトリ内の alt-tmpl ディレクトリにアップロードします。

  • mt
    • alt-tmpl
      • entry_edit.tmpl
      • include
        • jquery.tmpl
        • fullscreen_edit_entry_js.tmpl
        • fullscreen_edit_entry_css.tmpl

もし、entry_edit.tmpl をすでにカスタマイズして alt-tmpl ディレクトリに入れている場合は、include フォルダだけアップロードし、entry_edit.tmpl の 983行目付近に次の 3行を挿入すればOKです。また、上に置いてある entry_edit.tmpl はMovable type 4.23 用なので、他のバージョンをお使いの場合も同様にカスタマイズした方が良いです。

<mt:include name="include/jquery.tmpl" id="header_include"> <!-- 挿入 -->
<mt:include name="include/fullscreen_edit_entry_js.tmpl" id="header_include"> <!-- 挿入 -->
<mt:include name="include/fullscreen_edit_entry_css.tmpl" id="header_include"> <!-- 挿入 -->
<mt:include name="include/header.tmpl" id="header_include"> <!-- 983行目 -->

使い方

アップロードがうまくいくと、エディタの左上のタブに「全画面表示」が追加されます。

fullscreen03.jpg

これをクリックすると全画面表示になります。CSS を切り替えているだけなので、他の機能には影響ないはずですし、切り替わりもサクサクいって快適です。

【通常のエディタ】

fullscreen01.gif

【全画面表示のエディタ】

fullscreen02.gif

【ファイルのアップロードも大丈夫】

fullscreen04.gif

オススメ

テンプレート編集画面のエディタ部分を全画面表示するには、次のプラグインが便利です。

管理画面のカスタマイズについては『Movable Type プロフェッショナル・スタイル MT4.1対応』の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...