コメント欄で半角の「<」「>」を使うとタグと認識され、投稿時に<～>で囲まれた部分が消えてしまいます。これを避けるためには実体参照で「<」「>」と入れればいのですが、そんなこと面倒でやっていられません（というか、覚えてられないし）。そこでリアルタイムプレビューとの兼ね合いもあって、「<」「>」をワンクリックで簡単に入れられるボタンを付けてみました。
いろいろ探してみて、やむやむさんのところで見つけたQuicktagsを利用させてもらうことに。これは本来はタグをワンクリックで簡単に入れるためのタグ挿入支援ボタンです。「<」を入れるだけならもっと簡単な方法もあるかと思いますが、これならタグを許可する設定にした時も続けて使うことが出来るのでいいかもと。本来の使い方と合わせて導入方法を覚え書きしておきます。
まずはJS QuicktagsからDownloadをクリックしてjs_quicktags.zipを落としてきて解凍。
ＭＴへの導入方法はやむやむさんのコメント編集にQuickTags入れてみましたを参照させていただきました。
１．js_quicktags.jsの編集
解凍して出てきたjs_quicktags.jsは初期設定のままだとものすごい数のタグが用意されています。全部使うことはまずないと思うので（もちろん使いたかったら全部使ってもいいのですが^^;）、使い勝手に応じて要らないタグは消して足らないものがあれば追加します。ちなみに編集なしでそのままストレートに入れるとこんな感じになります（挿入具合を試してみて下さい）。
●ボタンの編集
ボタンの基本形は以下の形になります。ここを編集して自分の好きなタグのボタンをいくつでも追加することができます。
edButtons.push(
new edButton(
'ed_bold（ボタンのid）'
'B（ボタンに表示される文字）'
,'<strong>（開始タグ）'
,'</strong>（閉じタグ）'
,'b（アクセスキー）'
)
);
ここでは「<」「>」を入れるために以下のボタンを追加しました。
edButtons.push(
new edButton(
'ed_left'
,' < '
,'<'
,''
)
);
edButtons.push(
new edButton(
'ed_right'
,' > '
,'>'
,''
)
);
edButtons.push(
new edButton(
'ed_space'
,'半角空白'
,' '
,''
)
);
一番下の半角空白挿入ボタンはバランスを取るためのオマケです(^^;。
●スクリプト部分の編集（ボタン表示に関するもの）
これは必要な場合のみ。私に分かる範囲でしか書けませんが…(^^;
js_quicktags.jsの中から以下の部分を探し出します。
function edToolbar() {
document.write('<div id="ed_toolbar"><span>');
for (i = 0; i < extendedStart; i++) {
edShowButton(edButtons[i], i);
}
if (edShowExtraCookie()) {
document.write(
'<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" value="Close Tags" />'
+ '<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" value="Dict" />'
+ '<input type="button" id="ed_extra_show" class="ed_button" onclick="edShowExtra()" value="»" style="visibility: hidden;" />'
+ '</span><br />'
+ '<span id="ed_extra_buttons">'
+ '<input type="button" id="ed_extra_hide" class="ed_button" onclick="edHideExtra();" value="«" />'
);
}
else {
document.write(
'<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" value="Close Tags" />'
+ '<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" value="Dict" />'
+ '<input type="button" id="ed_extra_show" class="ed_button" onclick="edShowExtra()" value="»" />'
+ '</span><br />'
+ '<span id="ed_extra_buttons" style="display: none;">'
+ '<input type="button" id="ed_extra_hide" class="ed_button" onclick="edHideExtra();" value="«" />'
);
}
for (i = extendedStart; i < edButtons.length; i++) {
edShowButton(edButtons[i], i);
}
document.write('</span>');
// edShowLinks();
document.write('</div>');
}
・「Dict」ボタンが要らない場合は赤字の部分を削除します。
これはどうも辞書のようですが、英語だし、日本のサイトには要らないような気がします(^^;。
・ボタンの列を閉じたり開いたりする「»」「«」が要らない場合は青字の部分を削除。
ボタンが少なくて下段の拡張部分まで使わない、最初から開いた状態でボタンを全部見せたいって場合もありますよね。そういう時は矢印を無くしておくと見た目スッキリします。
編集が終わったらブログと同じ文字コードにして保存します（最初、これをしなかったので日本語が文字化けしました）。どうしても文字化けする場合は文字参照で入れるといいです。
２．テンプレートにタグ挿入用のソースを追加
好きな場所にFTPでjs_quicktags.jsをアップします。
<head>～</head>内に追加。
<script type="text/javascript" src="http://スクリプトをアップしたアドレス/js_quicktags.js"></script>
●バージョン1.3の場合
ボタンを表示させたい場所に追加。
<script type="text/javascript">edToolbar('comment-text');</script>
青字の部分はtextarea内のidと同じものにします。
●バージョン1.2の場合
ボタンを表示させたい場所に追加。
<script type="text/javascript">edToolbar();</script>
</textarea>の下に追加。（バージョン1.2のみ）
<script type="text/javascript">var edCanvas = document.getElementById('comment-text');</script>
青字の部分はtextarea内のidと同じものにします。
３．スタイルシート（必要な人だけ）
ボタンを装飾したい場合は以下のように（ツールバーのidを利用してます）。中身の装飾はお好みで。
#ed_toolbar input {
background-color: #FFFFFF;
border: 1px solid #F999999;
color: #999999;
}
しかしjavascriptって便利ですね。こんなに簡単にタグ挿入ボタンが付けられるのなら、装飾用のタグ使えるようにしてもいいかな…。ということで、気が向けばボタン増やしてるかもしれません（笑）。
＜2006.10.16 追記＞
一部訂正、編集部分をもう少し詳しく書き足しました。
＜2008.6.11 追記＞
Quicktagsがバージョンアップして挿入コードに一部変更があったので、それに対応。
関連するエントリー：コメントにQuicktagsでタグ挿入ボタンを(2) ボタンを画像に
コメント
こんにちは。コメントとトラックバックありがとうございました。
TAEKOさんこうやって応用できるってすばらしいですね。
わたしはなかなか・・・もらってきたものをほとんどそのまま使うことしかできません。
いえいえ、こちらこそさえらさんの応用技を参考にさせていただいてるんですよ～。
カスタマイズって各自の使い勝手に合わせていろいろ出来るところが嬉しいですよね。
楽しんでやっていこうと思います。
はじめましてyutakaともうします。quicktagsについてですが、MT4.1でも動作するのでしょうか？ 試してみたのですがボタンは表示されるのですがクリックしても無反応なのでMT4.1でも動作するのかお伺いしたいのですが。よろしくお願いします。
＞yutakaさん
こちらこそ初めまして。
quicktagsですが、4.1でも問題なく動作しますよ。
このブログ（4.1です）のコメント投稿欄に出ているアイコンもquicktagsで表示させていますので、アイコンをクリックすればテキストフォーム内に実体参照文字が出てくるのをご確認いただけると思います。
念のため4.1デフォルトテンプレートでも試してみましたが、問題なく動作しました。
javascriptですからMTのバージョンには関係なく動作すると思うのですが…。
ＴＡＥＫＯさんお返事有り難う〜
>quicktagsですが、4.1でも問題なく動作しますよ
そうですかぁ、設置の仕方が悪いんですねぇ
使用テーマによって書き込む場所が違うんでしょうか？ボタン幅がコメント欄と同じサイズになってしまいますし、なによりクリックしてもなにも起こらないんです。もう一度じっくり読み直してみます
＞yutakaさん
今気がついて配布元へ行ってみたのですが、js_quicktags.jsがバージョンアップされてますね。より簡単に導入できるよう改善されていたようです。そのためダウンロードされたのがVersion: 1.3の場合は、挿入するスクリプトの書き方が少し違ってきます。
「ボタンを表示させたい場所に追加」を以下のように変えて下さい。
<script type="text/javascript">edToolbar('comment-text');</script>
そして</textarea>の下には何も追加しないで下さい。
これでいけると思います。4.1デフォテンプレで動作確認済みです。
こんばんわ〜
>Version: 1.3の場合は、挿入するスクリプトの書き方が少し違ってきます。
わざわざ調べていただき、ありがとうございました。なるほど、それが原因でした。ボタンクリックでタグは入るようになったのですがボタンサイズがでかい、でかい(笑)
＞yutakaさん
＞ボタンサイズがでかい
サイト拝見しました。た、確かに…(^^;。
デフォルトテンプレートでは普通に表示されてますし、yutakaさんのサイトもスタイルシートを切った状態ならボタンも普通に表示されます。ですので、お使いのテンプレートとcssの設定が何か影響しているものと思われます。
あとは見栄えの問題だけですので、テンプレ作者様にご確認されるのがいいのではと。
よろしくです。
小さな、品のいいボタンになりました(笑)
これからもどうぞよろしくお願いします
＞yutakaさん
きれいに収まりましたね！ よかったです。
こちらこそこれからもよろしくお願いします。^^