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

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タグのアイコンが消えてしまっていたので、修正した。また、一部の記述を変更した。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1541

トラックバック

» カストマイズの履歴 from Atelier
 このページでは 2006年の1月から私のHomePageに手を入れた事柄につい... 続きを読む

コメント

This is a Test.
これはテストです。

HTMLタグのテストです。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)