心にうつりゆく由無しごと

画像の表示に「Highslide JS」を使うようにしたため、aタグにクラスを指定したり、onclickを指定したり、キャプションをつけるときにはdivタグを使ったりと、タグの記述が面倒になってきたので、タグ挿入ボタンを追加することにしました。

ようするにこの部分ですよ↓

この部分を正式に何と呼ぶのかわからないので、とりあえず私は「タグ挿入ボタン」と呼ぶことにします。
あと、画像を作るのが面倒なのでそのままテキストでのリンクにしましたが何か。

クリックすると、まず画像のファイル名を聞いてきます。
ファイル名だけ入力してやると、自動でパス名を補完してくれます。

次にキャプションを聞いてきます。
上の画像の例でいうと「タグ挿入ボタン」というテキストです。
画像がポップアップしたときに画像の下に表示される見出しのことです。

これでずいぶん楽になりましたー

やり方です。

まず、mt/tmpl/cms/edit_entry.tmpl を開いて「write」で検索し、

mt/tmpl/cms/edit_entry.tmpl

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>');

などという記述がある近辺をよく見ると、「Bold」の部分が「Italic」とか「Underline」あるのがわかります。

それらの記述の並びの最後に次の一文を挿入します。

write('<a title="<MT_TRANS phrase="Insert Image">" href="javascript:void(0);" onclick="return insertImg(document.entry_form.text)">IMG</a>');

保存して、アップロード。

次に、mt/mt-static/mt_ja.js を開いて、以下の内容を一番最後の行にでも挿入してください。

mt/mt-static/mt_ja.js

function insertImg (e) {
++my_thumbno;
if (!canFormat) return;
var str = getSelected(e);
var my_filename = prompt('File Name?', '.jpg');
if (my_filename != null) {
my_filename = '（画像があるフォルダ）/' + my_filename;
} else {
return false;
}
var my_cap = prompt('Caption?', str);
str = '<a id="thumb' + my_thumbno + '" href="' + my_filename + '" class="highslide" onclick="return hs.expand(this)"><img src="' + my_filename + '" width=10% align=left /></a>';
if (my_cap != '') {
setSelection(e, str + '<div class="highslide-caption" id="caption-for-thumb' + my_thumbno + '">' + my_cap + '</div>');
} else {
setSelection(e, str);
}
return false;
}

（画像があるフォルダ）の部分には、ご自分のブログで画像が入っているフォルダを指定してください。

あと、このファイルの一番上に、以下の太字の一行を挿入してください。

/*
Copyright 2001-2005 Six Apart. This code cannot be redistributed without
permission from www.sixapart.com. For more information, consult your
Movable Type license.

$Id: mt.js 16607 2005-08-24 06:22:16Z jallen $
*/

var my_thumbno = 0;
var ScriptURI;
var ScriptBaseURI;
var StaticURI;
var HelpBaseURI;

これは、idにつける一意の番号のための宣言です。

もちろんこの記述は、画像の表示に「Highslide JS」を使うときのみの記述です。
普通にimgタグを使う場合は、次のようにします。

function insertImg (e) {
if (!canFormat) return;
var str = getSelected(e);
var my_filename = prompt('File Name?', '.jpg');
if (my_filename != null) {
my_filename = '（画像があるフォルダ）/' + my_filename;
} else {
return false;
}
str = '<img src="' + my_filename + '" width=10% align=left />';
setSelection(e, str);
return false;
}

「width=10%」とか「align=left」の部分は、HTMLの imgタグと同様の指定が書けます。
ご自分のブログデザインにあわせて変更してください。

また、画像にリンクを張る場合は、

function insertImg (e) {
if (!canFormat) return;
var str = getSelected(e);
var my_filename = prompt('File Name?', '.jpg');
if (my_filename != null) {
my_filename = '（画像があるフォルダ）/' + my_filename;
} else {
return false;
}
str = '<a href="' + my_filename + '"><img src="' + my_filename + '" width=10% align=left /></a>';
setSelection(e, str);
return false;
}

こうなるわけですね。

ちなみに、prompt文中の「File Name?」などという文章はわかりやすく変更できますが、日本語だと化けますので注意が必要です。

これでいろんなボタンを作れそうです。

きりしま屋さんの「MovableTypeにボタンを追加する」を参考にさせていただきました。ありがとうございました。