記事一覧

Web Diary Pro:コメント一覧でも絵文字を表示

※「Web Diary Proのコメント欄に絵文字をつける」のフォロー記事。
 コメント欄絵文字を実装後にお試しください。

ファイル 113-1.jpg

Web Diary Proの環境設定で、
「ログの表示設定」→「記事一覧にコメントの内容を表示」を
「表示する」に設定していると、
コメント欄につけた絵文字が[♪]のようになり表示されない、
ということがありましたので、解決策を。

1.「skin>diary.html」を開く

2.<!--SKIN_CMT_HEAD_START-->~<!--SKIN_CMT_HEAD_END-->の
  間に以下の強調部分を追加。

<!--SKIN_CMT_HEAD_START-->
<div class="list"><div id="comlist">
<h4>コメント一覧</h4>
<dl>
<!--SKIN_CMT_HEAD_END-->

3.<!--SKIN_CMT_START-->~<!--SKIN_CMT_END-->の
  間にある ${ARTICLE_TEXT} を以下のように<div>で囲む

<div class="com_text">${ARTICLE_TEXT}</div>

4.<!--SKIN_CMT_FOOT_START-->~<!--SKIN_CMT_FOOT_END-->の
  間に以下の強調部分を追加。

<!--SKIN_CMT_FOOT_START-->
</dl>
</div></div>
<!--SKIN_CMT_FOOT_END-->

5.「skin>footer.html」を開き、「コメント欄にも絵文字をつける」で
  記入したスクリプトに続けて、以下のものを追加する。

<!-- コメント一覧にも絵文字を表示 -->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'comlist';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'com_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>
<!-- コメント一覧にも絵文字を表示 ここまで -->

ちなみにここでは暫定的に「comlist」「com_text」などにしてありますが、
同じidで各箇所をそろえれば何でもかまいません。
他とidがかぶりそうな時には別物ものにしてもOKです。

TRACKBACK

COMMENT

■未承認 ... 2014/07/14(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/08/01(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/08(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/26(木) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2016/05/04(水) edit・delete

管理者にのみ公開されます。