MT覚え書き：エントリーにアイコン　モニャピロセカンドシステム

2006/10/14 Sat

■このエントリーはMTを使っていた頃の覚え書きです■

最近、知り合いがいきなりブログ（MovableType）を始めて、いろいろ相談されることが多くなったのですが、（いや、私も始めたばかりなんですが。。。）この間いきなり、、、
「あの絵文字どうやったら出るの？」と聞かれたので、
「あ、普通（テンプレート修正程度かな？）は出ません」と、、、
「だから、どうやったら出るの？」、
「か、改造です」、
「んじゃ、よろしく！」
「・・・」
ってなわけで、いろいろご紹介。
とりあえずウチでもエントリーにアイコン表示を使う使わないはさておき、試しに設置してみることに。（って思いっ切り使ってるジャン！ってお約束もはさみ）
ちなみにウチではコメントにアイコンを使っているので、そのアイコンを流用したいと思います。

参考サイトは、
「[魔] Magic White: エントリーに絵文字アイコンを入れる」さんと、
「[な] エントリ時に投稿状態の確認ってしてますか?」さんとこです。

プログラム・詳細は、
「chiricoyet :: MT」さんからダウンロードします。

ウチで使ってるアイコンは、
「TRIPPER'S GARAGE - フリー素材のガレージ」さんと、
「.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE」さんの素材を使用させていただきました。

ダウンロードしたファイル（フォルダ）、アイコンを用意。
まずはダウンロードした「macromedia2」フォルダに入っている「Icon.js」ファイルを修正。

function Icon(wIcon) {
document.entry_form.text.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text='<img src="http://teamnigoi.tolamy55.com/macromedia2/Icons/'+ wIcon +'" alt="'+ wIcon +'" style="margin:0px 2px;border-style:none; vertical-align:middle;">';
}
if (document.selection) {

document.write('<table><tr><td>');

document.write('<a href="javascript:Icon('nigoi.gif');"><img src="http://teamnigoi.tolamy55.com/macromedia2/Icons/nigoi.gif" width="30" height="17" alt="ニゴイ" style="margin:0px 2px;border-style:none; float:left;" /></a>');

（以下、同じような感じで）

document.write('<a href="javascript:Icon('アイコンファイル名');"><img src="アイコンのURL（ファイル名込み）" width="アイコン横サイズ" height="アイコン縦サイズ" alt="アイコンの名前" style="margin:0px 2px;border-style:none; float:left;" /></a>');

document.write('</td></tr></table>');
} else {
document.write('');
}

次に同じように、「macromedia2」フォルダに入っている「IconMore.js」ファイルを修正。

function moreIcon(wIcon) {
document.entry_form.text_more.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text='<img src="http://teamnigoi.tolamy55.com/macromedia2/Icons/'+ wIcon +'" alt="'+ wIcon +'" style="margin:0px 2px;border-style:none; vertical-align:middle;">';
}
if (document.selection) {

document.write('<table><tr><td>');

document.write('<a href="javascript:moreIcon('nigoi.gif');"><img src="http://teamnigoi.tolamy55.com/macromedia2/Icons/nigoi.gif" width="30" height="17" alt="ニゴイ" style="margin:0px 2px;border-style:none; float:left;" /></a>');

（以下、同じような感じで）

document.write('<a href="javascript:moreIcon('アイコンファイル名');"><img src="アイコンのURL（ファイル名込み）" width="アイコン横サイズ" height="アイコン縦サイズ" alt="アイコンの名前" style="margin:0px 2px;border-style:none; float:left;" /></a>');

document.write('</td></tr></table>');
} else {
document.write('');
}

コピペしたとしても、一部”more”が入ってるので注意しながら。

で、改行・文字コード（アイコンの名前に日本語を使用してる場合）に注意し、保存後、ブログの設置したブログのURL以下に「macromedia2」を作り、その中に「Icon.js」「IconMore.js」と、使用したいアイコンを入れた「Icons」フォルダごとアップ。もちろん上で記述したURLとあわせる。

次に、MTディレクトリ内の「/tmpl/cms/edit_entry.tmp」lと「/tmpl/cms/bm_entry.tmpl」を修正しやす。

「edit_entry.tmp」をテキストエディタで開き、検索機能で「name="text"」を探し、

<textarea class="full-width" name="text" id="text" tabindex="3" rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10<TMPL_ELSE>20</TMPL_IF>"><TMPL_VAR NAME=TEXT ESCAPE=HTML></textarea>

の直下に、

<script src="/macromedia2/Icon.js"></script>

を追加。
次に、検索機能で「name="text_more"」を探し、

<textarea class="full-width" name="text_more" id="text_more" tabindex="4" rows="15"><TMPL_VAR NAME=TEXT_MORE ESCAPE=HTML></textarea>

の直下に、

<script src="/macromedia2/IconMore.js"></script>

を追加。
次に「bm_entry.tmpl」をテキストエディタで開き、検索機能で「name="text"」を探し、

<label for="text"><MT_TRANS phrase="Entry Body"></label><br />
<textarea name="text" id="text" style="width: 100%;" rows="<TMPL_IF NAME=SHOW_TEXT_MORE>6<TMPL_ELSE>14</TMPL_IF>"><TMPL_VAR NAME=TEXT ESCAPE=HTML></textarea>