ひとりごと

2004年05月28日

アレの応用

今日のお天気 hare.gif

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

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

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

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

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

このポップアップするウィンドーのテンプレート(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 />

の下に入れました。

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

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"」と決められてしまうので huh.gif と、こんな風になってしまいました。


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

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:
      [ 参考になりましたか? ] [ blog ]
blank_space
投稿者 hi^-^ro : 2004年05月28日 15:48 | トラックバック | Edit | Clip!! | このエントリーを含むはてなブックマーク


コメント 

うわぁ〜
これはまた大変^^;
私みたいに使用しているアイコンの数が多いとタグを書くのも疲れそう^^
別ウィンドウで表示させるよりこっちのほうがみてて楽しいけどね

Posted by: cafe at 2004年05月28日 16:07 ___ψ(‥ ) カキカキ

作業自体より、これを書く方が大変だったかも

Posted by: hi^-^ro at 2004年05月28日 16:26 ___ψ(‥ ) カキカキ

brタグがきかないんだけど・・なんでだろう?
コメントにhtmlをきかせるように設定してるから?
これを標準設定にするとbrは効くんだけど・・・アイコンがでなくなるし・・あちらをたてればこっちがたたず・・・

Posted by: cafe at 2004年05月29日 12:37 ___ψ(‥ ) カキカキ

トラバありがとうございました。

<br>タグですが
設定で「<br/>」と、スラッシュを入れないと反映されないようです。
私もコレで考えさせられましたよ

Posted by: hi^-^ro at 2004年05月29日 14:40 ___ψ(‥ ) カキカキ

あれ?
今、変なところからウィンドウが・・???

Posted by: cafe at 2004年05月29日 18:19 ___ψ(‥ ) カキカキ

先ほどの説明で誤りがありました。
<br/> じゃなくて br/ だけです。

あぁ、これはJavaScrpitを使って開かせているんです

Posted by: hi^-^ro at 2004年05月29日 23:43 ___ψ(‥ ) カキカキ
blank_space
コメントする




必須ですが表記はされません





たま〜にですが、「酢鶏」という人工無能によるコメント投稿があります。
可愛くも人工無能ですのでどんな投稿をするのかサッパリと分かりません。
ですのでコメント内容に関してはあまり気にしないでくださいね。
作者のLanタソさんに感謝! 





名前、アドレスを登録しますか?






blank_space
Trackback
Title: ポップアップコメントにもスマイリー^^
Excerpt: KANWAKYUDAI::Blog: コメントにスマイリー mugenさんがスマイリーパレットを別ウィンドウで出してコメントにペーストする方法を紹介されてます。 ここでは、若干の修正が必要でしたが、無事表示されて・・\(^o^)/ phpで呼び出すので、ポップアップでも大丈夫のようです...
From: Cafe's Weblog ☆ 珈琲たいむ
Date: 2004.05.29
blank_space

この記事に関する商品 by:amazon
blank_space

本日のリンク元
blank_space
829610449508753
カテゴリー
blank_space
Amagle PartnerNet
blank_space
お勧めAmazon
Amazon Web Services

Amazon Web Services

2017綛1020 憜
  若悟 / 6104495若娯賢   罨<若
blank_space
リンク

クルマの部屋

本家のサイトだす(*゚д゚)
とほほのWWW入門
PHP マニュアル
レッツPHP!
できるCGI
TohrudcFamilyPage
コロボースキンDL
昨日 今日 明日
† Atelier Kanon †
Yahoo! JAPAN
Google ニュース 日本版

☆クルマ&ブログ仲間☆
GARAGE ODYSSEY
アエラスSとオレ物語
FULL-SCRATCH
ody industrial
サイコドライブblog
カービュー






track feed












Sony Style(ソニースタイル)

オートバックスドットコム

犬・猫の総合情報サイト『PEPPY(ペピイ)』

アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

【車買取ガリバー】高価買取ならガリバー

価格.com 自動車保険 一括見積り





RSS feed meter for http://blog.vaioclub.com/

QLOOKアクセス解析
blank_space
Powered by
blank_space