<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ヒニシイズム &#187; Teaching</title>
	<atom:link href="http://kamosion.com/hinishi/category/teaching/feed" rel="self" type="application/rss+xml" />
	<link>http://kamosion.com/hinishi</link>
	<description>ヒニシの日本語日記とP3応援サイト。PlurkとかWPとかいろいろ。</description>
	<lastBuildDate>Sun, 15 Jan 2012 12:15:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[超懶人教學]如何替換創革預設文字的顏色</title>
		<link>http://kamosion.com/hinishi/306</link>
		<comments>http://kamosion.com/hinishi/306#comments</comments>
		<pubDate>Mon, 02 May 2011 13:12:40 +0000</pubDate>
		<dc:creator>Hinishi</dc:creator>
				<category><![CDATA[Teaching]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Stylish]]></category>
		<category><![CDATA[創作革命]]></category>
		<category><![CDATA[教學]]></category>

		<guid isPermaLink="false">http://kamosion.com/hinishi/?p=306</guid>
		<description><![CDATA[<blockquote><p><span style="color: #ff0000;"><strong>轉載須知：</strong></span><br />
<span style="color: #ff0000;"><strong> 本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。</strong></span><br />
<span style="color: #ff0000;"><strong> （想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）</strong></span></p></blockquote>
<p>原本只是說說而已沒想到真的會寫教學……應該說原本只打算給親友用而已，但因為昨天聽說很多在創革小說版活動的人都認為新的文字顏色真的對眼睛太不體貼了，閱讀篇幅較長的小說時真的非常痛苦。為了避免有人因為這樣從此便不再到創革來看文（這樣是很可惜的，雖然眼睛也很重要），所以只好把這方法公開出來，有需要的朋友可以參考看看。</p>
<p>當然我在這裡還是衷心希望創革的文字顏色能有改回來的一天……最起碼也用個<span style="color: #444444;">#444444</span>之類的吧……淡灰色真的是一個蠻有攻擊性的顏色（對眼睛來說）。</p>
<p>這裡所使用的方法不只是創革，如果自己會寫語法的話，也可以用在其他網站的設定上，總之是可以自己更改網站外觀的好工具！雖然對網站的原作者有點不好意思，但能夠自由自在的客製也是現在的趨勢之一嘛。</p>
<p>那麼請點繼續閱讀觀看教學～</p>
<p><!--more--></p>
<p>這次我們所使用的是名為「<a href="http://userstyles.org/" target="_blank">Stylish</a>」的瀏覽器外掛。Firefox或是Chrome都有得裝，請大家不用擔心～（？）當然IE的話大概就沒辦法了，真是個害人不淺的<del>小妖精</del>。</p>
<h3><span style="color: #993366;">一、安裝「Stylish」附加元件</span></h3>
<p>首先請先連到「<a href="http://userstyles.org/" target="_blank">Stylish</a>」的官方網站來安裝我們所需要的外掛程式（網站連結請點外掛名稱）。雖然介面是英文，但我想大部分的人應該都看得出來網站上有兩個連結，一個叫做「<span style="color: #ff6600;">Stylish for Firefox</span>」（火狐專用），一個叫做「<span style="color: #008000;">Stylish for Chrome</span>」（Chrome專用）吧？</p>
<p>是的，要安裝這個外掛，只需要點選你所使用的瀏覽器的那個連結，也就是火狐就點火狐，Chrome就點Chrome，然後就跟一般安裝外掛的步驟一樣，快速簡潔地安裝好了。</p>
<p>安裝好了之後還要把設定創革預設文字的語法加進去，才能夠改變創革的預設文字顏色。會寫語法的人可以自己研究怎麼寫（除了文字色以外其他東西也可以自己修改）不會寫的人我也已經做好了簡單的程式碼可以直接套用。</p>
<h3><span style="color: #993366;">二、安裝程式碼</span></h3>
<p>想安裝程式碼的朋友請直接點<a href="http://userstyles.org/styles/47340/revo-create-com-font-color-change" target="_blank">這裡</a>安裝，只要看到有<span style="color: #008000;">Install</span>字樣我想大概就知道要按哪了吧？按下去之後多半會跳出一個對話框確認你是不是真的要裝，反正就一直按確定（or安裝）就好了。</p>
<p>我寫的程式碼是將文字色改為原本的<span style="color: #3b001e;">#3B001E</span>，如果想自己設定其他顏色的朋友，可以自行到設定介面去更改語法。（這裡就不教了因為有點難講解……）</p>
<p>＊＊＊</p>
<p>完成這兩個步驟之後……你就可以馬上點進原本讓你覺得好像蒙上一層白紗的創革了！</p>
<p>讓我們來看看使用前和使用後的差別──</p>
<p>（範例是我自己的文章就是了……）</p>
<p>使用前：</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/fon2.png" alt="" width="481" height="325" /></p>
<p>使用後：</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/fon1.png" alt="" width="481" height="325" /></p>
<p>特別是使用win7又把字體設定成微軟正黑體的人會特別有感觸吧！雖然新細明體因為本身看起來就比較粗，所以顏色上的變化不會太明顯，但渲染效果比較好的微軟正黑體，只要顏色沒設定好，就會迷濛到你覺得自己得了重度近視。或許有的人會說：那把字體改成新細明體就好啦！但我並不想為了一個網站就犧牲用美美字體看其他網站的權利，所以我選擇用外掛把特定網站的顏色改過來就好XD</p>
<p>雖然字體顏色時間一久看起來就沒什麼差別了，但卻不代表眼睛會跟著適應喔！尤其當你體會過舒服又好看的閱讀體驗後，再回去看霧濛濛的字真的會讓人很不舒服……</p>
<p>如果你在創革有定期追蹤的小說作者，想看文章卻又覺得眼睛不太舒服的話，可以試試這個外掛喔！另外，若是你自己本身就有在創革發表文章的習慣，也可以考慮使用這個外掛，讓你可以長時間編輯文章，卻又不會覺得眼睛疲勞。當然最重要的一點呢，就是<span style="color: #ff0000;">寫文章的時候不要用太多花俏的顏色</span>，不管是在創革還是自己的網誌都一樣喔！因為用了太多顏色的話，就算把其他的文字顏色調淡，整篇文章看起來依舊是<span style="color: #808080;">霧煞煞</span>的啦！</p>
]]></description>
		<wfw:commentRss>http://kamosion.com/hinishi/306/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[WP外掛教學]如何在自架WordPress網誌使用創革表情符號</title>
		<link>http://kamosion.com/hinishi/305</link>
		<comments>http://kamosion.com/hinishi/305#comments</comments>
		<pubDate>Wed, 23 Mar 2011 07:07:40 +0000</pubDate>
		<dc:creator>Hinishi</dc:creator>
				<category><![CDATA[Teaching]]></category>
		<category><![CDATA[Custom Smilies]]></category>
		<category><![CDATA[表情符號]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[創革]]></category>
		<category><![CDATA[創作革命]]></category>
		<category><![CDATA[外掛]]></category>
		<category><![CDATA[教學]]></category>

		<guid isPermaLink="false">http://kamosion.com/hinishi/?p=305</guid>
		<description><![CDATA[<blockquote><p><strong><span style="color: #ff0000;">轉載須知：</span></strong><br />
<strong><span style="color: #ff0000;">本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。</span></strong><br />
<strong><span style="color: #ff0000;">（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）</span></strong></p></blockquote>
<p>去年開始使用這款表情外掛之後，就一直想寫篇教學，不過因為這外掛雖然使用上挺方便，但教起來卻不是那麼好說明，所以拖了很久。不過繼上一篇<a href="http://kamosion.com/hinishi/246" target="_blank">如何在Plurk使用創革表情符號</a>後，我覺得大家應該會比較想在部落格使用這些表情XD</p>
<p>那麼教學請點繼續閱讀～<!--more--></p>
<h2><span style="color: #000080;">第一步：安裝外掛&amp;下載創革表情符號</span></h2>
<p>在這裡我使用的表情符號外掛是<a href="http://wordpress.org/extend/plugins/custom-smilies-se/" target="_blank">「Custom Smilies」</a>，我想會架WP的人應該也知道怎麼下載安裝外掛吧？所以這方面就省略帶過～</p>
<p>下載安裝完之後記得啟用外掛，然後就可以開始下載你想丟進去的表情符號囉！當然你要用洋蔥頭或是彎彎的表情符號也可以，不過我在這裡示範的是創革的表情符號，所以就只放創革的下載連結啦。</p>
<p>下載網址在<a href="http://revo-create.com/viewthread.php?tid=4838" target="_blank">這裡</a>，後來好像還有更新一些別的表情，不過因為我覺得這些就夠用了，所以也沒有更新就是了。</p>
<h2><span style="color: #000080;">第二步：把表情符號加進清單中</span></h2>
<p>打開下載好的表情符號，把檔名整理一下（建議使用英數組合）以後就可以開始上傳了，「Custom Smilies」這款外掛不支援用網頁上傳，所以我們必須使用FTP軟體把圖檔丟進去。</p>
<p>這裡我使用的FTP軟體是FileZilla。連上自己安裝WP的路徑之後，請找到<span style="color: #008000;"><strong>「wp-includes/images/smilies」</strong></span>這個路徑底下的資料夾，接著把圖檔統統丟進<strong><span style="color: #008000;">「smilies」</span></strong>資料夾裡。</p>
<h2><span style="color: #000080;">第三步：編輯表情符號的代碼</span></h2>
<p>上傳好圖檔後要先設好代碼才能在編輯文章時使用，所以我們先開啟WP的後台，連到「Custom Smilies」的設定頁面。通常上傳完之後你會看到像這樣子有點凌亂的一排圖示：</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies1.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies1_s.jpg" alt="" width="300" height="206" /></a>（點圖可放大）</p>
<p><strong><span style="color: #008000;">「What to type」</span></strong>的欄位就是我們要填寫的代碼，原本預設的表情符號都已經設定好了，所以可以不用管它，我們要改的是剛才上傳的圖示，<strong><span style="color: #008000;">「What to type」</span></strong>的欄位應該都還是空白的。（示意圖是已經改好的）</p>
<p>不過這樣老實說有點難以閱讀，所以我們可以點選左上角的藍色連結<strong><span style="color: #0000ff;">「Display undefined smilies only」</span></strong>，意思就是只顯示沒有代碼的圖示。按下去之後會如下圖一般只顯示沒有設定的圖示：</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies2.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies2_s.jpg" alt="" width="300" height="204" /></a>（點圖可放大）</p>
<p>編輯完之後別忘了按下方的Update儲存喔，否則剛剛打的都要重來了。</p>
<p>設定頁面下方還有一些其他設定，順便附上我自己的設定值，可以參考一下。（不過我覺得我應該是沒有動過它）</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies3.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies3_s.jpg" alt="" width="300" height="195" /></a>（點圖可放大）</p>
<h2><span style="color: #000080;">第四步：在文章中加入符號</span></h2>
<p>設定都弄好了之後，就可以開始試著在文章中使用了。當我們打開文章編輯器時，在文章標題下方的<strong><span style="color: #008000;">「上傳/插入」</span></strong>列表會多出一個微笑標誌。按下去就會顯示我們剛才設定的表情符號。（如果沒有設定代碼，也就是<strong><span style="color: #008000;">「What to type」</span></strong>欄位是空白的圖示就不會出現在選擇清單裡）</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/smilies4.jpg" alt="" width="350" height="304" /></p>
<p>因為我把非創革的圖示代碼都去掉，所以目前只會出現創革的表情符號。</p>
<p>按下你要的圖示後，就會自動在文章裡插入代碼，只要編輯文章的過程中不要去更動到那段代碼，文章寫好之後代碼的部份就會自動轉成表情符號了！</p>
<p>示範： <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r44.gif' alt='[雜草]' class='wp-smiley' />  <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r18.gif' alt='[版娘]' class='wp-smiley' />  <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r19.gif' alt='[版鳥]' class='wp-smiley' /> </p>
<p>有任何問題歡迎留言～不過因為我使用上沒有任何問題，所以如果都有按照步驟做卻失敗的話，我也不一定找得出原因就是了（囧）</p>
]]></description>
		<wfw:commentRss>http://kamosion.com/hinishi/305/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>超好用NICO瀏覽器「nFinder」之隨便介紹（1）</title>
		<link>http://kamosion.com/hinishi/286</link>
		<comments>http://kamosion.com/hinishi/286#comments</comments>
		<pubDate>Thu, 23 Dec 2010 16:18:56 +0000</pubDate>
		<dc:creator>Hinishi</dc:creator>
				<category><![CDATA[Teaching]]></category>
		<category><![CDATA[ニコニコ動画]]></category>
		<category><![CDATA[nFinder]]></category>
		<category><![CDATA[NICONICO]]></category>
		<category><![CDATA[教學]]></category>

		<guid isPermaLink="false">http://kamosion.com/hinishi/?p=286</guid>
		<description><![CDATA[<blockquote><p><strong><span style="color: #ff0000;">轉載須知：<br />
 本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。<br />
 （想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）</span></strong></p>
</blockquote>
<p><img class="alignright" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/nfinder.jpg" alt="" width="350" height="201" />前陣子發現了這款還不錯用的NICO瀏覽器，從此我幾乎不再用NICO官網看影片了。真的有這麼好用嗎？先列幾個犯規到爆炸的特點來瞧瞧：</p>
<p>1.能防止因為連續播放而引起的連線被拒絕問題。NICO不知道從什麼時候開始，只要短時間內連續看幾個影片，就會把你擋下來，要你等一下（但通常要等很久）用這個瀏覽器基本上不用擔心這問題，它會自動幫你迴避掉。</p>
<p>2.加也加不完的我的最愛。雖然是存在電腦裡所以需要備份，但至少不用再擔心一般會員的額度會被用光。</p>
<p>3.除了一般動畫能加最愛以外，連「個人清單」也可以加入追蹤。覺得要定時瀏覽喜歡的NICO歌手的清單很麻煩嗎？只要把歌手的清單加進nFinder的最愛裡，每次開啟程式時就會自動搜尋是否有更新，而且會跳出通知，超方便！</p>
<p>光這幾個優點，就讓我愛不釋手了，更別說它還有下載動畫/特殊播放器……等等實用功能，而且這程式基本上是免安裝版，可以放在USB裡隨身帶著走，雖然是日文界面但並不需要app就可以正常使用，當然看不懂日文的人可能就要摸索一下了XD</p>
<p>那麼接下來是我隨便寫的一些基本介紹，因為功能太多了很多東西介紹不完，所以如果之後有時間再介紹其他好用功能吧！</p>
<p><!--more--></p>
<h3><span style="color: #000080;"><strong>一、安裝篇：</strong></span></h3>
<p>首先，請先到<a href="http://cornelius.sakura.ne.jp/info_nFinder.cgi" target="_blank">官網</a>下載主程式（建議可選ZIP格式，解壓縮後就能用了）。第一次開啟程式時會出現以下視窗，請點選紅色框框。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n1.jpg" alt="" width="350" height="292" /></p>
<p>接著會跳出一個視窗，要求你輸入NICO帳號（也就是email）和密碼，輸入完一樣是選擇紅色框框登入。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n2.jpg" alt="" width="350" height="210" /></p>
<p>然後等一會兒就會出現瀏覽器畫面了！</p>
<h3><strong><span style="color: #000080;">二、基本界面篇：</span></strong></h3>
<p>我們先來看看它的界面長什麼樣子。</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/n3.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n3_s.jpg" alt="" width="350" height="258" /></a><br />
 （點圖可放大）</p>
<p>最上面一排工具列我先隨便講幾個比較常用的</p>
<p>檔案（電視圖樣）、設定（齒輪圖樣）、我的最愛（お気に入り）、搜尋（検索）、排行榜（ランキング）、觀看紀錄（ヒストリ）、關注清單（＠view）、瀏覽器（ブラウズ）</p>
<p><span style="color: #666699;">※關注清單可以讓我們把有點感興趣但是又還沒看過，不知道要不要加入最愛的影片丟進去，可以選擇結束程式時自動儲存或是清空。</span></p>
<p><strong><span style="color: #993300;">「ブラウズ」</span></strong>這個頁面可以讓我們像平常一樣瀏覽NICO網頁，但如果點選動畫連結，則會另外跳出播放視窗。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n4.jpg" alt="" width="350" height="235" /></p>
<p>如果要直接下載動畫或是加入最愛，可以在紅色框框處找到相對應的按鈕。</p>
<p>●加入播放清單（播放器可以接著播放很多動畫）</p>
<p>▼下載動畫</p>
<p>★加入最愛</p>
<p>＠加入@view清單</p>
<p>然後是最重要的<strong><span style="color: #ff0000;">播放器畫面</span></strong>！！（對著動畫連結點一下就會自動開啟視窗囉）</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/n9.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n9_s.jpg" alt="" width="350" height="240" /></a><br />
 （點圖可放大）</p>
<p>這是內建播放器的模樣，可以在設定裡選擇其他播放器。點選工具列左邊的<strong><span style="color: #333333;">齒輪圖案</span></strong>就可以開啟設定界面了。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n8.jpg" alt="" width="350" height="239" /><br />
 （這是設定播放器的界面）</p>
<p>如果用內建播放器的話，好像連時報也會擋掉，用官方的會不會擋我就不知道了。</p>
<p>那麼界面介紹就到這裡（欸）讓我們快速進入下一個單元吧～界面其實沒啥好講的，多摸幾次就熟了 <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r31.gif' alt='[淫臉]' class='wp-smiley' /> </p>
<h3><span style="color: #000080;"><strong>三、如何把喜歡的清單加入我的最愛：</strong></span></h3>
<p>動畫加入最愛的方式其實還蠻好找，播放器上面的<strong><span style="color: #ff0000;">「video」</span></strong>按下去第一個就是了。但要加入歌手的清單就需要一點訣竅。</p>
<p>總之，有兩種方式可以加入。</p>
<p>1.切換到<strong><span style="color: #993300;">「ブラウズ」</span></strong>找到你想加入的清單，然後複製它的連結。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n5.jpg" alt="" width="350" height="258" /><br />
 （複製圖中紅色框框的地方）</p>
<p>然後切到<strong><span style="color: #008000;">「お気に入り」</span></strong>的頁面，按右鍵會出現這樣的清單：</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n6.jpg" alt="" width="301" height="350" /><br />
 看到紅色框框了沒？<span style="font-size: medium;"><strong><span style="color: #ff0000;">按下去就對了！</span></strong></span></p>
<p>接著你會發現它跟一般動畫一樣新增到我的最愛裡，只是影片預覽圖長得不太一樣。</p>
<p>那加入之後要如何查看裡面的內容呢？<strong><span style="color: #ff0000;">對著它按兩下就好了～</span></strong> <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r28.gif' alt='[得意]' class='wp-smiley' /> （觀看我的最愛裡的影片也是這種方式）</p>
<p>清單會自動出現在<strong><span style="color: #3366ff;">「検索」</span></strong>頁面裡，想看哪一個動畫一樣是點兩下。</p>
<p>2.當你在觀看動畫時，發現作者把個人清單放在介紹裡，該怎麼加入最愛呢？</p>
<p>這時候請對清單連結按<strong><span style="color: #ff0000;">「右鍵」</span></strong>，選擇<strong><span style="color: #ff0000;">「複製捷徑」</span></strong>，然後切換到<strong><span style="color: #008000;">「お気に入り」</span></strong>的頁面一樣是右鍵給它按下去，選擇上面那張圖裡的紅色框框就好囉！</p>
<h3><span style="color: #000080;"><strong>四、排行榜以及@view功能：</strong></span></h3>
<p>在nFinder的<strong><span style="color: #ff6600;">「ランキング」</span></strong>頁面，你可以自由選擇要看怎樣的排行榜，不用再用網頁瀏覽器慢慢找了，剛才提到的<strong><span style="color: #3366ff;">「検索」</span></strong>頁面也是可以拿來搜尋關鍵字，尋找你想看的動畫。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n10.jpg" alt="" width="350" height="271" /></p>
<p>剛才提到如果你加入最愛的清單有更新時，會跳出訊息通知（通知我忘了照^q^）這時按下確定後，頁面就會自動切換到<strong><span style="color: #ff0000;">@view</span></strong>，列出更新的動畫。</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/n7.jpg" alt="" width="350" height="184" /></p>
<p>那麼就先介紹到這，大家可以自己摸索看看～（有機會再來教怎麼下載動畫XD）</p>
]]></description>
		<wfw:commentRss>http://kamosion.com/hinishi/286/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[教學]如何在忍者Blog使用Tab效果切換側邊欄</title>
		<link>http://kamosion.com/hinishi/276</link>
		<comments>http://kamosion.com/hinishi/276#comments</comments>
		<pubDate>Sun, 11 Jul 2010 03:27:10 +0000</pubDate>
		<dc:creator>Hinishi</dc:creator>
				<category><![CDATA[Teaching]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[忍者Blog]]></category>
		<category><![CDATA[教學]]></category>

		<guid isPermaLink="false">http://kamosion.com/hinishi/?p=276</guid>
		<description><![CDATA[<blockquote><p><strong><span style="color: #ff0000;">轉載須知：<br />
本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）</span></strong></p></blockquote>
<p><strong><span style="color: #ff0000;">※本篇教學所使用的語法和教學原出處為<a href="http://blog.joytown.tw/" target="_blank">敗家誌</a>的<a href="http://blog.joytown.tw/2009/04/08/502" target="_blank">調用jQuery特效實作(Tab控件篇)</a>。</span></strong></p>
<p>原本的教學主要是給wp的使用者用的，但是因為我不熟php的關係，想要放進去切換的欄位都不能用（像是最新回應之類的），再加上我的wp原本就沒有這麼多側邊欄，其實也不太需要這功能，所以就乾脆拿去<a href="http://qmosq.blog.shinobi.jp/" target="_blank">我的忍者Blog</a>用了。當然，這篇教學的範例展示也請到我的忍者Blog觀看。</p>
<p>基本上只要使用的網誌能夠修改樣式的html和css欄位就可以使用這個效果，所以同理FC2 Blog應該也能夠使用，有興趣的人可以試試看。</p>
<p><!--more--></p>
<p>首先請把<a href="http://blog.joytown.tw/2009/04/08/502" target="_blank">這篇文章</a>中所提到的<strong><span style="color: #ff6600;">Tab控件語法</span></strong>下載下來（在步驟一的地方），解壓縮之後用忍者的檔案上傳功能上傳，並把檔案的網誌紀錄下來。</p>
<p>接著打開忍者Blog的樣式修改小幫手（在<span style="color: #333399;">「テンプレート設定/編集」</span>裡找到你想修改的樣式，點選<strong><span style="color: #ff0000;">「修正」</span></strong>）會出現這樣的畫面：</p>
<p><a rel="lightbox" href="http://i280.photobucket.com/albums/kk185/momovicky/wp/ninja.jpg"><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/wp/ninja_s.jpg" alt="" width="350" height="233" /></a></p>
<p>（點圖可放大）</p>
<p>接下來就跟<a href="http://blog.joytown.tw/2009/04/08/502" target="_blank">這篇文章</a>中寫的一樣，把步驟一裡的語法貼到上方<span style="color: #333399;">「HTML」</span>欄位裡的<strong><span style="color: #ff0000;">&lt;/head&gt;</span></strong>之前（記得自己修正網址的部份）。然後再把步驟二的語法貼到<span style="color: #333399;">「CSS」</span>欄位裡，要放哪就看個人習慣囉。</p>
<p>貼完之後記得儲存樣式，然後再回到忍者Blog的管理介面，點選<span style="color: #333399;">「プラグインの設定」</span>新增一個<span style="color: #333399;">「フリーエリア」</span>欄位。</p>
<p>接著再將<a href="http://blog.joytown.tw/2009/04/08/502" target="_blank">這篇文章</a>中步驟三的語法貼進去，自己修改內容就行囉。（修改方式請自行摸索）目前測試過部落格小樹和Sitetag都可以正常顯示，一般的文字或圖片也沒有問題。</p>
<p>最後，這個效果並不會讓側邊欄的載入速度加快，只是隱藏一些內容讓畫面看起來比較乾淨而已，有點像是選單的開合功能這樣。看完教學之後若有什麼疑問再留言問我吧 <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r23.gif' alt='[耶穌]' class='wp-smiley' /> </p>
]]></description>
		<wfw:commentRss>http://kamosion.com/hinishi/276/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>[教學]如何架設デュラララ!!風格的聊天室</title>
		<link>http://kamosion.com/hinishi/272</link>
		<comments>http://kamosion.com/hinishi/272#comments</comments>
		<pubDate>Sun, 27 Jun 2010 12:38:28 +0000</pubDate>
		<dc:creator>Hinishi</dc:creator>
				<category><![CDATA[Teaching]]></category>
		<category><![CDATA[デュラララ!!]]></category>
		<category><![CDATA[デュラララ風チャット]]></category>
		<category><![CDATA[Durarara!!]]></category>
		<category><![CDATA[教學]]></category>

		<guid isPermaLink="false">http://kamosion.com/hinishi/?p=272</guid>
		<description><![CDATA[<blockquote><p><span style="color: #ff0000;"><strong>轉載須知：<br />
本部落格的文章不允許未經告知的全篇及部份轉載，若有需要轉載或引用請先留言通知我。<br />
（想轉貼到噗浪、facebook、twitter上的人也請留言通知，謝謝。）</strong></span></p></blockquote>
<p>前陣子看到了這篇文章：「<a href="http://suin.asia/2010/03/26/durarara_like_chat" target="_blank">デュラララに登場するチャットを再現した</a>」便非常想架架看這種風格的聊天室，但是當時沒有很仔細研究架設方法，這篇文章就一直躺在我的最愛裡長灰塵。結果最近因為也跟著看起デュラララ!!，所以又再度把這篇文章翻出來，也成功的架設了測試用的聊天室。（雖然過程有點波折）</p>
<p>總之因為架設成功，朋友們也玩的挺開心的，所以就決定來寫個簡單的架設教學，畢竟這原作者其實沒有把步驟寫的很清楚，與其讓每個人都花一堆時間摸索不如寫個教學比較快。</p>
<blockquote><p><span style="color: #ff6600;"><strong>注意：此教學內容包含部份網頁語法及FTP軟體的使用，若你對網頁語法及FTP軟體完全不熟悉，請先查閱相關教學後再閱讀此教學文。</strong></span></p></blockquote>
<p><!--more--></p>
<p>首先先來解釋一下デュラララ!!風格的聊天室到底是什麼東西。</p>
<p>關於這個聊天室的畫面和操作方式，我想有看過動畫的人應該都知道，至於沒看動畫的人可以參考<a href="http://suin.asia/2010/04/04/durarara_like_chat" target="_blank">這篇文章</a>裡的截圖。總之這支程式就是為了模擬動畫裡那個聊天室的效果才寫出來的。</p>
<p>它主要的功能/特色有：</p>
<ul>
<li>簡潔平滑的介面和可愛的特效。</li>
<li>不用註冊會員，只要輸入暱稱和選擇頭像即可使用。</li>
<li>聊天室裡的房間關閉時聊天內容也會一起清除。</li>
<li>支援多國語言介面。（跟<a href="http://kamosion.com/hinishi/category/p3" target="_blank">P3</a>一樣可以自行翻譯語言檔）</li>
</ul>
<p>其他的等我想到再補充。（喂）</p>
<p>就算沒看過動畫，看完上面的介紹後也會覺得有點心動吧？雖然現在功能其實還有點陽春，而且多少有點bug，不過拿來當臨時討論用的聊天室我覺得還不錯，只是要記得另外開檔案紀錄對話就是了XD</p>
<p>那麼接下來就是要教大家怎麼架設囉！ <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r27.gif' alt='[閃亮]' class='wp-smiley' /> </p>
<h3><span style="color: #333399;">第一步、準備一個網頁空間。</span></h3>
<p>當然要架設這個聊天室一定要有一個空間才能上傳檔案，但是<span style="color: #ff0000;"><strong>這個網頁空間必須要能夠支援PHP5</strong></span>，否則就算上傳檔案也沒用。（像我這已經停產的方案只支援到PHP4，真哀傷……）</p>
<p>所以這裡順便推薦幾個我覺得還能用的免費空間，有一些不知道什麼時候會掛掉，不過這個聊天室架設相當簡單，也沒有資料保存的問題（聊天紀錄會自動刪除），所以用這種空間架設就可以啦～</p>
<p>1.<a href="http://www.freehostia.com/" target="_blank">Freehostia</a>（250M/6G）<br />
2.<a href="http://www.host1free.com/" target="_blank">Host1Free</a>（10G/250G）<br />
3.<a href="http://www.freewebhostingarea.com/" target="_blank">Free Web Hosting Area</a>（1G/流量好像沒限制？不確定有沒有廣告。）</p>
<p>申請方式和使用方法等請自行google。</p>
<p>我目前是用第一個架設，這個聽說存活蠻久了比較不用怕它突然死掉這樣，不過流量稍微少了一點。除了我上面列舉的之外，如果自己已經有買空間而且有支援PHP5的話也可以用自己的空間架設。</p>
<blockquote><p><span style="color: #ff0000;"><strong>注意：這個聊天室還蠻吃流量的，昨天測試一個晚上就可以吃掉最起碼快100M的流量，而且聊天人數應該也不到10人，所以架設之前請先衡量自己空間的流量是否足夠。</strong></span></p></blockquote>
<h3><span style="color: #333399;">第二步、取得主程式並上傳檔案。</span></h3>
<p>主程式請到<a href="http://code.google.com/p/drrr-like-chat/" target="_blank">這裡</a>下載。（原作者為<a href="http://suin.asia/" target="_blank">Suin</a>）</p>
<p>下載之後請將壓縮檔解壓縮，會出現一個名為「dura」的資料夾。</p>
<p>接著打開你慣用的FTP程式（我是使用FileZilla這套軟體），連上你的空間之後將剛才的「dura」資料夾整個上傳到你的空間裡。</p>
<h3><span style="color: #333399;">第三步、修改設定及檔名。</span></h3>
<p>現在回到檔案總管找到剛才的「dura」資料夾，對資料夾裡的<span style="color: #800000;"><strong>「setting.dist.php」</strong></span>檔案按右鍵，然後選擇開啟檔案→選擇程式→使用記事本（notepad）開啟，就會出現我們要修改的設定文字了。</p>
<p>首先找到以下這一段：</p>
<blockquote><p>define('DURA_URL', '<span style="color: #008000;">http://www.example.com </span>');</p></blockquote>
<p>然後把「<span style="color: #008000;">http://www.example.com</span>」這段網址改成你剛才上傳檔案的位置，<br />
例如「<span style="color: #008000;">http://空間網址/dura</span>」這樣。<span style="color: #ff0000;"><strong>（這個網址就是聊天室的網址）</strong></span></p>
<p>改完之後請直接儲存檔案。</p>
<p>接著請再用FTP程式把<span style="color: #800000;"><strong>「setting.dist.php」</strong></span>檔案上傳到剛才上傳檔案的位置，會跳出詢問是否要覆蓋原始檔案的視窗，請選擇<span style="color: #ff0000;"><strong>「覆蓋原檔案」</strong></span>。上傳完之後再把檔名<span style="color: #800000;"><strong>「setting.dist.php」</strong></span>改為<span style="color: #ff0000;"><strong>「setting.php」</strong></span>即可。</p>
<h3><span style="color: #333399;">第四步：修改「xml」資料夾之權限。</span></h3>
<p>最後我們必須修改「xml」資料夾的權限，這樣我們輸入的聊天內容才能夠寫入對話暫存檔內。</p>
<p>方法很簡單，首先使用FTP程式（這裡以FileZilla為例）連線到剛才我們上傳主程式的目錄，找到<span style="color: #800000;"><strong>「trust_path」</strong></span>這個資料夾裡的<span style="color: #ff0000;"><strong>「xml」</strong></span>資料夾，對該資料夾按右鍵選擇<span style="color: #ff0000;"><strong>「檔案權限…」</strong></span>之後會出現下圖：</p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/drrr.jpg" alt="" width="350" height="324" /></p>
<p>請把<span style="color: #800000;"><strong>「755」</strong></span>這個數字改成<span style="color: #ff0000;"><strong>「777」</strong></span>然後按下確認鍵儲存。</p>
<p>現在你可以直接連線到聊天室的網址，如果出現這樣的畫面就代表你架設成功了！ <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r27.gif' alt='[閃亮]' class='wp-smiley' /> </p>
<p><img class="alignnone" src="http://i280.photobucket.com/albums/kk185/momovicky/drrr_sample.jpg" alt="" width="350" height="196" /></p>
<p>快登入聊天室創立一個你自己的房間，把你的朋友統統拉進來聊吧！ <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r28.gif' alt='[得意]' class='wp-smiley' /> </p>
<blockquote><p>我架來測試用的聊天室→<a href="http://kamosion.freehostia.com/dura/" target="_blank">◎</a><br />
想試玩的人可以用這個玩玩看，但不要聊得太過火害我流量爆掉嘿 <img src='http://kamosion.com/hinishi/wp-includes/images/smilies/r41.gif' alt='[蒼白臉]' class='wp-smiley' /> </p></blockquote>
]]></description>
		<wfw:commentRss>http://kamosion.com/hinishi/272/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>

