ひとりごと

昨日のお天気アイコンを付けた時の応用で、コメント欄にもスマイリー・・・で書きましたスマイリーアイコンを
エントリーの新規投稿にも付けてみました

と、これは単なる自分だけの応用であり、本来の目的じゃないんだってば〜

では、本題に
コメント欄にもスマイリーアイコンを入力できるのは「最近のエントリー」の“Individual Entry Archive”からしかできなく
ポップアップするウィンドーから出来なかったのを出来るようにさせました。

こ〜んな感じ　コメント　←クリックしてみて♪
スクリプトエラーが出るので中止（出ていても動作には支障ありませんでしたけど気分が良くないため）

下の「コメント」をクリックしてポップアップウィンドーから見てちょん

このポップアップするウィンドーのテンプレート（Comment Listing Template）に
昨日の応用で入れるようにしました。

Comment Listing Templateファイルのアイコンを表示させたいところに

<script language="javascript">
function nikotyanIcon(nIcon) {
document.entry_form.text.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text='<img src="<$MTBlogURL$>images/smilies/'+ nIcon +'" alt="'+ nIcon +'" width="15" height="15" style="margin:0px 2px;border-style:none;">';
}
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0">');
document.write('<tr>');
document.write('<td>');
document.write('<a href="javascript:nikotyanIcon(\'angry.gif\');"><img src="<$MTBlogURL$>images/smilies/angry.gif" alt="angry.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'cheesy.gif\');"><img src="<$MTBlogURL$>images/smilies/cheesy.gif" alt="cheesy.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'cool.gif\');"><img src="<$MTBlogURL$>images/smilies/cool.gif" alt="cool.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'cry.gif\');"><img src="<$MTBlogURL$>images/smilies/cry.gif" alt="cry.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'embarassed.gif\');"><img src="<$MTBlogURL$>images/smilies/embarassed.gif" alt="embarassed.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'grin.gif\');"><img src="<$MTBlogURL$>images/smilies/grin.gif" alt="grin.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'huh.gif\');"><img src="<$MTBlogURL$>images/smilies/huh.gif" alt="huh.gif" width="15" height="22" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'kiss.gif\');"><img src="<$MTBlogURL$>images/smilies/kiss.gif" alt="kiss.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'laugh.gif\');"><img src="<$MTBlogURL$>images/smilies/laugh.gif" alt="laugh.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'lipsrsealed.gif\');"><img src="<$MTBlogURL$>images/smilies/lipsrsealed.gif" alt="lipsrsealed.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'rolleyes.gif\');"><img src="<$MTBlogURL$>images/smilies/rolleyes.gif" alt="rolleyes.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'sad.gif\');"><img src="<$MTBlogURL$>images/smilies/sad.gif" alt="sad.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'shocked.gif\');"><img src="<$MTBlogURL$>images/smilies/shocked.gif" alt="shocked.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'smiley.gif\');"><img src="<$MTBlogURL$>images/smilies/smiley.gif" alt="smiley.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'tongue.gif\');"><img src="<$MTBlogURL$>images/smilies/tongue.gif" alt="tongue.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'undecided.gif\');"><img src="<$MTBlogURL$>images/smilies/undecided.gif" alt="undecided.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('<a href="javascript:nikotyanIcon(\'wink.gif\');"><img src="<$MTBlogURL$>images/smilies/wink.gif" alt="wink.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
document.write('</td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write('');
}
</script>

とすれば表示されます。（太字部分はお天気アイコンより変更箇所）
ちなみに私は

<label for="text">コメント:</label><br />

の下に入れました。

無事表示ができ、喜んだのも束の間・・・
全て同じ大きさのアイコンならこれで良かったのですが
←これだけは高さが違うアイコンでして

range.text='<img src="<$MTBlogURL$>images/smilies/'+ nIcon +'" alt="'+ nIcon +'" width="15" height="15" style="margin:0px 2px;border-style:none;">';

このような記載方法ですと「width="15" height="15"」と決められてしまうので と、こんな風になってしまいました。

そこで、アイコンの高さをそれぞれ取得させるようします。
上記に記載した更なる変更箇所は

function nikotyanIcon(nIcon) {
　　　　　　　　　↓
function nikotyanIcon(nIcon,w,h) {

range.text='<img src="<$MTBlogURL$>images/smilies/'+ nIcon +'" alt="'+ nIcon +'" width="15" height="15" style="margin:0px 2px;border-style:none;">';
　　　　　　　　　↓
range.text=' <img src="<$MTBlogURL$>images/smilies/'+ nIcon +'" alt="'+ nIcon +'" width="' + w + '" height="' + h + '"> ';

document.write('<a href="javascript:nikotyanIcon(\'angry.gif\');"><img src="<$MTBlogURL$>images/smilies/angry.gif" alt="angry.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');
　　　　　　　　　↓
document.write('<a href="javascript:nikotyanIcon(\'angry.gif\',\'15\',\'15\');"><img src="<$MTBlogURL$>images/smilies/angry.gif" alt="angry.gif" width="15" height="15" style="margin:0px 2px;border-style:none;" /></a>');

（太字部分でアイコンの大きさを指定。以下アイコンの数だけ変更する）
これでどの大きさのアイコンも大丈夫と！

本当にこんな事して楽しいのだろうかと、ふと脳裏を横切るのであった(-_-;)

このエントリーのトラックバックURL: