JavaScript コメントに絵文字・・・ | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

JavaScript コメントに絵文字・・・

最初に断っておきます・・・


たぶん・・ 使えません?

てか・・あまり使い道がないので使おうと思わないと思います・・・


ぐだぐだと前置きが長くなります?


面倒な方はスルーください




最初は・・・回答をするときに赤字を使えたら

回答もしやすいし(書くのは面倒なんですが・・)

回答をもらった方もわかりやすいし・・・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

こんな回答ならすぐにわかるでしょ・・・・



そのついでの副産物?として

このブログのコメントの !がビックリマークに ? がはてなマークに勝手に変わるようになっています



記事に書くかどうか迷っていたときにリクをいただいたのですが・・・

こうやって記事を書いている最中でもまだ・・どうしようか迷っています・・



と・・いうのも・・・

本来の目的・・文字色を変更するのは面倒なんです・・

で・・一番困るのがfontタグの閉じ忘れ・・

この場合・・それより下・・全部の文字色が変わってしまいます


自分で書いたコメントなら書き直せばいいのですが

ゲストさまからのコメントで閉じ忘れがあったら

アメブロの仕組みでコメントの訂正が出来ない以上・・

せっかくいただいたコメントでも削除するしか方法はありません


・・・なので

文字色を変更できますよ~ってブログでやりかたを公開することはやめた方がいいと思います

結局・・やり方を知っている本人だけしか色を変更することは出来ません

しかもチョット面倒です・・・



じゃあ・・絵文字は?


このブログの場合・・ コメントの中で (ベル) って書くとベル に置き換わるようになっています

これは閉じるタグとか必要ありませんので自由に使っていただいてかまいません

が・・ ( は 全角の ( で 半角の ( では変わりません

コメントの中に (ベル)なんて変換されないで残っちゃうと・・おかしなことです

(笑)が ニコニコ なら・・もし変換されなくても別に違和感はないのですが・・



ピグに使っている絵文字は・・・

設定すれば /panda を パンダ にしちゃうことも出来ます

ただ・・全部を変更できるようにも出来るのですが

そうするとブログを開くたびに全部の文字を種類分チェックする必要があってブログが重くなります

また・・フリープラグインの文字数の関係で全部を設定することは不可能です


といって・・ /panda だけできますよ・・・なんて注意を書いても

コメントに パンダ なんかが表示されていたら

大丈夫と思って /nekohebi  だって使っちゃいますよね・・・

でも・・使われても変換されませんのでコメントの中に /nekohebi って残っちゃうわけだし・・・


中途半端に設定するなら使わないほうがいいと思うんです



で・・・ 使えるのは・・

普通の文章が自然に絵文字になる場合だけです

たとえば・・携帯電話ってコメントの中にあったら 携帯って自動で変えちゃうのが一番自然なんです


ただ・・ コメントの中に「携帯電話」って単語が何回使われていますか?

1年に2.3回しか出てこない単語のために毎回チェックしてブログを重くする必要はないですよね・・


結果・・ 普段いつも使われている ! や ? を絵文字にするしかないです

案外使われている w これも絵文字に出来ますが・・
HTMLやCSSをコメントに書いたときにもかわっちゃうからNG

(HTMLとかCSSとかをコメントに書く場合もあると思いますので全角の!や?だけ変わります)



これって使い道あります?

それでも使ってみたいと思いますか?



これだけ書いても・・・ 

でも・・やっぱし使ってみたいんだよ~・・・って方は

ついでにコメントの無題も変更できるようにしておきました



フリープラグインに・・・


<script language="javascript">
<!--

$(function(){
var el = $('#comment_module');
var eltm = el.html();
eltm = eltm .replace(/■無題/g, "★題無し・・");
eltm = eltm .replace(//g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/040.gif'>");
eltm = eltm .replace(//g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/039.gif'>");
el.html(eltm);
});

// -->
</script>



★題無し・・ 
は コメントタイトルが入力されていない場合に表示される ■無題 を変更します

自由に設定してかまいません

!や?も違う絵文字に変更しちゃってもOKです


ベルでしたら・・・

eltm = eltm .replace(/(ベル)/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/182.gif'>");
パンダでしたら・・・
eltm = eltm .replace(/
\/panda/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/006.gif'>");


はじめの / / の間に書かれている文字が

"" の間に書かれているものに置き換わります

文字でも画像でも可能ですが "と"に中には ' と ' しか使えません・・画像を入れる場合注意下さい

"<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/006.gif' >"

好きなのを追加していってください・・ 

追加のしすぎは重くなるだけですので注意下さい・・



ソースをみればこのブログでどうすれば赤字が使えるのかがわかります

タグを絶対に閉じるって方だけ使ってかまいませんよ・・

(ベル) は自由に使ってかまいません・・・



半角と全角の( がわかりにくかったです・・・

もっとはっきりわかる違うのにすればよかったです・・・・【ベル】みたいに・・

もう・・コメントの中で使っちゃっていますからいまさら変更できないしね・・

みなさまはそんなことのないようにはじめによ~く考えてください



それでもコメントの文字色を変更したい!って方はコメント下さい・・

直接コメントで教えます・・・・ たぶん?



アメブロを見るんならJavaScriptを使っているでしょ・・って前提でやっています・・

ただ・・

あぁ~・・・ jquery で this がよくわからなくなっています?

うまく行ったときはすっごくキレイでやった!って思うのですが・・

ヘンなふうにはまってしまうと軌道修正がききません・・力不足です

難しいのか簡単なのか・・それすら理解できないです・・・

間違っていたら教えてください m(_ _)m