本文でも絵文字を使う
KOROPPYさんのところで
「ココログ本文で絵文字を使う方法」
という記事を読んで
早速、導入してみました![→◇←]
ただ、あまり同じようなスクリプトを増やしたくなかったのと
1つのHTMLに同じ関数名が複数あるときの
JavaScriptの動きがどうなるか不安だったので
(よく考えたら、やってみれば分かるのに・・・)
もともとKOROPPYさんのところの記事を読んで導入していた
「テンプレートをいじらずにコメント欄で絵文字を使う方法」
にある手順4のスクリプトをコピーするのではなく
手順4のスクリプトを改良する方法にしてみました。
KOROPPYさんのところの手順4のスクリプトとの相違点は
「★ここを追加」とある次の命令のところだけです。
KOROPPYさんのところの2つの記事の差分から修正したので
たぶん修正箇所は問題ないと思います。
<script type="text/javascript">
<!--
// ◆コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'center';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comment-body';
//★ここを追加
var entryBodyTextClassName = 'entry-body-text';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
//★ここを追加
if (classComArea[i].className == entryBodyTextClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}// ●[~]を絵文字出力タグに変換
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
なお、2つめの「★ここを追加」は、
説明しやすいように、このようにしましたが
if (classComArea[i].className == commentBodyClassName || classComArea[i].className == entryBodyTextClassName) objComBody[objComBody.length] = classComArea[i];
と2つのif文を1つにまとめても良いかもしれません。
また、KOROPPYさんの記事の【追記】にあるように
IE6.0 → ○
Opera → ○
firefox1.5 → ×
Netscape7.1 → ×
なようです。
残念ながら、かげさんのマシンには
IE系のLunascapeというブラウザしか
入っていないので他のブラウザでは確認できてません。
2006/02/08追記
KOROPPYさんの最新記事によると
URL Breaker Plusというものと相性が悪かったようです。
| 【固定リンク】 | 【コメント (2)】 | 【トラックバック (1)】
このエントリーへのリンク
トラックバック
この記事へのトラックバックの一覧です: 本文でも絵文字を使う:
» ココログ本文で絵文字を使う方法(改訂版) [KOROPPYの本棚から]
前回の「ココログ本文で絵文字を使う方法」は、全てのブラウザに対応できなかったので、新しい方法にしました。 注意点としては、URL Breaker Plusを外すことです。 こちらは相性が悪いようで、firefoxやNetscapeで絵文字が表示できなくなってしまいます。 「テンプレートをいじらずにコメント欄で絵文字を使う方法」を導入していることが前提です。 1.手順4のスクリプトの「各コメントの class 属性」を「entry」へ変更します。 // (3)各コメントの class 属性 var c... 続きを読む
受信: 2006/02/08 10:14:41
コメント
このブログの新着コメントをRSSリーダに登録する為のxmlトラバは上手く受信できていなかったようで、
お手数をおかけして申し訳ありません[→V←]
こちらでつなげておきました。
こちらの方法はスマートですね~[☆_☆]
IEもFirefoxも表示できてます。
ご指摘のように、ただ同じものを貼り付けたのでは、
全てのブラウザ対応にはならないようです[冷や汗]
改めて別の方法にしたところ、成功しているようなので、
後ほど記事にまとめなおしたいと思っています。
そのときかげさんの方法も併せてご紹介させていただきますね。
投稿者: KOROPPY (2006/02/08 7:38:19)
To:KOROPPYさん
> トラバは上手く受信できていなかったようで、
> お手数をおかけして申し訳ありません[→V←]
> こちらでつなげておきました。
対応、ありがとうございます![☆_☆]
> IEもFirefoxも表示できてます。
Firefoxでも表示できるんですね。
かげさんは、ほかのブラウザを入れてないんで
貴重な情報です。
確認していただきありがとうございます。
> 改めて別の方法にしたところ、成功しているようなので、
> 後ほど記事にまとめなおしたいと思っています。
> そのときかげさんの方法も併せてご紹介させていただきますね。
わーい、ありがとうございます!
投稿者: かげさん (2006/02/09 1:47:04)