MT 2.661 の管理画面をMT3.0 風に変更

2005/06/17

MovableType

MT3.0風管理画面 for MT 2.661 - Software Linkage
http://linkage.xrea.jp/article/2004/06/mtclassic.php

別の捜し物をしていてステキなものを見つけたので、入れ替えてみました。基本的には、説明通りの手順で入れ替えが出来たのですが、何箇所か書き換えたので、そのあたりのメモも兼ねて。

入れ替え直後の微調整

手順通りに入れ替えた直後の様子(WindowsXP + IE6)。

なんだかものすごく重なってしまっています。とりあえずこれをなんとかします。スタイルシートでなんとかするのがたぶん一番スマートなのでしょうけど、とりあえず的に"tmpl/cms/edit_entry.tmpl" をいじってなんとかしてみます。なのでどこかに問題あるかも。かなり強引。
415行目あたり


<dl>
<dt><MT_TRANS phrase="Title"></dt>
<dd><input class="text-short" name="title" value="<TMPL_VAR NAME=TITLE>" /></dd>


<!-- setteing title-->
<dl class="entry-header">

↓


<dl class="entry-header">
<dt><MT_TRANS phrase="Title"></dt>
<dd><input class="text-short" name="title" value="<TMPL_VAR NAME=TITLE>" /></dd>


<!-- setteing title-->

458行目あたり


<br style="clear:both;" />

↓


<br style="clear:both;" />

<br style="clear:both;" />

<br style="clear:both;" />

<br style="clear:both;" />

<br style="clear:both;" />

とりあえずこれで。Firefox だとムダに空白が空いてしまいますが、仕方ない。

textarea のフォント変更、そして横幅を広げる

textarea のフォントを変えます。styles.css をちょこっとだけいじって、UTF-8 で保存し直します。
1行目


@charset "Shift_JIS";

↓


@charset "UTF-8";

130行目あたり


textarea {

color:#333;

background-color:#FFF;

}

↓


textarea {

color:#333;

background-color:#FFF;

font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Osaka", sans-serif;

}

で、textarea の横幅が大幅に詰まってしまうので、また"tmpl/cms/edit_entry.tmpl" をいじって横幅を広げます。この辺の適切な幅はお好みで。長くなるので変更後のコードだけ貼り付け。
524行目あたり


<dd>

<textarea cols="115" name="text" rows="30" wrap="virtual"><TMPL_VAR NAME=TEXT></textarea>

</dd>



<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>

<dt><MT_TRANS phrase="Extended Entry"><a href="#" onclick="openManual('item_main_entry_text')"><span class="hatena">?</span></a></dt>

<dd><textarea cols="115" name="text_more" rows="15" wrap="virtual"><TMPL_VAR NAME=TEXT_MORE></textarea></dd>

</TMPL_IF>



<TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS>

<dt><MT_TRANS phrase="Keywords"><a href="#" onclick="openManual('item_keywords')"><span class="hatena">?</span></a></dt>

<dd><textarea cols="115" name="keywords" rows="1" wrap="virtual"><TMPL_VAR NAME=KEYWORDS></textarea></dd>

</TMPL_IF>



<TMPL_IF NAME=DISP_PREFS_SHOW_EXCERPT>

<dt><MT_TRANS phrase="Excerpt"><a href="#" onclick="openManual('item_excerpt')"><span class="hatena">?</span></a></dt>

<dd><textarea cols="115" name="excerpt" rows="5" wrap="virtual"><TMPL_VAR NAME=EXCERPT></textarea></dd>

</TMPL_IF>

ポイントは、以下の3つ。

横幅を115 に拡大
本文を30行に、追記を15行に
追記とキーワードの位置を入れ替え

ブックマークレットから呼び出した場合の編集画面のテンプレートは"tmpl/cms/bm_entry.tmpl" です、上記と同様に修正しておきます。

「作成日時」を更新するボタンを追加

「「作成日時」を更新するボタン追加」がベンリなので、同じく追加します。
大体は同じ手順でOK です。これもまた"tmpl/cms/edit_entry.tmpl" の329行目あたり、</script> の直前の行あたりに挿入します。


<!-- 更新時刻を現在の時刻にするボタン -->
function nowDate() {
dat=new Date();
yea=dat.getFullYear();
mon=dat.getMonth() + 1;
day=dat.getDate();
hou=dat.getHours();
min=dat.getMinutes();
sec=dat.getSeconds();
if(mon<10){mon="0"+mon;}
if(day<10){day="0"+day;}
if(hou<10){hou="0"+hou;}
if(min<10){min="0"+min;}
if(sec<10){sec="0"+sec;}
document.entry_form.created_on_manual.value=yea + "-" + mon + "-" + day + " " + hou + ":" + min + ":" + sec;
}

次、590行目あたり


<input type="hidden" name="created_on_old" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED>" />
<input class="text-short" name="created_on_manual" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED>" />

↓


<input type="hidden" name="created_on_old" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED>" />
<input onClick="nowDate()" type="button" value="Now" />
<input class="text-short" name="created_on_manual" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED>" />

現在時刻を本文に挿入するボタン

基本的には先ほどと同じ。なので説明省略(かなり疲れてきた)。


<!-- 現在時刻を挿入するボタン -->
function insertTime () {
dat=new Date();
yea=dat.getFullYear();
mon=dat.getMonth() + 1;
day=dat.getDate();
hou=dat.getHours();
min=dat.getMinutes();
if(mon<10){mon="0"+mon;}
if(day<10){day="0"+day;}
if(hou<10){hou="0"+hou;}
if(min<10){min="0"+min;}
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
document.selection.createRange().text = "(" + yea + "/" + mon + "/" + day + " " + hou + ":" + min + " " + str + ")";
}

516行目あたり


document.write('<a href="javascript:insertLink()" accesskey="l">Link</a>');

の次の行に以下を追加。


document.write('<a href="javascript:insertTime()" accesskey="t">Time</a>');

で、こんな感じに。IE 用の編集メニューはあんまり数がないけど、オリジナルのテンプレートだと画像を用意してTABLE の中身を調整して...、と、とっても大変だったのが、簡単に増やせそうなので、良いかも。
"Now" ボタンはもうちょっとちっちゃくしたかったけど、ま、これはこれで。

このようなステキなテンプレートを公開していただいて、ありがとうございます!!