MT5管理画面でjQueryを使って左メニューを折りたたむ

Movable Type 5のテンプレート編集画面において、左ペインのメニュー（以下省略して「メニュー」とします）を表示させたり隠したりするボタンをjQueryを使って作成

MT5では管理画面に3カラムが採用されました。テンプレートの編集画面では、XGAな環境には（テキストエリアの横幅がせまくて）一寸厳しい部分があります。

編集するテキストエリアを全画面表示されるプラグインはありますが、メニューを表示させないだけでも少しは違います。

スクリーンショット

• メニューが開いている状態

  

• メニューが閉じられている状態

  

ということで、FirefoxのアドオンStylishで確認して作成してみたのが以下のカスタムスタイルです。

下記に示すコードは当方が普段使っているモニタの解像度に基づいてるものですので、もし使われる場合は各自で（Stylish使うなど）確認しながら調整をおこなわれたほうがよいでしょう。

#menu{
clear:left !important;
position:absolute;
left:-170px;!important
}

#content{
width: 115%!important;
clear:left!important;
position:relative!important;
left:0!important;
}

そのままStylishにいれて、有効・無効を切り替えて使ってもいいのですが、折角ですので管理画面上に切り替えボタンがあればそのほうが使いやすそうですよね。

テンプレート編集画面の代替テンプレートを使って、このボタンを作成してみたいとおもいます。

注意点です。Movable Typeのヴァージョンが変わった際、構造が変更となった場合はその都度代替テンプレートの変更が必要となります。
＊この記事では、MTOS 5.01 jaを元にカスタマイズしております。

代替テンプレートの作成

1. 先にCSSファイルを用意します。下記のファイルを（任意のファイル名でいいのですが）ここではeditor-toggle.cssとして（mt-static/css/editor）以下に保存します
   

   
   .wide_view_menu{
    clear:left !important;
    position:absolute;
    left:-170px;!important
   }
   
   .wide_view_content{
    width: 115%!important;
    clear:left!important;
    position:relative!important;
    left:0!important;
   }
   
   #toggle_view{
    display: block;
    position:relative;
    padding-left: 4px;
    left: 0px;
    width: 145px;
    text-align : center;
    background-color:#ccc;
    cursor: default;
   }
   
   #toggle_view:hover { background-color: #eee; }

2. mt/tmpl/cms/ のedit_template.tmplファイルを開きます
3. edit_template_tmplを任意のエディタで開き全選択してコピーし、エディタの新規作成に貼り付けします

4. 貼り付けしたほうで、<mt:include name="include/footer.tmpl">という記述の上に以下のようなコードを追記します。

   <mt:setvarblock name="jq_js_include" append="1">
    var toggle_htm= '<a href="#" id="toggle_view"> &#62;&#62; </a>';
    jQuery("#container").prepend(toggle_htm);
   
   // toggle view actions
   
    jQuery("#toggle_view").toggle(
     function () {
       jQuery(this).text(" \u003E\u003E ");
       jQuery("#menu").addClass("wide_view_menu");
       jQuery("#content").addClass("wide_view_content");
     },
     function () {
       jQuery(this).text(" \u003C\u003C ");
       jQuery("#menu").removeClass("wide_view_menu");
       jQuery("#content").removeClass("wide_view_content");
     }
   );
   
   </mt:setvarblock>

5. 先に保存しておいた、editor-toggle.cssがテンプレート内に呼び出されるように、以下のコードも追記しておきます
   

   
   <mt:setvarblock name="html_head" append="1">
   <link rel="stylesheet" type="text/css" href="<mt:var name="static_uri">css/editor/editor-toggle.css" />
   </mt:setvarblock>

6. 以上書き換えが済んだら、edit_template.tmplとファイル名にして、mt/alt-tmpl/CMS/以下にファイルを設置します
7. 設定を終えたら、MT管理画面にログインしますと、先に示しましたスクリーンショットのとおりです

• http://www.markdiary.com/sample/haifu/ShowHideLeftMenu.zip" class="event_file">ShowHideLeftMenu.zip

5.1x 以降は、以下にあります。

• https://bitbucket.org/markdiarycom/showhideleftmenu/downloads