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
に上書きアップロードするだけです。
こんなボタンです。