Home > 日記だとか雑記だとか > MTメモ:MovableTypeで絵文字を使うには。

MTメモ:MovableTypeで絵文字を使うには。

    • Mon
    • May
    • 14
    • 2007
    • 16:
    • 22:
    • 54
    • DALMATIANS
    • 07-5-14(Mon) 赤口 投稿時の月齢:26.8  月名:二十七日月  潮汐:中潮 Moon:26.8
  • 日記だとか雑記だとか
  • |
  • hatena button
  • hatena count
  • save this page del.icio.us

そう言えば、MovableTypeで絵文字を使う為の導入方法メモを
残していなかったコトに気付きました… :たらーっ:
うんうんと唸りながら導入したので、
いつかやってくるかもしれない…
と言うか、既にCatlogの方で
対応させなければいけなくて、ちょっと忘れ気味で困ってるので…

ココで再度、思い出すためにも
メモに残しておこうと思います。ハイ。
1回メモとして残しておけば
今後、再度 対処しなくてはならなくなった時にも
困りませんからね。

ってワケで。さっそく、思い出しながら
やってみたいと思います。ハイ。

ちなみに、絵文字導入でお世話になったサイト様は
MovableType備忘録様とやむやむ様デス。

1.まずはここからMTMacroをDLして、ここからMT SmileysをDLして来る。

2.MTMacroプラグインをインストールする。
●macros.pl → mt/plugins/ の中にアップロード
●postproc.pmとmacros.pm → mt/extlib/ の中にbradchoate というディレクトリを作成してその中にアップロード

3.MT-Smileysプラグインをインストールする。
●DLした圧縮ファイルを展開した中にある image フォルダの中身をサーバーにアップロード
※アタシのサーバー環境の場合は、ブログをサブドメインで公開していると言うこともあり、mt.cgiと同じ場所にアップロードすると、イロイロとややこしくなるので、サブドメイン用のフォルダ以下にある images フォルダに smiley フォルダを作成し、その中に絵文字として使いたいアイコン画像ファイルをアップロードしています。

4.smiley-javascript(インデックス・テンプレートとテンプレート・モジュール) / smiley-macros(テンプレート・モジュール) / smileys(テンプレート・モジュール) のテンプレートを作成する

 A.smiley-javascript のテンプレートを作成

<script type="text/javascript" language="javascript">
<!--
// MT Smileys http://mt-hacks.com/mt-smileys.html
// Edited By Noel http://noe.lolipop.jp/
function emoticon (smiley) {
var txtarea = document.comments_form.text;
smiley = ' ' + smiley + ' ';
if(navigator.appName.indexOf("Microsoft") > -1){ // If IE
txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=smiley;
txtarea.focus();
// return false;
}else{ // If other browser
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
txtarea.focus();
} else {
var length = txtarea.textLength;
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var txtarea1 = txtarea.value.substring(0, start);
var txtarea2 = txtarea.value.substr(end, length);
txtarea.value = txtarea1 + smiley + txtarea2;
txtarea.focus();
}
}
}
//-->
</script>

やむやむ様のコメントとエントリ投稿用絵文字パワーアップを参考にしています。
上記のスクリプトでコメント欄での入力が超ラクチン :ニコニコ:
ちなみに、アタシの場合は smiley-javascript については
インデックス・テンプレート で smiley.js を作成し
さらに、テンプレート・モジュール でも smiley javascript というモジュールを作成しています。
イロイロやってみた結果、jsファイルを直接呼び出すよりも、MTのモジュールとしてテンプレートにインクルードした方がイイみたい( :?:)な場合があったので。

 B.smiley macros と smileys のテンプレート・モジュールを作成

5.絵文字を変換(入力)したいテンプレートを修正する

 A.以下のインクルード用コードを、テンプレートの1行目に追加

<$MTInclude module="smiley macros"$>

 B.以下のjsスクリプトコードまたはインクルード用コードを<head></head>内に追加

<script type="text/javascript" src="<$MTBlogURL$>smiley.js"></script>

または

<$MTInclude module="smiley javascript"$>

 C.以下のインクルード用コードをコメント欄の絵文字イメージを表示させたい箇所に追加

<$MTInclude module="smileys"$>

※テーブル要素かdiv要素で囲みましょう

6.エントリ本文、エントリ追記分、コメント本文など、
絵文字を変換して欲しいトコロにマクロ用のコードを追記
※コメントプレビューだとか検索用だとかのテンプレートも忘れずに…

例:
変更前

<$MTEntryBody$>

変更後

<mtmacroApply><$MTEntryBody$></mtmacroApply>

修正したら、再構築。

これでMTに絵文字が導入できるはず。
絵文字の追加は自由自在。smiley-macros と smileys に 既にある記述と同じように追加していくだけ。

ちなみに、アタシの場合
JUGEMからの移行だったので、ソレまでの絵文字用コードを活用するためにも
絵文字として認識させる文字列として、
“:”と“:”で括っています。
こうしてあれば、とりあえずは
日本独自の顔文字などが、
うっかり絵文字として画像に置き換えられるコトもアリマセン… :汗:
というワケで、絵文字導入メモでした。
さて、Catlogのほうにも絵文字をちゃんと対応させよう… :たらーっ:

人気blogランキング にほんブログ村 ゲームブログへ 人気ブログランキング【ブログの殿堂】
↑ランキング参加中デス。ポチっとクリックしていただくと、日々の活力になりマス。ハイ。

関連する投稿

SBM: add to hatena hatena.comment (0) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 0

Comments (Close):1

さえら 07-05-16 (Wed) 13:38

こんにちは:Razz:
はじめまして:ニコニコ:
トラックバックありがとうございました:るん♪:

Home > 日記だとか雑記だとか > MTメモ:MovableTypeで絵文字を使うには。

Illustration
Get the Flash Player to see the slideshow.
Calendar
« 2007 年 May »
S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
SBM Popular Entry
Tag Top 100
Favorite Game CD DVD
Favorite nicovideo
Ring and Union
Feeds and more

TokyoLife::Dalog

↑ フィード・ティッカーを使ってみましょう

人気blogランキング にほんブログ村 ゲームブログへ 人気ブログランキング【ブログの殿堂】
↑ランキング参加中デス。ポチっとクリックしていただくと、日々の活力になりマス。ハイ。
フィードメーター - TokyoLife::Dalog あわせて読みたいブログパーツ
META
QRcode
QRcode:home

Return to page top

I ♥ WordPress