白文MIMI與小鸚KIKI的生活記事_水滴飼料庫

在FC2回應欄加上繪文字終於試成功!!感謝日本的stroll::blog，發明這麼好用的東東，這隻程式是stroll::blog寫的，小倩在這裡用中文的方式介紹給大家，另外也感謝在vera在emmily家提供這個資訊

◎本教學來源(日本的stroll::blog)：http://melrose.jugem.cc/?eid=199

• 難易度： 難，建議具備HTML和CSS基礎者嘗試，建議在試本篇之前先試成功在FC2的文章發表時加上繪文字這篇
• 可使用的BLOG： 可編輯完整的樣版HTML檔，且回應欄禁止使用HTML語法的BLOG(回應欄可用語法的BLOG可直接用貼圖語法插入繪文字圖片)
• 注意事項： 回應數量太多時,繪文字的轉換時間也會變長，同樣的道理，繪文字如果登錄太多時也會影響到顯示速度，所以建議不要放太多繪文字上去(不要超過２０個)．
• 準備繪文字： 準備繪文字圖片，並上傳到FC2的檔案庫內， 此部份請見之前的相關教學，請不要再在本篇問這類的問題
• 請留意共有三段SCRIPT程式需要加入到樣版的HTML檔內，在修改前建議您先備份原本的樣版HTML檔
• 樣版的HTML如何進入和修改請見：中文化教學這篇

＊設置方法－指定繪文字的圖片路徑及名稱
程式一：(以下程式需修改畫像名和畫像URL)：

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 修改以下設定：繪文字的名稱(画像名)和繪文字的URL(画像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>

修改範例：
// 繪文字的名稱和繪文字的URL設定範例(為了避免非漢字的中文轉換失敗,建議畫像名不要用中文字)
list[list.length] = new Array('f10', 'http://blog6.fc2.com/p/petlife/file/f10.gif');
list[list.length] = new Array('f09', 'http://blog6.fc2.com/p/petlife/file/f09.gif');
上述的語法修改好請放到樣版HTML檔的</head>的上一行

程式二：(以下程式需修改（２）（３）)：

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）回應欄全體的ID
var commentAreaIdName = '';
// （２）回應欄的HTML Tags
var commentAreaTag = 'div';
// （３）各回應欄的CLASS名
var commentBodyClassName = 'abc';

// ***************** 設定ここまで *****************
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>

需修改的部份：（２）回應欄的HTML Tags（３）各回應欄的CLASS名
搜尋樣版HTML裡的這個字<%comment_body>，並留意這句前後的語法

範例一(小熊系列樣版):<div class="entry_text"><%comment_body></div>
（２）回應欄的HTML Tags
var commentAreaTag = 'div';
（３）各回應欄的CLASS名
var commentBodyClassName = 'entry_text';

範例二(spring_flower):<p><%comment_body></p>，如果你的<%comment_body>前面的標籤並沒有設定class名，請自訂一個名字，如：abc
自訂一個class名，改成：
<p class=abc><%comment_body></p>
（２）回應欄的HTML Tags
var commentAreaTag = 'p';
（３）各回應欄的CLASS名
var commentBodyClassName = 'abc';

範例三(cafe):<div class="td"><%comment_body></div>
（２）回應欄的HTML Tags
var commentAreaTag = 'div';
（３）各回應欄的CLASS名
var commentBodyClassName = 'td';

本段程式的放置位置：加在<!--/comment-->的前一行...

＊回應表單繪文字圖片的顯示－設置方法
程式三：(以下程式需修改回應欄位的指定)：

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// 本段程式需修改此：回應欄位的指定
var textarea = 'document.comform.leavecomment';

// ***************** 設定ここまで *****************
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>

修改方式：
先搜尋樣版HTML檔的<form method="post" action="./">
將form加上name的屬性,修改後成為：<form name=comform method="post" action="./">

搜尋comment[body]這個字，查看裡面的id的值：
範例一：<textarea id="comment" cols="35" rows="8" name="comment[body]"></textarea><br>
id則為：comment
將上面的這一行改成
var textarea = 'document.comform.comment';

範例二：
<textarea id="leavecomment" cols="50" rows="8" name="comment[body]" tabindex="4"></textarea>
id則為：leavecomment
將上面程式的的這一行改成
var textarea = 'document.comform.leavecomment';

修改完成後將這段SCRIPT 放到剛才的回應框語法<textarea id="comment"...> 這段的前面，這樣顯示出來的繪文字會才會在回應內容輸入框的正上方．

• 回應欄上面的表情符號圖片變成叉燒包-請檢查程式一的圖片路徑
• 回應欄上面已經會出現表情符號的小圖了,但點了不會帶到回應框裡-程式三的var textarea = 'document.comform.leavecomment';設定錯誤.
• 回應內容不會轉成表情符號-程式二的(1).(2).(3)設定錯誤,或SCRIPT放錯位置
• 改樣版時,請重新將本語法COPY進新樣版,並重新確認,程式二和三需要修改的值