« カテゴリを任意の順番に並べ替える | | 同じカテゴリーの前後のエントリーへリンクする »

Movable Typeで絵文字

emoji_gamen.png
Movable Typeで絵文字を使えるようにするプラグインを導入。
ハートびっくりはてな桜クローバースプーンコーヒーケーキ晴れ雲雨
↑こんな感じ。
レンタルブログなんかには絵文字を貼り付けられるものも多いけど、代替え文字を画像に置き換えるタイプなので、もしブログを引っ越したりしたら絵文字が見えなくなる。
でも、これはimgタグで貼り付けるので何となくいいのではないかと。

InsertIconというプラグインを利用するのですが、設置の仕方にちと手こずりました。

まず、PARADISE BLOG:エントリーの投稿で絵文字を導入を参考にしたのだけど、何故か上手くいかない。
次に、Six Apartに書いてある通りにやってもやはり上手くいかない。

で、Fare Le Comunicazioni Sulla Rete Mobile:●エントリーにNTTドコモ絵文字を使用(MT3.2)
ここの通りにやったらできた。

参考にした3サイトとも、基本的には同じことを書いているのだけど、微妙にそれぞれのファイルのアップロード先ディレクトリが違っていたりする。
又、私はMac環境なので、文字コードや改行コードなんかも違ってたのかもしれない。最後のサイトでは必要なファイル全てをダウンロードできるようになっていたので、それを利用した。
ちなみに、最後のサイトのタイトルは「MT3.2」となっているけど、3.33でも使えてます。

それと、絵文字のimgタグには「mt_icon」というクラスが割り当てられるので、スタイルシートを適用できます。

では私がやったことを以下にメモ。

まずはBigPAPI.pというプラグインをインストール。
これは、Movable Typeの管理画面のHTMLを変更し、さまざまな追加機能を実現するベースとなるプラグイン。
一緒に絵文字のプラグインInsertIcon.plもインストール。

次にInsertIcon.plに同梱されていたmt_icon.jsをカスタマイズ。

var mt_icon_base = "http://画像のアップロード先のディレクトリ/";
var mt_icons = Array(
Array("ファイル名", "説明", 幅, 高さ),
Array("ファイル名", "説明", 幅, 高さ)
);

画像のアップロード先は何処でもいいみたいなので、ブログのindex.htmlがある場所に「icons」というフォルダを作ってその中に絵文字画像をアップした。
Arrayの「説明」は、altタグに入るもの。「幅」と「高さ」はピクセルで数字だけを入れる。
例)Array("hare.gif", "晴れ", 15, 15),
これが晴れ←コレ。

カスタマイズしたmt_icon.jsを「mt/mt-static/」に入れる。

以上。

emoji.png可愛い絵文字アイコンについては、素材屋さんとしては有名な「1キロバイトの素材屋さん」からお借りした。
他にも小さなアイコンはこちらにもありました。
クリックMini Pixel Icons
クリックBullet Madness

で。。。私はDoCoMoの絵文字が大好きなので、本当はDoCoMoと同じ絵文字を使いたい。
Fare Le Comunicazioni Sulla Rete Mobile:●エントリーにNTTドコモ絵文字を使用(MT3.2)ここで一括ダウンロードできる素材の中にDoCoMoアイコンがぎっしり同梱されているのだが、これって使っていいものなんだろうか。。。しかも二次配布ってこと?
ちょっと不安なので、諦めることにした。

【追記】コメントにも絵文字が使えるようにするには、こちらのサイトを参照。
PARADISE BLOG:コメントフォームで絵文字を導入
これはWONDER FROM MY NEST!では導入していません。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Movable Type Ver.3.3からの標準プラグイン“StyleCatcher"対応のテンプレートをただいま準備中です。

EXHIBITION

Copyright ©2006-2007 413DESIGN.