轉載須知：
本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）

※本篇教學所使用的語法和教學原出處為敗家誌的調用jQuery特效實作(Tab控件篇)。

原本的教學主要是給wp的使用者用的，但是因為我不熟php的關係，想要放進去切換的欄位都不能用（像是最新回應之類的），再加上我的wp原本就沒有這麼多側邊欄，其實也不太需要這功能，所以就乾脆拿去我的忍者Blog用了。當然，這篇教學的範例展示也請到我的忍者Blog觀看。

基本上只要使用的網誌能夠修改樣式的html和css欄位就可以使用這個效果，所以同理FC2 Blog應該也能夠使用，有興趣的人可以試試看。

首先請把這篇文章中所提到的Tab控件語法下載下來（在步驟一的地方），解壓縮之後用忍者的檔案上傳功能上傳，並把檔案的網誌紀錄下來。

接著打開忍者Blog的樣式修改小幫手（在「テンプレート設定/編集」裡找到你想修改的樣式，點選「修正」）會出現這樣的畫面：

（點圖可放大）

接下來就跟這篇文章中寫的一樣，把步驟一裡的語法貼到上方「HTML」欄位裡的</head>之前（記得自己修正網址的部份）。然後再把步驟二的語法貼到「CSS」欄位裡，要放哪就看個人習慣囉。

貼完之後記得儲存樣式，然後再回到忍者Blog的管理介面，點選「プラグインの設定」新增一個「フリーエリア」欄位。

接著再將這篇文章中步驟三的語法貼進去，自己修改內容就行囉。（修改方式請自行摸索）目前測試過部落格小樹和Sitetag都可以正常顯示，一般的文字或圖片也沒有問題。

最後，這個效果並不會讓側邊欄的載入速度加快，只是隱藏一些內容讓畫面看起來比較乾淨而已，有點像是選單的開合功能這樣。看完教學之後若有什麼疑問再留言問我吧

轉載須知：
本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。
（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）

前陣子看到了這篇文章：「デュラララに登場するチャットを再現した」便非常想架架看這種風格的聊天室，但是當時沒有很仔細研究架設方法，這篇文章就一直躺在我的最愛裡長灰塵。結果最近因為也跟著看起デュラララ!!，所以又再度把這篇文章翻出來，也成功的架設了測試用的聊天室。（雖然過程有點波折）

總之因為架設成功，朋友們也玩的挺開心的，所以就決定來寫個簡單的架設教學，畢竟這原作者其實沒有把步驟寫的很清楚，與其讓每個人都花一堆時間摸索不如寫個教學比較快。

注意：此教學內容包含部份網頁語法及FTP軟體的使用，若你對網頁語法及FTP軟體完全不熟悉，請先查閱相關教學後再閱讀此教學文。

首先先來解釋一下デュラララ!!風格的聊天室到底是什麼東西。

關於這個聊天室的畫面和操作方式，我想有看過動畫的人應該都知道，至於沒看動畫的人可以參考這篇文章裡的截圖。總之這支程式就是為了模擬動畫裡那個聊天室的效果才寫出來的。

它主要的功能/特色有：

• 簡潔平滑的介面和可愛的特效。
• 不用註冊會員，只要輸入暱稱和選擇頭像即可使用。
• 聊天室裡的房間關閉時聊天內容也會一起清除。
• 支援多國語言介面。（跟P3一樣可以自行翻譯語言檔）

其他的等我想到再補充。（喂）

就算沒看過動畫，看完上面的介紹後也會覺得有點心動吧？雖然現在功能其實還有點陽春，而且多少有點bug，不過拿來當臨時討論用的聊天室我覺得還不錯，只是要記得另外開檔案紀錄對話就是了XD

那麼接下來就是要教大家怎麼架設囉！

第一步、準備一個網頁空間。

當然要架設這個聊天室一定要有一個空間才能上傳檔案，但是這個網頁空間必須要能夠支援PHP5，否則就算上傳檔案也沒用。（像我這已經停產的方案只支援到PHP4，真哀傷……）

所以這裡順便推薦幾個我覺得還能用的免費空間，有一些不知道什麼時候會掛掉，不過這個聊天室架設相當簡單，也沒有資料保存的問題（聊天紀錄會自動刪除），所以用這種空間架設就可以啦～

1.Freehostia（250M/6G）
2.Host1Free（10G/250G）
3.Free Web Hosting Area（1G/流量好像沒限制？不確定有沒有廣告。）

申請方式和使用方法等請自行google。

我目前是用第一個架設，這個聽說存活蠻久了比較不用怕它突然死掉這樣，不過流量稍微少了一點。除了我上面列舉的之外，如果自己已經有買空間而且有支援PHP5的話也可以用自己的空間架設。

注意：這個聊天室還蠻吃流量的，昨天測試一個晚上就可以吃掉最起碼快100M的流量，而且聊天人數應該也不到10人，所以架設之前請先衡量自己空間的流量是否足夠。

第二步、取得主程式並上傳檔案。

主程式請到這裡下載。（原作者為Suin）

下載之後請將壓縮檔解壓縮，會出現一個名為「dura」的資料夾。

接著打開你慣用的FTP程式（我是使用FileZilla這套軟體），連上你的空間之後將剛才的「dura」資料夾整個上傳到你的空間裡。

第三步、修改設定及檔名。

現在回到檔案總管找到剛才的「dura」資料夾，對資料夾裡的「setting.dist.php」檔案按右鍵，然後選擇開啟檔案→選擇程式→使用記事本（notepad）開啟，就會出現我們要修改的設定文字了。

首先找到以下這一段：

define('DURA_URL', 'http://www.example.com ');

然後把「http://www.example.com」這段網址改成你剛才上傳檔案的位置，
例如「http://空間網址/dura」這樣。（這個網址就是聊天室的網址）

改完之後請直接儲存檔案。

接著請再用FTP程式把「setting.dist.php」檔案上傳到剛才上傳檔案的位置，會跳出詢問是否要覆蓋原始檔案的視窗，請選擇「覆蓋原檔案」。上傳完之後再把檔名「setting.dist.php」改為「setting.php」即可。

第四步：修改「xml」資料夾之權限。

最後我們必須修改「xml」資料夾的權限，這樣我們輸入的聊天內容才能夠寫入對話暫存檔內。

方法很簡單，首先使用FTP程式（這裡以FileZilla為例）連線到剛才我們上傳主程式的目錄，找到「trust_path」這個資料夾裡的「xml」資料夾，對該資料夾按右鍵選擇「檔案權限…」之後會出現下圖：

請把「755」這個數字改成「777」然後按下確認鍵儲存。

現在你可以直接連線到聊天室的網址，如果出現這樣的畫面就代表你架設成功了！

快登入聊天室創立一個你自己的房間，把你的朋友統統拉進來聊吧！

我架來測試用的聊天室→◎
想試玩的人可以用這個玩玩看，但不要聊得太過火害我流量爆掉嘿

注意：前幾天發現有人將我寫的教學文連結轉到公開的噗浪上，卻沒有留言跟我說。
在這裡再次提醒，要將我寫的任何文章轉貼到「公開」、「任何人都可以閱覽」的地方時，請記得留言通知我。
若要轉貼到部落格，請使用部落格的引用功能。這是對作者的尊重和義務。
你覺得我寫的文章不錯，想分享給朋友之前，我也有權利知道我的文章要被轉到哪裡去，這是最基本的常識和網路素養。

以上の事は、日本語で話せば、無断転載禁止です。

大家可能會好奇怎麼一下子跳了這麼多版本……是的，因為作者現在沒工作，整天閒在家裡所以每天都很勤勞的更新，但是我還沒畢業失業所以還得上課，沒這麼多時間每次更新就發一篇文章，所以就全部統一在一篇文章裡面介紹。

再次提醒大家，4.20版之後的P3主程式內已經包含我所翻譯的正體中文語系，更新的時候不用再另外下載語系檔了！請大家多多注意。
更新的方式請參考這篇文章：
[教學]超簡單！Twitter軟體「P3:PeraPeraPrv」教學（2）

小提醒：更新到4.23版之後，如果出現無法打開設定選項的問題，請參考這篇更新文裡「Ver.4.23」的補充說明重新進行設定就可以解決。

更新的內容請點繼續閱讀。

內容很多所以我只翻比較重要的。我認為特別重要的會標注「*」。

Ver.4.21
*在訊息列表的工具提示上可以顯示上傳到「携帯百景」、「TwitPic」、「yFrog」這三個圖片網站的照片縮圖。（不用另外開網頁就可以看照片的意思啦！）
*工具提示顯示的時間改為10秒。
*訊息列表的右鍵清單會隨著點選的訊息改變。（例如選擇的訊息不是在回覆某人的話，就不會出現搜尋回覆者訊息的選項。）
*如果使用Twitter網站的RT功能，轉貼的推字數卻超過140的話，還是可以顯示全部的訊息。
*QT/via/RepostLink別人的推時，如果對方的推特沒有公開的話，他的ID也不會被其他人看到。（ID會變成****這樣）
*訊息更新的時間改為最短30秒。
*更新回覆的時間改為最短3分鐘。
*更新DM的時間改為最少3分鐘。
*可以設定連線逾時的時間長度。

原文內容

Ver.4.22
*修正一則訊息中若是貼了超過兩張圖（上傳自同樣的圖片網站），圖片會無法顯示的bug。
*可以設定是否要顯示圖片縮圖。
*刪除「不要顯示訊息列表的工具提示」選項，新增「顯示顯示訊息列表的工具提示」的選項。（我知道這看起來有點複雜…）
*工具提示裡的內容會自動換行。（我等這等超久了）
*啟動程式時會自動更新前100則已經加入最愛的訊息。

原文內容

Ver.4.23
*修正如果重新設定了訊息更新間隔，就會改變可顯示最大訊息數數值的bug。
*改為在上方的訊息預覽區域顯示圖片縮圖。（不知道在哪裡的人請參考這張圖上方的白色空白區域）
*新增「在訊息預覽區域的工具提示上顯示圖片縮圖」的選項。
（會改成這樣其實是因為圖片載入需要時間，如果不小心在瀏覽訊息時滑鼠移到有圖片的訊息，就算不想看也要忍受圖片載入所造成的lag。）

另外，因為在訊息列表顯示縮圖可能會導致lag問題，所以預設是關閉的。

補充說明：因為修改了P3的設定介面，所以會出現原本設定的更新時間超過系統預設範圍的情況，導致設定介面無法開啟。若是遇到這問題時，請先開啟V4.22版，把數值設定在以下這些數字的範圍內，存檔之後再進行程式更新。（更新方法請參考這裡）
* 訊息更新間隔: 30～120
* 回覆更新間隔:3～100
* DM更新間隔:3～100
* Timeline可顯示之最大訊息數:20～200
* 連線逾時時間:15～120

原文內容

Ver.4.24
*新增ID候選清單功能。只要輸入「@」或是「@x」（x為想搜尋的帳號的開頭第一個字母或數字），然後按「ctrl+/」就可以顯示清單。
（簡單來說就是有點像用google搜尋時，只需要輸入頭幾個字就會跑出清單讓你選的東西，或是噗浪的私噗設定介面）

詳細使用情況請參考原文內容。

以上更新內容翻譯自Lynmock先生的Blog。

轉載須知：
本部落格的文章不允許未經告知的全篇轉載或部份引用，若有需要轉載或引用請先留言通知我。
（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）

這次來教大家怎麼自己更換噗浪時間軸的背景。

需要準備的東西有兩項：
1.一張夠大的圖。
2.一個不會雞婆幫你縮圖的免費空間。

那……圖該多大才好呢？找不到免費空間怎麼辦呢？沒關係，繼續看下去就知道了。

背景圖的尺寸：

首先，請找一張你想替換的背景圖，因為河道是長形的，所以這張圖基本上也是長方形的。
河道的高度大約是390px左右，所以這張圖的高度最好介於「385～410px」之間。
（如果你是想讓小圖案不斷重複來裝飾河道的話，那高度就沒有限制了。）
至於長度，因為現在使用寬螢幕的人越來越多了，
所以這張圖當然是「越長越好」，或者是「邊緣可以接起來，就算連續排列也不會很醜」。
我自己在做版面時畫的圖，最後都會後製成長度超過1400px的背景圖。

總結以上的說明，這張圖的大小就大約是「1400x400(長x高)px」。

免費空間哪裡找？

如果有人跟我一樣有租空間，當然是不用擔心會被縮圖的問題，但是如果沒有租空間，想使用免費空間上傳圖檔的人，大概都會面臨圖片被縮小、或是尺寸太大無法上傳的困擾。
像我常常使用的Flickr和Photobucket都是這樣，所以這兩個空間就不能用了。

雖然我自己是使用自己租的空間上傳圖檔，但因為我會將自製的噗浪版面分享出去，如果太多人套用的話也很吃流量，所以我在這裡提供幾個我目前拿來放這些大圖的空間：

1.miroko
這是我主要使用的免費空間，只要將圖上傳到「我的文件」裡的「個人首頁」 資料夾裡，就可以外連了。
根目錄是「http://帳號名.miroko.tw/」（如果有另外新增資料夾放圖的話，記得網址要自己修改。）

2.ImageShack
傳說中的青蛙空間，記得上傳時要選擇「Do not resize（不要縮圖）」，如下圖紅色框框所示。

（點圖可放大）
上傳之後按「View full size」或者是複製下面「Direct Link」旁邊的連結就可以拿到原始圖檔的連結囉！詳情請看下圖。

（點圖可放大）

（結果竟然做起空間教學……Orz）

時間軸背景的語法：

還是一樣，要更改語法前，請先確定你的噗浪樣式裡面沒有相同的語法喔～

時間軸背景的語法：
/* 對齊左上角，不重複 */
#timeline_holder {background:  url(圖片網址) left top no-repeat;}
或者是
/* 對齊左上角，在X軸重複排列 */
#timeline_holder {background:  url(圖片網址) left top repeat-x;}
如果是想用小圖案重複排列來填滿河道的話，就用這一種
/* 重複排列 */
#timeline_holder {background:  url(圖片網址) ;}
（以上三種請依個人需要選擇使用，一次只能用一種。）

要確認是不是有重複的語法，請自行搜尋CSS欄位內有沒有「#timeline_holder」字樣，
如果有的話，就把該語法刪掉，直接套用我上面提供的語法，或者是更改語法中「圖片網址」的部份。

修改之後按儲存然後更新一下噗浪頁面，應該就可以發現你的時間軸背景已經換成你自己的圖囉～

注意：最近java更新後使用P3會經常性自動關閉或是跳出錯誤訊息的使用者，請先改用jar版。下載位置。

這一版不知道為什麼更新訊息沒有跳出來（我的情況）不過因為看到作者的訊息所以也順便更新了。
這個版本除了作者網誌上寫的修正處之外，還有一個對台灣使用者來說很重要的修正，
那就是……

作者把我翻的正體中文語系檔也一起放進程式裡了！ヽ(*ﾟ∀ﾟ*)ノ
以後大家不用再另外下載語系檔替換，直接更新程式就可以用囉！
（當然第一次用的人還是要改字型）
如果你用的不是正體中文版的OS可能還是要手動替換一下啦XD

雖然對我自己來說是有點晚了……畢竟認識作者也快一年了竟然到現在才想到要一起發布這樣。

--------------------------------------------

不過這樣一來，更新和安裝的教學也要重寫了……
其實不會差很多，只是不需要再備份語系檔了。可是經過這幾次的改版，作者也修改了介面，有很多地方已經跟我當初寫得不太一樣了……為了避免大家搞混，我可能還是得回去修正以前的文章（淚）
啊……突然有點討厭改版了（揍）

總之更新方法還是請參照這篇文章：
[教學]超簡單！Twitter軟體「P3: PeraPeraPrv」教學（2）

步驟已經修正了，所以照著做就好。
繼續閱讀是這次修正的內容。

*  Ver.4.20
* xAuthに対応しました。初回起動時にのみアカウント設定が必要になります。
支援xAuth，只有第一次啟動程式時會跳出帳號設定的視窗。（也就是叫你輸入帳號密碼的視窗啦）
* アニメーションgifアイコンによる負荷が深刻化していたので、アニメーションを削除する機能を実装しました。
動畫gif頭像對系統會造成很大的負擔，所以增加了能夠取消動畫效果的功能。

另外因為帳號設定的視窗獨立出來了，所以選項介面也做了修改。
再加上支援正體中文這點，大概就是這次的更新內容。

最後……讓我們替好心（算好心嗎）的作者拍拍手( ﾟДﾟﾉﾉ"☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ
也祝他早點脫離中年失業的困境……（死）