MovableTypeの編集画面のボタンを改造する 3.33-ja版

MovableTypeの編集画面のボタンや動作を改造して、自分好みに調整します。

改造項目

1. MovableTypeのBold(太字) Italic(斜体)は初期設定では、<strong><em>を使用するのですが、個人的に好みではないので、<b><i>を使用するようにします。

2. 文字色を赤くするボタンを追加します。

赤ボタン

3. 引用(Quote)ボタンをDreamweaver風に変更します。

引用ボタン

元はMovableTypeの編集画面のボタンを改造する 3.2-ja-2版です。

3.33-ja


まず、すべて、

/mt/tmpl/cms/edit_entry.tmpl

を編集することで対応します。

Bold と Italic に関しては、

L536~、
if (canFormat) {
with (document) {
write('<img title="<MT_TRANS phrase="Bold">" onclick="return formatStr(document.entry_form.text, \'strong\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/bold.gif" alt="<MT_TRANS phrase="Bold">" width="26" height="19" />');
write('<img title="<MT_TRANS phrase="Italic">" onclick="return formatStr(document.entry_form.text, \'em\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/italic.gif" alt="<MT_TRANS phrase="Italic">" width="26" height="19" />');

L572~、
if (canFormat) {
with (document) {
write('<img title="<MT_TRANS phrase="Bold">" onclick="return formatStr(document.entry_form.text_more, \'strong\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/bold.gif" alt="<MT_TRANS phrase="Bold">" width="26" height="19" />');
write('<img title="<MT_TRANS phrase="Italic">" onclick="return formatStr(document.entry_form.text_more, \'em\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/italic.gif" alt="<MT_TRANS phrase="Italic">" width="26" height="19" />');

の、 strong と em を b と i に変更するだけ。


赤文字にするボタンを設置するには、

まずボタンの画像を用意します。

赤ボタン

画像を
/mt/mt-static/images/formatting-icons/
にアップロードします。
従来は
/mt/mt-static/images/ や /mt/images/
でしたが変更になっていますので注意。

つぎに、
/mt/tmpl/cms/edit_entry.tmpl
の先ほどいじったブロックに追加します。

L537に
write('<img title="<MT_TRANS phrase="Red">" onclick="return formatStr(document.entry_form.text, \'span class=red\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/red.gif" alt="<MT_TRANS phrase="Red">" width="26" height="19" />');

L576に(上記挿入後)
write('<img title="<MT_TRANS phrase="Red">" onclick="return formatStr(document.entry_form.text_more, \'span class=red\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/red.gif" alt="<MT_TRANS phrase="Red">" width="26" height="19" />');

と、Bold(太字)ボタンなどを参考にして、これと類似の行を作って挿入してやります。

で、さいごにスタイルシートに

.red {
color: #FF0000;
}

こんな感じで記述します。他の色を作成したい場合はここを変えればいいんじゃないかと思います。
色以外にも、特定のスタイルシートを適用する方法としても、使い道はいろいろあるかも知れません。

本文の部分だけに適用したい場合は、

.contentのクラスの下に定義して、

.content .red {
color: #FF0000;
}

とすればいいんでしょうか?
ただ、Main IndexとIndividual Archiveとクラスの構成が違う(自分だけ?)ので、やめました。

できあがるとこんな風になります。
(スタイルシートも再構築してください)

赤い文字

これでまあ、一応動作はするのですが、SPANタグの記述の仕方が気に入らないのでもう一工夫。

/mt/mt-static/mt.js
(これまでは mt_ja.js でした)

276行付近に

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (str) setSelection(e, '<' + v + '>' + str + '</' + v + '>');
return false;
}

というのがありますので、これを改良します。

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (!str) return;
var V = v.split(" ");
setSelection(e, '<' + v + '>' + str + '</' + V[0] + '>');
return false;
}

おそらくeが選択範囲の文字列、vがボタンをセットしたときに入力される文字列ですので、SPANの処理をする場合は、スペースで区切ってやればいいのではと、このような処理としました。

そうすると、こんな風になります。

赤い文字

(ソース見ないとわからないでしょう)

これを応用すれば属性付きのタグも美しく打ち込めると思います。

.red {
color: #FF0000;
font-weight:bold;
}

現在は太字も同時に適用しています。

引用(Quote)ボタンの変更については、単に個人的に [ ”]というボタンだとピンとこないだけで、Dreamweaver風のボタン画像を作って、

/mt/mt-static/images/formatting-icons/quote.gif

に上書きアップロードするだけです。
前と場所が変わり、サイズが変わりました。
22×16だったのが、26×19になってます。

引用ボタン

こんなボタンです。

About

2006年12月11日 13:05に投稿されたエントリーのページです。

ひとつ前の投稿は「コメントスパム対策3.33-ja」です。

次の投稿は「今欲しいものとか。」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type 3.35