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

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

赤ボタン

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

引用ボタン

引用(Quote)ボタンを変更します。


3.2-ja-2
まず、すべて、

/mt/tmpl/cms/edit_entry.tmpl

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

BolbとItalicに関しては、

L346~
if (canFormat) {
with (document) {
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.entry_form.text, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>');

L369~
if (canFormat) {
with (document) {
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text_more, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.entry_form.text_more, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>');

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


赤文字にするには、

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

赤ボタン

画像を
/mt/mt-static/images
にアップロードします。
従来は
/mt/images/
だったので注意。

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

L354に
write('<a title="<MT_TRANS phrase="Red">" href="#" onclick="return formatStr(document.entry_form.text, \'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-red.gif" alt="<MT_TRANS phrase="Red">" width="22" height="16" /></a>');

L379に(上記挿入後)
write('<a title="<MT_TRANS phrase="Red">" href="#" onclick="return formatStr(document.entry_form.text_more, \'span class=red\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-red.gif" alt="<MT_TRANS phrase="Red">" width="22" height="16" /></a>');

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

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

.red {
color: #FF0000;
}

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

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

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

.content .red {
color: #FF0000;
}

ですかね。
ただ、Main IndexとIndividual Archiveとクラスの構成が違う(自分だけ?)ので、やめました。
こんな風になります。

赤い文字

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

/mt/mt-static/mt_ja.js
147行付近に

function formatStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (!str) return;
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の処理をする場合は、スペースで区切ってやればいいのではと。

こんな風になります。

赤い文字

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

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

font-weight:bold;

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

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

/mt/mt-static/images/html-quote.gif

に上書きアップロードするだけです。

引用ボタン

こんなボタンです。

コメントは無効になっていますので、何かありましたらフォームかTwitter(X)で。

About

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

ひとつ前の投稿は「RCN for Win mAgicTV5版」です。

次の投稿は「ニコンとコニカミノルタがフィルムカメラから撤退」です。

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

Powered by
Movable Type 3.35