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>-->

以上で、「コメント入力フォーム」にコメント編集ボタンは表示されるようになった。MT4 では、「コメント入力フォーム」がモジュール化されているので、コメントの「確認」画面でも、コメント編集ボタンは表示される。

トラックバックURL

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

コメントする

(スパム・コメントを防止するために、MovableType または TypeKey のサインインのみのコメントでお願いしています。
 MovableType のアカウントの取得は、「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)





(書式を変更するような一部のHTMLタグを使うことができます)
太字 イタリック アンダーライン ハイパーリンク 引用