2004年 12月 11日(土)   先負    今日は何の日?   2005年の今日のエントリ

TopMovableTypeMTカスタマイズ > コメント欄に編集ボタン装備

MTカスタマイズコメント欄に編集ボタン装備 new

エントリーの投稿・編集画面にある 編集ボタンを、コメント欄にも付けてみました。
今回参考にさせていただいたのは caramel*vanilla さまの 「コメント編集ボタンの設置」 です。ありがとうございました。

導入手順は 3ステップです。
まずは、ウェブログの設定→設定 のところで除去機能のカスタマイズにチェックを入れ、
テキストエリアに コメント欄で許可するタグを入れます。
やむやむでは元々、コメント欄で絵文字を使えるようにしていたため、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 追記)

Posted by Caetla at 01:32 | Category : MTカスタマイズ | Comments [4] | Trackbacks [2] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , コメント編集ボタン
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1972) 投票人数:(653)

エントリーURL


 

トラックバックURL


 

トラックバック

コメントに編集ボタン from http://blog.magicwhite.jp/archives/2004/12/11/2356_63.php Magic White
やむやむ コメント欄に編集ボタン装備を参考に編集ボタンつけました。 これで、コメ... [続きを読む]

Tracked on 2004年12月12日 00:15

コメント編集ボタン from SOUTHERN ALL STARS
以前に、行なったカスタマイズですがテンプレートを入れ替えてから そのままになって... [続きを読む]

Tracked on 2005年11月04日 21:38
コメント
1

ほーほー!
これは便利そう!!

チョンチョンってなーに?

引用かー(笑)。

あぁ。遊んじゃってごめんにーw

Posted by ゲスト ミッチ http://samua.s58.xrea.com/blog/ at 2004年12月11日 08:07 [RES]
2

ヾ(@^▽^@)ノ わはは
早速ご利用、゛v(^_^ v)=アリガトウ=(v ^_^)v゛

Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2004年12月11日 11:20 [RES]
3

コンバンワァッ ヾ(≧∇≦)〃さえらさん
この前は、ありがとうございます。

コメント欄に、編集ボタンを付けるを参考にさせて頂きました
3.2のテンプレートに、替えてからそのままになっていたので
今日改めて付けて見ました。汗 ありがとうございます。

Posted by ゲスト mituru at 2005年11月04日 21:47 [RES]
4

>>3 mituruさん
トラックバックありがとうございます。
こちらのでよかったですか?Firefox でも使えるようになった こちら のがお勧めですよ。

Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年11月05日 05:21 [RES]
Amazon Search
Google Similar