2006年02月03日
コメント欄に絵文字
このページはやっていないのですが、他のサイトで導入したので、そのまとめ。参考にさせていただいたサイト
>>Luna's*PaPaさまのコメント欄で絵文字を使う
アイコン提供元>>PEPPER
※結構労力がかかります。覚悟して始めて下さい。
まずはプラグインの入手
MTMacroを解凍したら下記の場所にファイルをアップロード。
macros.pl → MT/plugins
macros.pm, postproc.pm → MT/extlib/bradchoate（無い場合は作成）
MTSmileysを解凍したら下記のファイルを確認して下さい。
- smiley-javascript.txt
- smiley-macros.txt
- smileys.txt
smiley-javascript.txtを編集します。
カーソル位置に該当文字を入れてくれるようにするものです。
「環境設定」の「テンプレート」で「モジュール」タブをクリックし、右の「モジュールを新規作成」から「smiley javascript」という名前で新しいモジュールを作ってください。
<script type="text/javascript" language="javascript"> <!--
function emoticon (smiley) {
var txtarea = document.comments_form.text;
// smiley = ' ' + smiley + ' ';
if(navigator.appName.indexOf("Microsoft") > -1){ // IEの場合
txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=smiley;
txtarea.focus();
// return false;
}else{
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
txtarea.focus();
} else {
txtarea.value += smiley;
txtarea.focus();
}
}
}
//-->
</script>
smiley-macros.txtを編集します。
アイコンの定義付けです。<MTMacroDefineからMTMacroDefine>までが一つの定義になります。
<MTMacroDefine name="ファイルの名前" string="テキストにhっ表示される名前" no_html="1">
<img src="<MTBlogURL>images/ファイル名" alt="代替テキスト" width="横幅" height="高さ" border="0" />
</MTMacroDefine>
これをテキストエディットなどで必要なアイコンの数だけ書き連ねます。
「環境設定」の「テンプレート」で「モジュール」タブをクリックし、右の「モジュールを新規作成」から「smiley macros」という名前で新しいモジュールを作ってください。
そのモジュールの中に先程作ったテキストを貼付けてください。
面倒くさいなーと思ったあなたに、わたしの作ったやつを一応用意しました。
さて、次は「smileys.txt」です。
コメント入力欄のフォーム部分のコントロールになります。
<a href="javascript:emoticon(':テキストエリアに表示される名称:')"><img src="<$MTBlogURL$>images/画像ファイル名" alt="代替テキスト" width="画像ファイルの幅" height="画像ファイルの高さ" class="smiley" /></a>
これをテキストエディットなどで必要なアイコンの数だけ書き連ねます。先程作った「smiley macros」と整合性が取れるように作ってくださいね。
「環境設定」の「テンプレート」で「モジュール」タブをクリックし、右の「モジュールを新規作成」から「smileys」という名前で新しいモジュールを作ってください。
わたしのはこんな感じになりました。
さて最後にこれを組み込みたいページのテンプレートを編集します。
（わたしの場合はメインインデックス、月別アーカイブ、カテゴリーアーカイブ、エントリーアーカイブ、コメントプレビュー、コメントエラー。何故メインインデックスや月別アーカイブ、カテゴリーアカイブまで入れるのかは次のエントリーを参考にしてください）
1行目に追加
<$MTInclude module="smiley macros"$>
<hear>〜</head> 内に追加
<$MTInclude module="smiley javascript"$>
コメントフォーム内に追加（ここに絵文字一覧が表示されます）
<$MTInclude module="smileys"$>
<$MTEntryBody$>タグ
<MTMacroApply><$MTEntryBody$></MTMacroApply>
<$MTCommentBody$>タグ
<MTMacroApply><$MTCommentBody$></MTMacroApply>
<$MTCommentPreviewBody$>タグ（必要に応じて）
<MTMacroApply><$MTCommentPreviewBody$></MTMacroApply>
以上で終わりです。お疲れ様でしたー。再構築して確認してみてください。
エントリーにも絵文字を入れたい場合には次のエントリーで。
Posted luna : 2006年02月03日 14:42 |
カスタマイズ