在FC2回應欄加上繪文字

 12, 2005 11:40

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

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

  • 難易度: 難,建議具備HTML和CSS基礎者嘗試,建議在試本篇之前先試成功在FC2的文章發表時加上繪文字這篇
  • 可使用的BLOG: 可編輯完整的樣版HTML檔,且回應欄禁止使用HTML語法的BLOG(回應欄可用語法的BLOG可直接用貼圖語法插入繪文字圖片)
  • 注意事項: 回應數量太多時,繪文字的轉換時間也會變長,同樣的道理,繪文字如果登錄太多時也會影響到顯示速度,所以建議不要放太多繪文字上去(不要超過20個).
  • 準備繪文字: 準備繪文字圖片,並上傳到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>的上一行


*回應欄繪文字的轉換-設置方法

程式二:(以下程式需修改(2)(3)):

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)回應欄全體的ID
var commentAreaIdName = '';
// (2)回應欄的HTML Tags
var commentAreaTag = 'div';
// (3)各回應欄的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>


需修改的部份:(2)回應欄的HTML Tags(3)各回應欄的CLASS名
搜尋樣版HTML裡的這個字<%comment_body>,並留意這句前後的語法

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

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

範例三(cafe):<div class="td"><%comment_body></div>
(2)回應欄的HTML Tags
var commentAreaTag = 'div';
(3)各回應欄的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進新樣版,並重新確認,程式二和三需要修改的值

COMMENT 58

小倩  2005, 05. 13 [Fri] 15:47

Dear jovy :
是你的CSS設定問題,
把兩個CSS裡的border:1px改成border:0px
.entry_text img
.pay img
Dear Lady Ruffle :
我也是正好發現,放上去試試看,我還沒在中文的BLOG測,如果中文的BLOG也能支援的話,可能會大力的推薦給大家,但目前測加入FC2的BLOG就會輪撥大家的標題.

Edit | Reply | 

小豬白  2005, 06. 13 [Mon] 15:54

小倩..小豬實在是太笨了>"<
把完整的語法貼上來讓小倩幫小豬看一下~
下面是我的回應語法
<tr>
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// 本段程式需修改此:回應欄位的指定
// ***************** 設定ここまで *****************
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>
</tr>
<tr>

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 20:08

好唄!
自已來招供到底是怎麼一回事。[f09]
本來一次就設好了,結果東改西改的,
有問題。後來找記事本的檔案來貼時,
卻一堆錯誤,
除了程式二的地方之外,
自已把程式三要改的東西貼錯了。[f01]
果然不適合愛改版的人用。(指)
感謝小倩的幫忙。[f10]

Edit | Reply | 

小倩  2005, 06. 18 [Sat] 14:13

恭喜喔!!那太好了...

Edit | Reply | 

小倩  2005, 05. 12 [Thu] 11:43

測試一下...[f07][f10]

Edit | Reply | 

Emily  2005, 05. 12 [Thu] 14:07

我怎麼弄都是叉燒包圖耶[f05]
確定圖檔位置沒錯
每個步驟也都重新注意過了還是一樣[f01]

Edit | Reply | 

小倩  2005, 05. 12 [Thu] 15:04

是回應欄上面的表情符號圖片出不來嗎?
可以貼一下這裡設的語法出來嗎?
list[list.length] = new Array('画像名', '画像URL');

Edit | Reply | 

jovy  2005, 05. 12 [Thu] 16:04

不可以咧..小倩
我的回應欄上只會出現表情圖的名稱而已呢
而且表情圖也有框線[f10]

Edit | Reply | 

Emily  2005, 05. 12 [Thu] 17:06

我找到原因啦!
原來我乎略了'畫像名' 這個東東[f05]
感謝妳囉[f03]

Edit | Reply | 

小倩  2005, 05. 12 [Thu] 18:42

恭喜Emily試成功了[f09]
Dear jovy

Edit | Reply | 

桌子  2005, 05. 12 [Thu] 20:28

好的,無論有艱難我一定要弄成功,哼哼!!!![f01]

Edit | Reply | 

大隻喵  2005, 05. 12 [Thu] 22:20

哇~~這個看起來好難喔......
(我是電腦白癡喵)
不過看到小倩及其他網友們這麼用心地加上這些繪文字讓blog更生動
就覺得你們真是太棒了!!
一定要大大的拍手一番~~
(((((((((((拍))))))))))))))))))
太棒太棒了!!
^_______________^
[f10][f10][f10][f10][f10][f10]

Edit | Reply | 

小倩  2005, 05. 12 [Thu] 23:20

之前看日文說明在試時真的很辛苦,一下子按了圖不會出現在回應欄裡,一下子回應內容上的繪文字不會轉成圖...
不過後來研究出它的邏輯之後就簡單多了,所以現在應該不會太複雜,但可能不適合常改樣版的人吧![f09]

Edit | Reply | 

桌子  2005, 05. 12 [Thu] 23:32

耶 [f10]v 成功了!!!!!
thank you 小倩

Edit | Reply | 

Lady Ruffle  2005, 05. 13 [Fri] 11:40

那個paipo reader真的很棒耶,多謝処ン的好介紹!!

Edit | Reply | 

jovy  2005, 05. 13 [Fri] 11:42

是成功了
可是為什么會有框線呀

Edit | Reply | 

scarlet  2005, 05. 13 [Fri] 19:46

太深奧了,最近小忙,沒空研究。[f01]
不過,有這個還真是可愛。[f09]

Edit | Reply | 

桌子  2005, 05. 13 [Fri] 23:18

小倩,那個paipo reader我也跟著你的腳步註冊了一個,的確很好用,也嘗試抓天空部落的 RSS也成功了,不過怎麼我試來試去只能設三個 RSS 網址,加第四個時不管怎樣也加不進去,到底是什麼理由[f01]

Edit | Reply | 

小倩  2005, 05. 14 [Sat] 00:37

Dear scarlet
等你有空時再來研究吧!以你的功力一定可以馬上成功的。
Dear 桌子
不會呀!我加入七個網址了,有可能是你第四個網址的RSS有問題。
如果輸入BLOG的網址時,它抓不到正確的RSS的話,你可以直接輸入RSS的位置,像目光的我輸入0.92版的才成功.

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 11:02

scarlet

被你說中了[f07]!
我還真的一次就成功了![f06]
小倩真是太了解我了。[f09]

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 11:05

不過,這個真是太勞師動重了!
我看以後可能不太敢換版面![f10]

Edit | Reply | 

小倩  2005, 05. 14 [Sat] 13:09

原網站寫的比較複雜,而且不是針對FC2來寫的,所以之前在研究哪一段加在哪時花了一些時間,還參考了另一間有加回應繪文字的FC2的日本BLOG的原始碼才試成功,但了解規則後還滿簡單的,只是每換一次版面就要加一次...而且還要對對看CSS的參數有沒有改,這也是滿累的...

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 13:27

實在挺活該的。[f01]
被我亂改,又不能用了[f04]

Edit | Reply | 

小倩  2005, 05. 14 [Sat] 13:35

注意Form的name有沒有設,以及程式二的那幾個值有沒有修改

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 15:27

// (1)回應欄全體的ID
這是指什麼?

Edit | Reply | 

小倩  2005, 05. 14 [Sat] 18:08

(1)回應欄全體的ID
這個可以不用輸入,寫了反而容易錯,他是用CSS繼承的概念.

Edit | Reply | 

scarlet  2005, 05. 14 [Sat] 18:47

<br>

Edit | Reply | 

小倩  2005, 05. 14 [Sat] 19:32

<br>
改成下面這樣試試看
<br>
然後(1).(2).(3)改成這樣
// (1)回應欄全體的ID
// (2)回應欄的HTML Tags
// (3)各回應欄的CLASS名

Edit | Reply | 

約克夏飼主  2005, 05. 17 [Tue] 07:46

[f02]呵呵
這個一看就知道小弟我玩不起....
好像天書哦[f09]

Edit | Reply | 

小倩  2005, 05. 17 [Tue] 16:11

還好啦~但真的不建議常換樣版的人用

Edit | Reply | 

小倩  2005, 05. 29 [Sun] 19:15

不客氣!!不過程式二那裡的語法真的不好找...所以你後來用abc的那個方法算是最省事的.

Edit | Reply | 

流光  2005, 05. 29 [Sun] 16:42

我終於設好了,謝謝小倩的詳細解說。

Edit | Reply | 

小豬白  2005, 06. 13 [Mon] 23:09

我成功囉!
謝謝小倩哦[f10]

Edit | Reply | 

Raining  2005, 06. 09 [Thu] 01:35

嘻嘻!!我也成功囉=v=~感動!!
謝謝小倩唷[f10](親一個)

Edit | Reply | 

小倩  2005, 06. 09 [Thu] 09:34

恭喜喔!!不過自從加了這些有的沒的東西後,我就很懶得再換樣版了...

Edit | Reply | 

小豬白  2005, 06. 13 [Mon] 02:44

謝謝小倩的教學,小豬剛試用ok了耶!真高興[f10]
不過不知道為什麼小豬家的波利(?)不是在回應框的上方説,
而是在回覆文章的最上面,可否請小倩幫小豬解答一下這是哪裡出問題了呢?
小豬重覆檢查好幾次程式,可是都沒有錯説,
不知道為什麼會變成這樣,麻煩小倩了m(_ _)m

Edit | Reply | 

小倩  2005, 06. 13 [Mon] 09:49

你放到表格的欄和欄的中間了...
改放到

Edit | Reply | 

小倩  2005, 06. 13 [Mon] 17:44

原本這段是這樣:
把那段Script放到●●的位置,然後加一個<BR>換行,如下:

Edit | Reply | 

hitona1209  2005, 06. 18 [Sat] 01:35

成功了,太感谢了[f10]

Edit | Reply | 

Raining  2005, 06. 27 [Mon] 22:48

想問小倩能強制繪文字斷行嗎!?
因為我要分開類別~
放太多框架又會跑掉>"<

Edit | Reply | 

Raining  2005, 06. 27 [Mon] 22:48

想問小倩能強制繪文字斷行嗎!?
因為我要分開類別~
放太多框架又會跑掉>"<

Edit | Reply | 

桌子  2005, 06. 27 [Mon] 23:09

哈,舉手代答
我是用 class tag 來設定放繪文字的行□
雖然有點亂來,不過好像是行的啊

Edit | Reply | 

小倩  2005, 06. 27 [Mon] 23:13

可以說明白一點嗎??
你要把哪裡的繪文字斷行??

Edit | Reply | 

優格  2005, 08. 02 [Tue] 14:31

可以麻煩小倩幫我看一下嘛
圖都跑不出來[f01]
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)回應欄全體的ID
// (2)回應欄的HTML Tags
var // (3)各回應欄的CLASS名
// ***************** 設定ここまで *****************
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (!objComArea || !objComArea.innerHTML) return;
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; 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>

Edit | Reply | 

小羔羊  2005, 08. 05 [Fri] 19:09

阿毛

為什麼我的圖片連結都會有框框??
連回應繪文字的圖片都有....[f08]
http://mao7772.blog18.fc2.com/
幫個忙> <,...謝謝

Edit | Reply | 

阿毛  2005, 08. 05 [Fri] 19:22

原來solid和border是線條差別[f02]
解決了,謝謝小倩哦!!!

Edit | Reply | 

喜愛兔仔  2005, 09. 06 [Tue] 16:28

求救呀!

小倩我的繪文字是出來了,
可是不管我怎麼按,它就是不出來,
可以幫我看看嗎?謝謝!v-343

Edit | Reply | 

小倩  2005, 09. 06 [Tue] 17:00

怎麼不用官方的繪文字,加入方法比較簡單
http://petlife.blog6.fc2.com/blog-entry-184.html
搜尋<form
加一個 name=comform
我目前是看到這個漏掉了

Edit | Reply | 

Don  2006, 02. 06 [Mon] 23:54

test

v-106

Edit | Reply | 

kinchan  2006, 05. 09 [Tue] 02:08

小倩~
抱歉挖了這麼久以前的文章出來問問題:~
目前的情形是之前大家用的繪文字有正常顯示,也測試過新的投稿,也是正常可以顯示
但就是我繪文字沒有斷行啊O__Q
結果就是整個樣版都跑掉了...
不曉得是不是我哪裡設錯
再不然有沒有讓繪文字強制斷行的方法呢?
這問題之前也有人問過,不過小倩妳好像沒有回答
桌子大人說用class tag可以做到,可是我實在是不知道該怎麼用才好~
拜託小倩了>__<
↓出問題的樣子

Edit | Reply | 

小倩  2006, 05. 09 [Tue] 10:33

在這個樣版的CSS的最底下加上
table,td {table-layout:fixed;word-wrap:break-word;word-break:break-all}

Edit | Reply | 

kinchan  2006, 05. 09 [Tue] 15:42

小倩~~~~>w<
太感激了(抱)
現在已經OK囉!!
真的非常謝謝妳~~~v-344

Edit | Reply | 

小倩  2006, 05. 10 [Wed] 16:53

可以了嗎?恭喜呀!!

Edit | Reply | 

NA  2006, 06. 03 [Sat] 02:13

不好意思,打擾一下小倩大orz
前幾天發現了這邊的FC2教學,教學真的很詳細 小倩大也真的很用心:)
照了上面的教學改了很多東西,
改到回應欄繪文字的時候也遇到了跟上面那位Kinchan大大一樣的問題,就是繪文字無法自動斷行 使得BLOG版面變形的問題,然後我照著小倩大上面的說法把table,td {table-layout:fixed;word-wrap:break-word;word-break:break-all} 加到CSS最底下後,
版面就變形了Q口Q
變成這樣↓
http://naliya.blog14.fc2.com/
(閱覽密碼是9876543210)
原本的版面是長這樣:
http://img174.imageshack.us/img174/1637/blogskin5mx.jpg
希望小倩大能幫我看看哪裡需要修改的orz拜託了(抖)
也很謝謝小倩大這麼用心作出這麼好的教學:)

Edit | Reply | 

Wendy  2006, 06. 05 [Mon] 17:22

我想....是不是每個板型都不一樣,以前我可以設定成功,但這個板型卻行不通~~~
目前的語法
插入哪個位置???

Edit | Reply | 

小倩  2006, 06. 05 [Mon] 23:43

Dear Wendy
你的form有設name嗎??
你用textarea 去搜尋看看,你現在列的好像是編輯時的那段語法,textarea 應該會有兩個地方會有才對
Dear NA
先把這段拿掉,
table,td {table-layout:fixed;word-wrap:break-word;word-break:break-all}
然後在程式3的前面加上這段
<table border=0 width=100% style="table-layout:fixed;word-wrap:break-word;word-break:break-all"><tr><td>
程式3的後面加</td></tr></table>

Edit | Reply | 

NA  2006, 06. 06 [Tue] 15:24

成功了!真的非常感謝小倩>\\\\\<

Edit | Reply | 

小倩  2006, 06. 06 [Tue] 21:54

那太好了,我是猜想或許這樣改或許可以,沒想到真的成功了

Edit | Reply | 

WHAT'S NEW?