コメントにHTMLタグ挿入ボタンをつける（改）: 小粋空間

ナビゲーションをスキップする

Top ＞ Movable Type ＞カスタマイズ＞コメント＞コメントにHTMLタグ挿入ボタンをつける（改）

コメントにHTMLタグ挿入ボタンをつける（改）

Posted at May 17,2005 8:10 PM
Tag：[Comment, Customize, JavaScript, MovableType]

個別エントリーアーカイブ等のコメント欄にエントリー画面と同じ編集ボタンを表示するカスタマイズです。カスタマイズの完成イメージは下の画像のようになります。

コメントに編集ボタンをつけた状態

このカスタマイズのオリジナルはcaramel*vanillaさんのようですが、該当のエントリーが見当たりませんでした（見落としてたらすいません）。なおそこから参照されたご近所さんでは、

やむやむ：コメント欄に編集ボタン装備

Magic White：コメントに編集ボタン

がありました（もれがありましたらお許しを）。

久しぶりの（改）マークですが、オリジナルからはアイデアのみ頂いて、中身は自力で作りました。機能的な差異は

Mozilla系ブラウザでも表示（Opera7/8もOK）
コメント・プレビュー／コメント・エラー画面にも表示

です。「自力で作った」というのは言い過ぎで、Movable Type の管理画面の設定を一部拝借したものです。
以下、カスタマイズ方法です。

2010.10.08追記 Movable Type 4以上でのカスタマイズは、「コメントにHTMLタグ挿入ボタンをつける（MT4/MT5版）」を参照してください。

１．コメント欄でのHTMLタグの使用を有効にする

管理メニューの「ウェブログの設定」→「設定」にある「除去機能」の「カスタマイズ」を選択してテキストボックスに下記を設定します。

a href,a href target,strong,br/,p,em,u,ul,li,blockquote,img src,font color,s

参考までに、「標準の設定」で許可されているHTMLタグは、

a href、b、br、p、strong、em、ul、li、およびblockquote

です。
また同じページの下の方にある「コメントでのHTMLの利用を許可する」をチェックして保存・再構築してください。

２．編集ボタン用画像のコピー

ローカル・サイト・パス（index.html があるディレクトリ）の直下に images ディレクトリを作り、Movable Type の images ディレクトリに存在する下記の画像を images 配下にコピーしてください。

html-bold.gif

html-italic.gif

html-underline.gif

html-link.gif

html-quote.gif

ローカル・サイト・パス配下のどこか（ディレクトリも含む）に Movable Type の images ディレクトリがすでに存在していれば本項目はスキップしてください（images ディレクトリがローカル・サイト・パス直下でない場合は後の設定を若干変更する必要があります）。

３．JavaScriptファイルの作成

編集ボタンをクリックした時に動作させるためのJavaScriptを作ります。Movable Type の mt.js をローカル・サイト・パスにコピーするか、mt.js より下記を部分を抜粋してJavaScriptの外部ファイル（ここでは commentButton.js）を作ってローカル・サイト・パスにアップロード（または配置）してください。mt.js がすでにローカル・サイト・パスにある場合は本項目をスキップして結構ですが、以降は commentButton.js を配置した前提で説明を進めますのでご注意ください。

var canFormat = 0;
if (document.selection)
    canFormat = 1;
var ua = navigator.userAgent;
if (ua.indexOf('Gecko') >= 0 && ua.indexOf('Safari') < 0)
    canFormat = 1;
 
function getSelection (e) {
    if (document.selection)
        return document.selection.createRange().text;
    else {
        var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
        return e.value.substring(start, end);
    }
}
 
function setSelection (e, v) {
    if (document.selection)
        document.selection.createRange().text = v;
    else {
        var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
        e.value = e.value.substring(0, start) + v + e.value.substr(end, length);
    }
}
 
function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}
 
function insertLink (e, isMail) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    var my_link = isMail ? prompt('Enter email address:') : prompt('Enter URL:', 'http://');
    if (isMail) my_link = 'mailto:' + my_link;
    if (my_link != null)
        setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
    return false;
}

４．編集ボタン表示スタイルの追加

スタイルシート（styles-site.css）に下記を追加してください。場所はどこでもOKです。

.field-header {
    width: 270px; /* ボタンを配置するエリアの幅 */
    height: 30px; /* ボタンを配置するエリアの高さ */
    position: relative;
}
 
.field-label {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
 
.field-buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
 
.field-buttons img {
    border: 0;
    margin: 0px 0px 0px 3px;
}

コメント部分の値（赤色）はコメントエリアの幅によって適宜変更してください。編集用ボタンは width で設定した幅の一番右側に配置されるようになっています。IEでボタンの右端が 2px ほどテキストエリアの内側になるようにしておけば、Firefoxで丁度揃って表示されるようです。

５．テンプレートの修正（JavaScriptファイルのインクルード追加）

個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーテンプレートの <head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script>

コメント・プレビュー／コメント・エラーでボタンを表示する必要がない場合は個別エントリーアーカイブのみ設定してください。

６．テンプレートの修正（個別エントリーアーカイブへ編集用ボタン設定）

個別エントリーアーカイブテンプレートを開き、下記のリストの通り、赤色部分を青色のものに入れ替えてください。

<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br />
<div class="field-header">
<div class="field-label"><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML></div>
<div class="field-buttons">
<a title="太字" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="<$MTBlogURL$>images/html-bold.gif" alt="太字" width="22" height="16" /></a>
<a title="イタリック" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="<$MTBlogURL$>images/html-italic.gif" alt="イタリック" width="22" height="16" /></a>
<a title="アンダーライン" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="<$MTBlogURL$>images/html-underline.gif" alt="アンダーライン" width="22" height="16" /></a>
<a title="ハイパーリンク" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="<$MTBlogURL$>images/html-link.gif" alt="ハイパーリンク" width="22" height="16" /></a>
<a title="引用" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="<$MTBlogURL$>images/html-quote.gif" alt="引用" width="22" height="16" /></a>
</div>
</div>

同じ場所が2ヶ所ありますので両方変更します。厳密に言うと「コメント:」で検索して先にみつかった方には MTIfAllowCommentHTML タグがありませんので、

<MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML>

の部分は削除してください。それと関連して、コメントでHTMLタグが使える場合には

(書式を変更するような一部のHTMLタグを使うことができます)

というメッセージが表示されますが、本カスタマイズではそれが表示されないことを前提にスタイルを設定していますので、2ヶ所とも削除した方が見栄えはいいです（HTMLタグを挿入するカスタマイズでHTMLタグが使えるメッセージを削除するのは矛盾してますが）。

７．ContextHandlers.pm の修正

注：MT3.3x の時点の内容を記述していますが、コメント・プレビュー／コメント・エラーに <$MTCommentPreviewBody$> タグが使われていない場合は６項の内容を実施してください。

これはコメント・プレビュー／コメント・エラー画面で編集ボタンを表示するための設定です。４項と関連してコメント・プレビュー／コメント・エラーへの表示が不要な場合は本項目をスキップしてください。
５項までの作業で個別エントリーアーカイブに編集用ボタンが表示されるようになりますので、そちらが正常に動作することを確認した後に本項目の設定を行うことをお勧めします。

lib/MT/Template/ContextHandlers.pm

をダウンロードし、任意のエディタで開いて下記の修正を行います。
まず2050行目辺りに青色の行を追加します。

my $comment_author = "";
my $comment_email = "";
my $comment_text = "";
my $comment_url = "";
my $blog_url = $blog->site_url;

次に、2108行目辺りにある赤色の行を青色のものに置きかえます。

<p><label for="text"><MT_TRANS phrase="Comments:"></label><br />
<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label></div>
<div class="field-buttons">
<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="${blog_url}images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="${blog_url}images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="${blog_url}images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="${blog_url}images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="${blog_url}images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>
</div>
</div>

最後に2193行目辺り（上を挿入した後であればもう少し下）にある赤色の行を青色のものに置きかえます。

<p><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note<br />
<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note</div>
<div class="field-buttons">
<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="${blog_url}images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="${blog_url}images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="${blog_url}images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="${blog_url}images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="${blog_url}images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>
</div>
</div>

編集が終わったら保存・アップロードします。
なお、コメント・プレビュー／コメント・エラー画面で、「HTMLタグが使えます云々...」というメッセージを表示したくない場合は、上のリスト

<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note</div>
<div class="field-buttons">
　　　　　　　　　　：

の3行目にある赤色部分を削除してください。

以上です。

2005.05.17 追記
１項を追加しました。

2007.04.05 追記
７項を 3.3x の内容に修正しました。

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ コメント編集ボタン Firefoxでも使えるようになりました from やむやむ
こちらのエントリのときからコメント欄に置いてる編集用ボタンなんだけど、今ま... [続きを読む]

Tracked on May 18, 2005 8:53 AM

≫ コメントに編集ボタンをつける（改） from SHO's**My...Day...**
ひとつ出来たら　嬉しくなるのが　blog♪ 小粋空間さんの『コメントに編集ボタン... [続きを読む]

Tracked on May 18, 2005 11:52 PM

≫ コメント用にタグボタンを付ける from SWEET WATER Web Server
以前からエントリーのフォームに付いているタグボタンを拝借し、コメントにも付けよう... [続きを読む]

Tracked on May 19, 2005 1:33 AM

≫ コメント欄に編集ボタンを！・・・付けてみる・・・の巻。 from TOY COZY MUSEUM 別館
以前からたまに目にはしていた“コメント欄に編集ボタン”ですが、「小粋空間」様の記事“コメントに編集ボタンをつける（改）”... [続きを読む]

Tracked on May 19, 2005 11:07 PM

≫ コメントの編集ボタンFirefoxに対応 from Magic White
以前にコメントに編集ボタンつけるカスタマイズをエントリーした事あったのですが、... [続きを読む]

Tracked on May 28, 2005 3:33 PM

≫ MovableType、コメントでもタグボタンを利用できるようにする。 from Infinity　
コメントに編集ボタンをつける [続きを読む]

Tracked on December 28, 2005 2:13 PM

≫ 色々カスタマイズ from KAZMA's WEB SITE++
色々いじってたけど、まったく書いてませんでしたｗ一気に書きます！... [続きを読む]

Tracked on April 16, 2006 6:52 PM

≫ 隠居、MT4.1 でのコメント編集HTMLタグボタンを設置 from Atelier
　MT3.3 のときには、コメント入力ボックスの縁に、HTMLタグボタンをカスト... [続きを読む]

Tracked on March 2, 2009 9:39 AM

ワオ　w(°o°;)w　Ｆｉｒｅｆｏｘでも使えるんですか？
差し換えなくちゃ。。。(((((((((((((ーー；) さささっ・・・

[1] Posted by さえら : May 18, 2005 6:19 AM

＞さえらさん
こんにちは。
お久しぶりです（嬉）。
ということでご利用ありがとうございました！

[2] Posted by yujiro : May 18, 2005 2:40 PM

うーん。。。

いじったら、『MT-SCode プラグインによるコメントスパム対策』の数字が消えてしまいました。。

[3] Posted by ＳＨＯ : May 18, 2005 11:26 PM

ごめんなさい。。

新規エントリーしたら出ました。
トラックバック送らせていただきます。

[4] Posted by ＳＨＯ : May 18, 2005 11:33 PM

やはり、ダメみたいです。

↑をクリックすると　ページのトップに移動するのです。

お手数かけます。。

[5] Posted by ＳＨＯ : May 18, 2005 11:53 PM

＞ＳＨＯさん
こんばんは。
続けてのご利用ありがとうございます。

ご質問の件ですが、head 部分に設定されているJavaScriptのインクルードで、外部ファイルが正常に参照できていないようです（http://petty-sho.chu.jp/blog/commentButton.js をブラウザで実行すると404エラーになります）。
ファイルの配置とパーミッション等をご確認ください。

以上です。
それではどうぞよろしくお願い致します。

[6] Posted by yujiro : May 19, 2005 12:46 AM

毎度・・毎度・・・お騒がせして申し訳ありません。

出来ました。

ありがとうございます。

[7] Posted by ＳＨＯ : May 19, 2005 11:00 AM

＞ＳＨＯさん
こんばんは。
ご連絡ありがとうございます。

無事にできたようですね。
おめでとうございます！

[8] Posted by yujiro : May 19, 2005 8:38 PM

こんばんは。
早速設置させていただきました。いつもながらの丁寧な解説有り難うございます。トテモ助かります。

[9] Posted by toycozy : May 19, 2005 11:06 PM

＞toycozyさん
こんばんはー。
ご利用＆トラックバックありがとうございました。
サクッとできたようでよかったです！

[10] Posted by yujiro : May 20, 2005 12:13 AM

mt-comments.cgi

[11] Posted by mt-comments.cgi : April 30, 2006 4:58 AM

こんばんは、yujiroさん。
「コメントにHTMLタグ挿入ボタンをつける（改）」を使わせていただきました。
無事設置できて嬉しいです。
ありがとうございました！

ただ、一箇所だけ躓いた部分がありまして、
「７．Context.pm の修正」のところは
私のブログの場合、MT3.34のバージョンにしているので、
「ContextHandlers.pm」を修正をしました。最初「Context.pm」をいくら探してもないのでおかしいなと思いまして、もう一つMTフォルダに入っていた「ContextHandlers.pm」を探したら該当箇所があったので、少し以前のバージョンとは違うようですね。ご参考までに書いておきました。

Ｆｉｒｅｆｏｘでもうまく表示されていましたので、満足しています。ずっとこれがあればと思っていたので感謝しています（＾＾）

[12] Posted by ヨンシマイ : April 4, 2007 8:53 PM

＞ヨンシマイさん
こんにちは。
記事参照ありがとうございます。
うまくできたようでなによりです。
なお、７項の内容は先ほど修正致しました。
ご連絡くださり、ありがとうございました。

[13] Posted by yujiro : April 5, 2007 5:52 PM

こんにちは！いつも欠かさず読んでいます。

このコメントフォームのカスタマイズ方法MT5では可能でしょうか？

こちらのブログのコメントフォームでHTMLダク挿入ボタンはどうやって設置しましたか？

[14] Posted by aki : September 29, 2010 6:48 PM

＞akiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、MT5でのカスタマイズについては別途エントリーしたいと思います。
それではよろしくお願い致します。

[15] Posted by yujiro

: October 3, 2010 2:33 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...

小粋空間 - a cheap joke and a play on words site