自己の覚え書きとして、以下に カスタマイズ手順を 記しておきます。
1.コメント欄でのHTMLタグの使用を有効にする
これは、元々 あれこれ 有効にしてました。('▽') アハハ やむやむでは、これだけ有効にしています。
a href,a href target,b,br/,p,i,u,ul,li,blockquote,img src,font color,s,center
2.編集ボタン用画像のコピー
今までは Movable Type の images ディレクトリにしか 画像ファイルは 存在しなかったんだけど、
以後のカスタマイズを楽にするために yujiroさんの記事 に従って
ローカル・サイト・パス直下の images ディレクトリに 以下の画像ファイルを アップし直しました。
html-bold.gif
html-italic.gif
html-underline.gif
html-center.gif
html-strike.gif
html-link.gif
html-quote.gif
3.JavaScriptファイルの作成
これは、yujiroさん のところのを 丸々コピーして、commentButton.js と名前を付け
ローカル・サイト・パスにアップしました。
4.編集ボタン表示スタイルの追加
元々、コメントのテキストエリアの横幅を広くしてたので、赤い数字のところだけ、修正しました。
.field-header {
width: 500px; /* ボタンを配置するエリアの幅 */
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;
}
5.テンプレートの修正(JavaScriptファイルのインクルード追加)
まんまです。以下を 個別エントリ ・ コメントプレビュー ・ コメントエラーテンプレートの <head> ~ </head> に追加。
<script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script>
6.テンプレートの修正(個別エントリーアーカイブへ編集用ボタン設定)
まぁ、あっても まず使われることないだろ~、ってなボタンを 余分に二つ 追加しています。(^u^)プププ
あと、やむやむでは TypeKey 関連 ごっそり外してる ので 修正 (以下を追加) する箇所は 1ヵ所だけでした。
<div class="field-header">
<div class="field-buttons">
<a title="太字" href="#" onclick="return formatStr(document.comments_form.text, 'b')"><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, 'i')"><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 formatStr(document.comments_form.text, 'center')"><img class="button" src="<$MTBlogURL$>images/html-center.gif" alt="センタリング" width="22" height="16" /></a>
<a title="打ち消し" href="#" onclick="return formatStr(document.comments_form.text, 's')"><img class="button" src="<$MTBlogURL$>images/html-strike.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>
ここまでで、個別エントリページのコメント欄には 編集ボタンが バッチリ装備されました。
7項は コメントプレビュー ・ コメントエラー 画面に 編集ボタンを装備するための カスタマイズになります。
7.Context.pm の修正
これも、yujiroさんとこ の ほぼ まんまです。
ヽ(^◇^*)/ ワーイ できました。(^。^;) フウ
2005年6月4日 こんなコメント編集ボタン にしてみました。
≪ 続きを隠す