おかえり、My Little Boy *** 三児の母の理想と現実 ***
<< クリスマスケーキ | HOME | 今朝の離乳食 >>
Movable Type コメント&エントリー欄に絵文字
いやー、これがずっとやりたかったのです、絵文字 run
これも、ジュゲムとかヤプログでは標準装備でしょ?
MTでもやりたいっ、だって、女の子だもん heart

ということで、コメント&エントリーに絵文字を使う方法。
いろいろあるみたいなんですが、
caramel*vanillaさんのエントリーで、コメント欄に絵文字を使う方法が、すごくわかりやすく書いてありました。
さらに、このやり方を応用させて、Angel Heartさんのエントリーでは、エントリーで絵文字を使う方法が紹介されていました。
私の貧弱な知識では、導入するのに丸1日くらいかかったけど asease

以下覚え書きです。

Trackbacks

Trackback URL : http://mylittle.boy.jp/weblog/sb.cgi/164

エントリーに絵文字 | Angel Heart | 2004/12/06 08:24 PM
テスト a01 a02 a03 a04 a05 c04 c05 e...
エントリーの絵文字を“MT Smileys”に変更。 | TOY COZY MUSEUM 別館 | 2005/01/15 03:45 PM
ちょっとしたアクセントに・・・と携帯電話タイプの絵文字というか小さなGIFアニメ...
Movable Typeでコメントに絵文字を | 猿山のブログ(新デザインでオープン!) | 2006/07/09 12:17 AM
 先日のリニューアルに続き、今度は絵文字を使えるようにしたいと思います。  go...


<2012.4.2 ブログお引越ししました> 今後は、新アドレスにて更新しますので、大変お手数ですが、お気に入りなどに入れてくださっている方、また、リンクを貼っていただいている方がおられましたら、変更をお願いいたします。
新URL → http://mylittle.boy.jp/okaeri/
感想など → GUEST BOOK
これはMTMacroプラグインとJavascriptを併用するやり方だそうです。
これだと画面上にタグが見えなくてスマート。
根気が必要です…。がんばれっ。

1 まずは、MT Hacks様から、MTMacroとMTsmileyの二つのファイルをダウンロード。

2 MTMacroを解凍すると、3つファイルが入っています。
  FTPソフトを使ってアップします。
 ・macros.pl →pluginsディレクトリに入れる
 ・macros.pm →extlib内に新しくbradchoateディレクトリを作成して入れる
 ・postproc.pm→macros.pmと同じ

3 MTsmileyを解凍して、出てきたimagesフォルダを
  mt.cgiと同じ階層のimagesディレクトリにアップ。

4 新しくテンプレート・モジュールを作成します。
  MTsmileyを解凍して出てきたファイルの中身をコピペして、
  MT編集画面の「テンプレート」→一番下の「新しいテンプレート・モジュールを作る」から作ります。
 ・smiley javascript→smiley-javascript.txt
 ・smiley macros→smiley-macros.txt
 ・smileys→smileys.txt

5 絵文字を表示させたいテンプレートを修正。
  私の場合は、メインページ・個別エントリーアーカイブかな。

 ・一行目に追加
 <$MTInclude module="smiley macros"$>
 ・head部分に追加
 <$MTInclude module="smiley javascript"$>

 ・コメントフォーム内に追加
 <$MTInclude module="smileys"$>
  ここに絵文字一覧が表示されますので、smileysの中身を<br>などで調節。

 ・<$MTEntryBody$>タグを探して、
  <MTMacroApply><$MTEntryBody$></MTMacroApply>に変更

 ・<$MTCommentBody$>タグを探して、同じく、
  <MTMacroApply><$MTCommentBody$></MTMacroApply>に変更


ここまでやってリビルドすると、コメント欄で絵文字が使えるようになるはず!
ここからは、エントリー欄に応用させるやり方です。

6 edit_entry.tmplを修正します。
  これって何?と思って探したら、MT編集画面からは見つけられず、
  FTPソフトでサーバを探して、tmplフォルダの中のcmsフォルダの中にありました。
  これが新規エントリーの画面なんですね〜。知らなかった。
  これをテキストエディタで編集します。バックアップを取っておきましょう!
  さっき作ったテンプレートモジュールの中身を加えます。

 ・smiley javascriptの中身を、
<script type="text/javascript" language="javascript">
<!--
function emoticon(smiley) {
var txtarea = document.entry_form.text;
smiley = ' ' + smiley + ' ';
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>

に変更して(太字の部分が変更箇所)、edit_entry.tmplに加えます。
場所は、とりあえず私はエントリーの内容と追記の間あたりに入れました。

さらに、これに続けて、smileysテンプレート・モジュールをコピペして貼り付けます。
これがそのままエントリー画面に表示されるので、
適当に
などで調整したほうが良いと思います。

修正し終わったらアップしてOKのはず。

*自分の好きな絵文字を使いたいとき
好きな絵文字の画像を用意して、imagesフォルダにアップし、
smiley macrosを書き換えます。
用意した画像分以下の記述を繰り返します。
<MTMacroDefine name="適当な定義名" string=":テキストエリアに表示される名前:" no_html="1">
<img src="images/ファイル名" alt="代替テキスト" width="幅" height="高さ" border="0" />
</MTMacroDefine>
同じようにsmileysも書き換えます。
<a href="javascript:emoticon('テキストエリアに表示される名前')"><img src="<MTBlogURL>images/ファイル名" alt="代替テキスト" width="幅" height="高さ" border="0" class="smiley"></a>

*私がひっかかった点
・smileyとsmileyの内容(emotionとstringの文字など)が
 ちょこっとでも違うと表示されません。
・日本語を使うときは、文字コードに気をつけないと、文字化けすることが。
・エントリーに応用する場合に、何を貼り付けるのかさっぱりわからなかったけれど、
 要するに中身をコピペして全部貼り付ければ良かったらしい。

*ちなみに
エントリーで使うときは、カーソル位置に関係なく、
入力されてる一番後ろに入るんで、
文字入力した後からだとコピペしないといけません。
しかも、追記のところには入りません。
どうやったらいいのかわからないので、
どなたかが解決方法を見つけてくださることを期待。

あーでもこれで、かわいい絵文字が使えてうれしいっ
DAYS > WEB | - | trackbacks (3)
にほんブログ村 インテリアブログ 北欧モダンインテリアへ にほんブログ村 インテリアブログ 北欧インテリアへ



↓関連記事はこちらからどうぞ。