« RSSバー | メイン | ティータイムはPalmでDOC »
May 08, 2005
Movable Typeのテンプレート編集
とは言っても、blog表示用のテンプレートではなく、新規エントリー作成画面・既存エントリー編集画面のテンプレートです(^_^;)。
エントリー編集画面に標準で表示されるタグ入力用のボタンは「太字」・「イタリック」・「アンダーライン」・「ハイパーリンク」の４つだけで、Fontのサイズや色を設定するのにはテキストエリア内に直接タグを入力してたのですがそれが結構めんどくさくって(笑)。
ちゅーことで、今回はフォントサイズ変更用とカラー変更用のボタンを作ってみました。
以下、実際に行った作業です。
１．エントリー画面に表示されるボタンの作成
・既存のボタンをコピーして
・
・
・
・
の５つのボタンを作成。
２．mtフォルダにある「mt.js」ファイルを開き、JavaScriptの修正
・ボタンクリック時に呼び出される関数に、追加した５つの機能をCallする部分を追加
・フォントサイズ変更用の関数を作成
・フォントカラー変更用の関数を作成
３．mt\tmpl\cmsフォルダの「edit_entry.tmpl」と「bm_entry.tmpl」（新規作成用・編集用のエントリー画面のテンプレート）に、５つのボタンを表示させる処理を追加
４．作成した５つのボタンと修正したjsファイル・tmplファイルをそれぞれの場所にアップロード
（長くなるので、実際のソースは追記に記載します。）
これでエントリーの作成・編集がかなり楽になりました(^-^)v。わーい。
◆mt.jsに追加した内容
●「function mtShortCuts」にボタンがクリックされたときに実行させる処理を判別する処理を追加
if (event.keyCode == 6) formatStr2('font'); ← フォントボタンを表示
if (event.keyCode == 16) Changefontcolor('p'); ← フォントカラーピンクボタンを表示
if (event.keyCode == 7) Changefontcolor('g'); ← フォントカラーグリーンボタンを表示
if (event.keyCode == 4) Changefontcolor('b'); ← フォントカラーブルーボタンを表示
if (event.keyCode == 18) Changefontcolor('r'); ← フォントカラーレッドボタンを表示
これで、クリックされたボタンに応じた関数がCallされます。
●フォントサイズ変更用の関数「formatStr2」を作成
function formatStr2 (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
setSelection(e, '<' + v + ' size="3">' + str + '</' + v + '>');
return false;
}
フォントサイズを変更したい文字列を選択後、「Ｆ」ボタンをクリックすると、
<font size="3">文字列</font>とタグが挿入されます。
●フォントカラー変更用の関数「Changefontcolor」を作成
function Changefontcolor (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
if (v == 'pink') setSelection(e, ' color="#ff0099"');
if (v == 'green') setSelection(e, ' color="#006600"');
if (v == 'blue') setSelection(e, ' color="#0000FF"');
if (v == 'red') setSelection(e, ' color="#DC143C"');
return false;
}
FONTタグ自体は、「formatStr2」で挿入しておきます。
サイズ変更が不要な場合は「size="3"」部分を選択後、サイズ変更とカラー変更の両方を指定したい場合は、半角スペースを「size="3"」の後に挿入し、その半角スペースを選択後カラーボタンをクリックします。選択部分が「 color="指定した色"」に置き換わります。
本当はカーソル部分に「color="指定した色"」を挿入させたかったのですが、カーソル位置を検出するロジックを書くのがめんどくさかったので(^_^;)、既存の置換するロジックを流用しました。
◆edit_entry.tmplとbm_entry.tmplに追加した内容
追加場所：ボタンを表示させてるロジックのところ
●フォントサイズ変更ボタンを表示させるロジックを追加
write('<a title="<MT_TRANS phrase="Font">" href="#" onclick="return formatStr2(document.entry_form.text, ¥'font¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/font-button.gif" alt="<MT_TRANS phrase="Font">" width="24" height="18" border="0" /></a>');
●フォントカラー変更ボタンを表示させるロジックを追加
write('<a title="<MT_TRANS phrase="Font Color Pink">" href="#" onclick="return Changefontcolor(document.entry_form.text, \'pink\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/button-pink.gif" alt="<MT_TRANS phrase="Font Color Pink">" width="26" height="18" border="0" /></a>');
と、例は文字色をピンクにするボタンを表示させるロジック。これをコピペして「Pink」の部分をそれぞれの色に変更し、あと３色分追加します。
こんな感じでえいやっ！で作っちゃいましたが、まあちゃんと動いてるので良しとしよーっと(笑)。
投稿者 naniwaol : May 8, 2005 02:13 AM
Trackback Pings
このエントリーのトラックバックURL: