2004年 12月 11日（土） 先負 今日は何の日？ 2005年の今日のエントリ
コメント欄に編集ボタン装備 
エントリーの投稿・編集画面にある 編集ボタンを、コメント欄にも付けてみました。
今回参考にさせていただいたのは caramel*vanilla さまの 「コメント編集ボタンの設置」 です。ありがとうございました。
導入手順は ３ステップです。
まずは、ウェブログの設定→設定 のところで除去機能のカスタマイズにチェックを入れ、
テキストエリアに コメント欄で許可するタグを入れます。
やむやむでは元々、コメント欄で絵文字を使えるようにしていたため、img src なんてのも入ってます。
a href,b,br/,p,strong,em,ul,li,blockquote,img src,i
こんな感じでOKです。
次に 個別エントリーアーカイブのテンプレートを開き、<head>～</head> に以下を追加します。
<script type="text/javascript" language="JavaScript">
<!--
function mouseover(el) { el.className = "raised"; }
function mouseout(el) {
el.className = "button";
}function mousedown(el) {
el.className = "pressed";
}function mouseup(el) {
el.className = "raised";
}
function format_me(v) {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
document.selection.createRange().text = "<" + v + ">" + str + "</" + v + ">";
return;
}function insert_link() {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
document.selection.createRange().text = "<a target=\"_blank\" href=\"" + my_link + "\">" + str + "</a>";
}
return;
}function format_quote() {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
document.selection.createRange().text = "<blockquote>" + str + "</blockquote>";
return;
}
//-->
</script>
最後に コメント投稿フォーム内のボタンを表示させたい箇所に以下を挿入します。
<style type="text/css"><!-- #toolbar { width: 250px; margin: 0px; padding: 0px; text-align:right;} .button { background: buttonface; border: 1px solid buttonface; margin: 1; } .raised { border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; background: buttonface; margin:1; } .pressed { border-top: 1px solid buttonshadow; border-left: 1px solid buttonshadow; border-bottom: 1px solid buttonhighlight; border-right: 1px solid buttonhighlight; background: buttonface; margin:1; } --></style>
<div id="toolbar">
コメント編集ボタン :
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_quote()" src="/images/html-quote.gif" width="22" height="16" align="middle" alt="引用形式にします" /><img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_me('b');" src="/images/html-bold.gif" width="22" height="16" align="middle" alt="太字にします" />
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_me('i');" src="/images/html-italic.gif" width="22" height="16" align="middle" alt="イタリック体にします" />
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="insert_link();" src="/images/html-link.gif" width="22" height="16" align="middle" alt="リンクを作成します" />
</div>
再構築して できあがり！コメント投稿フォームを見てみてください。
これは かなり便利。特に「リンク」ボタンは 重宝ですよね。
あ・・・書くの忘れてましたが これ、IEでしか動作しないようです。ぺこ <(＿ ＿)>
こちらの記事 に、MTIncludeでモジュール化する手順をアップしてます。
上記のやり方より、テンプレートのソースが短くなるので お勧めです。（12月12日 1:45 追記）
≫ コメントに編集ボタン from
Magic White
やむやむ コメント欄に編集ボタン装備を参考に編集ボタンつけました。 これで、コメ... [続きを読む]
≫ コメント編集ボタン from
SOUTHERN ALL STARS
以前に、行なったカスタマイズですがテンプレートを入れ替えてから そのままになって... [続きを読む]
コンバンワァッ ヾ（≧∇≦）〃さえらさん
この前は、ありがとうございます。
コメント欄に、編集ボタンを付けるを参考にさせて頂きました
3.2のテンプレートに、替えてからそのままになっていたので
今日改めて付けて見ました。汗 ありがとうございます。
サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
