隠居、MT4.1 でのコメント編集HTMLタグボタンを設置

　MT3.3 のときには、コメント入力ボックスの縁に、HTMLタグボタンをカストマイズで設置していた。MT4 にバージョンアップして、新たに「小粋空間」さんの MT4.1 テンプレートセットを導入したが、「コメント入力フォーム」には、このHTMLタグボタンがついていない。

　コメントも単純なテキスト文書でなく、冗長な絵文字までいらないが、文字の一部分を太字にしたりリンクを張ったりしたい。HTMLタグは使える設定にしているので、タグを書けばよいのだがいちいち面倒である。それで、新しい「コメント入力フォーム」にもHTMLタグボタンをつけることにトライすることにした。

　「MT4 コメント編集ボタン」でググルとすぐにでもありそうなのに的確にヒットしない。そこで、MT3.3 のときにお世話になった「小粋空間」さんの「コメントにHTMLタグ挿入ボタンをつける（改）」を参考にさせてもらって、MT4 に応用してみた。カスタマイズの記録として記しておきたい。

　「小粋空間」さんのエントリーの順に従って、変更した部分を書き留めたい。

コメント欄でのHTMLタグの使用を有効にする。
→MT4 では、「ブログの設定」→「コメント」→「コメントポリシー：HTMLを許可」をチェック
編集ボタン用画像のコピー
→バックアップでおいてあった MT3.3 のときのファイルを <$MTBlogURL$> （私の場合：http://n-shuhei.net/atelier/ )に images フォルダーを作ってアップした。
JavaScriptファイルの作成>
→提供されている JavaScript のスクリプトを秀丸に文字コードを UTF-8 として Copy&Paste とし、ファイル名を commentButton.js として保存した。このファイルを <$MTBlogURL$> のフォルダーにアップした。

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

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

テンプレートの修正（JavaScriptファイルのインクルード追加）
→モジュール・テンプレート　「ヘッダー」の </head> 直前に、
```
<script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script>　
```
を挿入した。

テンプレートの修正（個別エントリーアーカイブへ編集用ボタン設定）
→モジュール・テンプレートの「コメント入力フォーム」の次の部分をコメントアウトし、その直後に提供されているコードを挿入した。

 <!--<p id="comments-open-text"><label for="comment-text">コメント：<MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>-->

<div class="field-header">
コメント：
<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>

以上で、「コメント入力フォーム」にコメント編集ボタンは表示されるようになった。MT4 では、「コメント入力フォーム」がモジュール化されているので、コメントの「確認」画面でも、コメント編集ボタンは表示される。
（追記：2009/3/2）サインインなしのコメントのための Captcha を設定したときに、HTMLタグのアイコンが消えてしまっていたので、修正した。また、一部の記述を変更した。

隠居、MT4.1 でのコメント編集HTMLタグボタンを設置

タグ:

トラックバック

コメント

コメントする