Atelierで“コメント編集ボタン”タグの付いているブログ記事

2008年6月24日

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

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

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

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

 「小粋空間」さんのエントリーの順に従って、変更した部分を書き留めたい。
  1. コメント欄でのHTMLタグの使用を有効にする。
    →MT4 では、「ブログの設定」→「コメント」→「コメントポリシー:HTMLを許可」をチェック
  2. 編集ボタン用画像のコピー
    →バックアップでおいてあった MT3.3 のときのファイルを <$MTBlogURL$> (私の場合:http://n-shuhei.net/atelier/ )に images フォルダーを作ってアップした。
  3. JavaScriptファイルの作成>
    →提供されている JavaScript のスクリプトを秀丸に文字コードを UTF-8 として Copy&Paste とし、ファイル名を commentButton.js として保存した。このファイルを <$MTBlogURL$> のフォルダーにアップした。
  4. 編集ボタン表示スタイルの追加
    →提供されているコードをスタイルシート(styles-site.css)に追加した。ただし、実際の表示をみて、以下のコードの赤字部分を修正した。
    /*  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;
    }
    

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

  6. テンプレートの修正(個別エントリーアーカイブへ編集用ボタン設定)
    →モジュール・テンプレートの「コメント入力フォーム」の次の部分をコメントアウトし、その直後に提供されているコードを挿入した。
     <!--<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タグのアイコンが消えてしまっていたので、修正した。また、一部の記述を変更した。