タグが使えないコメント欄でも絵文字を可能にする
「stroll::blog」さんのスクリプトです。
それに「6畳一間に魚とカメとヒト2人」さんの解説を元に、
Web Diary Proのコメント欄につける場合をメモ。
※使用にあたっての注意など、「stroll::blog」さんの記述を
ご覧になってお使い下さい。
また、参考にしました両サイト様に感謝です。
参考≫
stroll::blog | コメントにカスタマイズ絵文字入力機能
迷える子羊 | Ver4.10 絵文字入力機能設置方法
■コメント欄に絵文字を追加する■
１．画像設定スクリプトの設定
「skin＞header.html」を開き、<head>～</head>内に次の
スクリプトを記入する。
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
return list;
}function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>
※太文字部分をそれぞれ書き換えてください。
「画像名」がそのまま絵文字のalt属性になります。
その他追記したい属性は「画像タグに含める属性値」へ。
ここの属性はそのまま弄らなくとも問題ありません。
２．「skin＞comment.html」を開き、28行目あたりにある
formタグに次の箇所を追加。
<form action="${INFO_PATH}" method="post"
id="comment_form">
<fieldset>
<legend>投稿フォーム</legend>
↓
<form action="${INFO_PATH}" method="post"
id="comment_form" name="comform">
<fieldset>
<legend>投稿フォーム</legend>３．画像リスト出力スクリプトを入れる
同じく「skin＞comment.html」内のＵＲＬ用フォーム近くに
次のソースを入れる。
<dt>ＵＲＬ</dt>
<dd><input type="text" name="url" size="30" value="${FORM_URL}" /></dd><!-- コメント欄に絵文字を追加 -->
<dt>絵文字</dt>
<dd><script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.text';// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>
</dd>
<!-- コメント欄に絵文字を追加 ここまで -->
※太字部分は「stroll::blog」さんのところのスクリプトを
Web Diary Pro用に書き換えてあるところです。
スキンによってidが異なる場合は書き換えが必要ですが、
普通ならば上記のままでＯＫです。
４．画像変換スクリプトの設定
「skin＞footer.html」を開き、次のソースを</body>の直前に
入れる。
<!-- コメント絵文字用スクリプト -->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comment';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = '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];
}
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>
<!-- コメント絵文字用スクリプトここまで -->
※太文字の部分が「stroll::blog」さんと
「6畳一間に魚とカメとヒト2人」さんの説明とは異なる部分です。
コメント欄にこのスクリプトを適用するので
'comment'となっています。
これでコメント欄に絵文字が追加されました。
ただし、このスクリプトはコメント数が多くなると、
「画像への変換処理に時間がかかり、
また、登録した画像の数が多すぎても同様」
とのことですので、絵文字の登録しすぎに気をつけてください。
+ + + + + + + + + + + + + + + + + + + + + + + + + +
■「コメント一覧を表示する」にすると絵文字がでません。
⇒「コメント一覧でも絵文字を表示」をご覧下さい。
■「タグエディタで絵文字を挿入」と併用できる？
⇒問題なく使用できます。
スクリプトを沢山入れると、それぞれが影響して使えないものが
でてくる場合がありますが、私が実験したところどちらも
問題なく利用できます。
「6畳一間に魚とカメとヒト2人」さんではタグエディタ絵文字の代わりとして
このスクリプトを利用していましたが、その場合では
管理人の書いた日記の内容のみしか絵文字が変換されませんでした。
設定の仕方によっては両方ともこのスクリプトで絵文字が
追加できるかもしれませんが、自分にはちょっと分からないです。
※追記：「迷える子羊」さんで
絵文字機能を管理者＆コメント欄に併用する方法が公開されました。
管理画面で絵文字imgタグがずらずら描き込まれるのが嫌だ！
という方にはおすすめの機能です。