MUKI space* » css

教學 | 用Compass取代CSS，寫個html專案

muki — Wed, 05 Oct 2011 09:56:16 +0000

老實說，我一直很排斥blueprint, sass, compass這種非CSS正統格式的快速工具。擁護者常會說他們很快速、方便，而且可以幫你把hack全部處理完，還可以有效簡化流程balabala一堆，但對我來說，我還是喜歡自己慢慢刻的那種成就感，而且Compass所產生出來的css讓我覺得非常的髒，註解一堆，也不是按照我所愛的編排習慣。

但，我還是開始碰觸Compass了...。大概有10%原因是受到這張比較圖的影響▼

甚麼!!Compass居然自居是武裝過後的CSS!!!
基於好奇探究，也基於工作上的需要(其實主因80%是工作關係OTL)，所以我決定來玩玩Compass。

在使用Compass之前，我一直很怕用習慣後，會忘掉正統的CSS寫法。幸好目前寫了三、四行，還沒忘記原本的....。那麼剩下10%使用Compass的原因，是想挑戰自己。

人活到一個階段，會開始抗拒學習新事物，變得比較沒有挑戰性、墨守成規。老實說，我不想變成這樣的人，我也害怕自己變成這樣子。雖然我一開始不能接受Compass，但是，為什麼我要抗拒它呢？雖然我擁護著正統的CSS，但我還是可以學習改良過後的Compass，正所謂知己知彼，百戰不殆嘛！

然後...，從安裝開始就是一條艱辛的路途，因為國內使用Compass的人不多，加上沒有人從頭到尾去寫教學，所以我決定自己寫一篇，給那些想玩Compass卻不知從何玩起的朋友一個參考。

甚麼是Compass

簡而言之，就是另外一種撰寫CSS的方式(工具)，簡單舉例幾個我覺得還不錯的特色(我非程式評測背景出身，所以不談數據理論，只說我自己的感想)：

【1.解決瀏覽器不相容:】
這我還沒實際用過，但聽說Compass可以幫你解決瀏覽器不相容的問題。也就是說，你不用再開每個瀏覽器在那邊看哪裡跑掉，然後針對跑掉的部分寫hack，慢慢地去刻。只要在Compass寫上幾行語法，他就可以自動幫你產生相關hack。(但不是所有的hack)

【2.簡化css代碼：】
Compass透過一種「全域變數」的邏輯，可以有效簡化CSS代碼。比如今天在很多class都用到"紅色"，Compass可以讓你只要修改一次，就可以把所有紅色都取代掉。
可以在style文件最前面寫上:

$red: #ff0000

class裡頭：

a {
color: $red;
}

.h1 {
color: $red;
}

往後只要改 $red: #ff0000，就可以全部替換掉了。

【3.會幫你除錯】
因為要把compass檔案轉成css時，會先經過compile(編譯)，compile的過程中，有問題就不會讓你過，會告訴你哪裡有錯。(是不是很有按下.net三角形icon的FU...，發明Compass的人一定是程式面出身的!!!)

【4.自動幫你補完CSS3語法】
假設今天要寫一個圓角效果，因為要考慮每個瀏覽器的相容模式，所以我們至少會寫三行：

img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

但是你在compass只要寫

img
+border-radius(5px)

就好了!!
當然，前提是要import一些設定檔進來，有興趣的朋友可以直接參考Compass官網給的範例。

關於Compass的優勢，大致上我比較注意的就是這些，聽同事說還有CSS Sprite的設定簡化，但我還沒研究，所以就不贅述了。

如果看到這，還有興趣的話，就一起來安裝Compass吧!!

Compass安裝使用目錄
1. 前言
2. 安裝Compass與建立專案
3. 嘗試開始寫Compass
4. 後記

compass, css, sass

出書 | 站長親授！WordPress 3.0部落格架站十堂課

muki — Wed, 27 Oct 2010 15:57:27 +0000

站長親授！WordPress 3.0部落格架站十堂課

我在想，今年應該是我的幸運年吧。不只找到了一份不錯的工作，同時在上半年、下半年各出了一本書。從上半年親筆的「親手打造部落格的家：WordPress架站、管理、經營」，到最近這兩天上市的「站長親授！WordPress 3.0部落格架站十堂課」，很感謝各個編輯給我這個機會，讓我一圓出書的美夢。
也希望以後有機會可以再出版更多不同的作品，像是CSS研究啦:P (扯遠了...)，那就讓我們看看這本書的資料，以及有哪些強大的作者群吧！

本書特色

這本書算是「WordPress部落格架設與經營：站長親授的十堂課」的二代作品，鑑於第一版站長親授的書實在賣得太好了，加上wordpress剛好改版到3.0，所以在這個契機下，出版社決定推陳出新，再號召wordpress箇中好手，將大家的架站經驗分享出來。
而我們希望呈現給讀者的，除了讓大家覺得跟一代書內容有很大的不同與革新之外，也不希望他是單純的技術教學書，而是真正在閱讀站長群的心得分享，是本有可讀性的內容書。但對懂得技術的讀者群來說，希望這本書可以讓他們得到更多經驗；對新手而言，在本書兼顧教學與經營觀念的重點上，可以儘量滿足他們的需求。

而這本書在設計上也以簡潔大方為走向。書的內容每一段都會空行，儘量避免圖文混雜。希望讀者有「連貫閱讀」的感受，感覺像是閱讀一本書，而不是一本操作手冊。而圖文教學的步驟也精簡化，沒有文繞圖，圖片也經過特別的立體陰影處理，這樣的設計，是希望讀者在閱讀上不會累贅，也可以凸顯其他心得描述的部分。

作者陣容

至於這次強大的作者群有哪些人呢？除了新加入的MUKI(我)之外，還有很多很棒的作者唷~

--
哇，看到那麼多作者，有沒有覺得很親切、很強大呢!!! 是不是想要趕快看看書裡頭寫了什麼內容！想知道的話，就趕快去買唷:P

販售地點

這次通路的資訊我還未詳細瞭解，目前確切的購買地點如下：
1.博客來書籍館(9折)
http://www.books.com.tw/exep/prod/booksfile.php?item=0010484002
2.天瓏書局
3.城邦讀書花園(79折，折扣到2010-12-05)
http://www.cite.com.tw/product_info.php?products_id=17826
4.金石堂(79折，最高折扣到76折)
http://www.kingstone.com.tw/book/Book_Page.asp?KmCode=2013120134966&ACTID=a0912bonus
5.淘寶網
http://item.taobao.com/item.htm?id=7804498837

章節目錄

這本書由12位站長，總共編寫了10章：

負責部分

接著跟大家說明一下我負責的章節，是第六課 - 出眾的板面特效美技 (感覺有點饒舌:P)

第六課：出眾的板面特效美技 (by muki)

接著放上小小的試閱

合作優惠

這本書有跟Hostev主機合作，提供WordPress專用的方案(先免費試用三個月，滿意再以超低價租用)。
規格：空間2GB，每月流量60GB，提供繁體中文cPanel控制台，支援PHP及MySQL，如用戶需要可代為安裝中文版WordPress程式。
優惠一、申請後免繳款，憑本書截角免費用兩個月
優惠二、上部落格、臉書分享本書心得再送一個月
優惠三、用飽了？想付錢再讓你年年省1000 (特價3000，原價4000主機)

(我自己是覺得空間有點小啦，但是如果只當作WordPress部落格用，可說是綽綽有餘。重點是他的流量好大阿(口水)，我喜歡流量大的空間:P)

教學 | 深入CSS之line-height應用

muki — Wed, 01 Sep 2010 04:47:16 +0000

前幾天改版後，發現留言的版面，頭像上面的樓層顯示出了點問題，在IE6、IE7底下看，會發現文字被截掉(如下圖)。

文字會被截斷

後來詢問CSS達人：風痕影以及SR之後，發現只要設置line-height，問題就會解決。

於是當下我對line-height產生了興趣，想知道為什麼要這麼設定才可以解決字被截斷的困擾，因此上網搜尋了一下，查到了幾篇文章。

在ISD webteam這裡有一篇翻譯過後的文章：深入CSS行高，雖然標題打「深入」二字，但其實這篇是從淺至深講得很清楚，建議大家可以先看這篇文章，理解line-height真正扮演的角色為何。而在簡報第81~83頁就解決了我上述問題的疑惑，原來是因為line-height跟font-size的設定問題，導致inline box比content area小。

接著跟大家推薦的第二篇文章，是來自鑫空間的css行高line-height的一些深入理解及應用，這裡把許多line-height會碰到的問題，還有如何應用都寫得很詳細。大推啊!!!

看完這兩篇之後，讓我對line-height又更加認識了。而有時候我閱讀完文章，會有作筆記的習慣，因此我結合了這兩篇寫出了line-height心得，另外一點是因為上面兩篇作者都是內地的朋友，在語氣以及專有名詞上，跟我們還是有點出入。我會嘗試用大家所習慣的口吻教導大家line-height的知識。也許所學不精、也許未嘗完善，所以看完後如有疑問歡迎提出，謝謝:)

什麼是line-height

line-height的中文是「行高」，簡單來說就是兩行文字中間的那段高度、距離。而行高測量的高度，是以文字的基線(baseline)為準，小時候有在外面補習英文的朋友，應該都曾經被教導要在格線上寫英文吧，而那條對準英文字母的線就是我們所說的基線(如下圖)。

▼而所謂的行高就是基線跟基線之間的距離

line-height屬性及作用

要設定line-height，總共有5種屬性可供運用。我們用以下這段html 做例子：

text wolrd
second line

this is for main
class=main

1.預設值：寫法為line-height:normal; ，行高會依照(該元素設定的文字大小 x 1.2)*的結果作為依據。

▼使用line-height:normal，行高的最終值
p：12(px) x 1.2 =14.4(px)
.main：25(px) x 1.2=30(px)

*1.0~1.2是瀏覽器line-height的初始值，通常我們都用1.2來計算。

2.純數字：範例為line-height:1.8; ，行高會依照(該元素設定的文字大小 x 1.8)的結果作計算。你的數字設定多少，行高就會乘以多少。

▼使用line-height:1.8，行高的最終值
p：12(px) x 1.8 =21.6(px)
.main：25(px) x 1.8=45(px)

3.帶單位的值：範例為line-height:18px; ，不管字型大小多少，你設定行高是18px，他就是18px。單位選擇有em/px/pt...等。

▼使用line-height:18px，行高的最終值
p：18px
.main：18px

4.百分比：範例為line-height:180%; ，行高會依照(父元素文字大小 x 180%)的結果作依據。例如我現在設定body的行高是180%，所有body的子元素(包含body)都會跟著body的設定走。或許你會問，如果我p的行高設150%呢？那就是從p以下(包含p)的子元素都會套用150%的設定。

▼使用line-height:180%，行高的最終值
p：35(px) x 180% = 63(px)
.main：35(px) x 180%= 63(px)

5.繼承：寫法為line-height:inherit; ，如果加上這段語法，就會繼承該父元素的設定。(因為繼承的寫法跟上述四種都不同，所以我單獨拉出來講)。

繼承請以這段html為例：

text wolrd
second line

this is for main
class=main

▼對 main 使用line-height:inherit，行高的最終值
.main(有繼承)：25(px) x 1.8= 45(px)
.main(無繼承)：25(px) x 3 =75(px)
當有繼承的時候，會是自己的文字大小 x 父元素的行高；反之拿掉繼承，就是自己的文字大小 x 自己的行高。

line-height 跟 box model的關係

首先先簡略說明什麼是box，我在這做了一張簡圖給各位參考：

可以看到每個字都有1個inline box包圍，inline boxes再組成line box，line boxes再組成containing box。英文的話是一個單字為一組inline box。

接著我們把其中一段話放大，會發現有一個隱形的box圍繞著文字，他叫做content area，他本身是一個隱藏的box，我們沒辦法對他做任何事情。而這個box的高度取決於文字的大小。

而我在一開始提到的文字截斷的問題，就是跟inline boxes、content area，以及line-height有絕對的關係(講了那麼久終於講到重點了...)

當我們設定好行高之後，box model是怎麼分配他們的自己的高度呢？舉例來說，假設我的行高跟字型大小這麼寫：font-size:12px; line-height:16px; ，可以明顯看出他們的行間距差了4px，接著box model會把這4px除以2，也就是4(px)/2=2(px)，然後把2個2px分別分配在content area的頂部跟底部(如圖)。

也就是說，content area的高度是12px，而inline box的高度是16px。當inline box高於content area的時候，兩邊是相安無事的，因為文字不會被截斷。

但如果，inline box比content area小呢!!?

假設我寫成：font-size:16px; line-height:12px; ，而inline box的高度會優先以行高最為依據，所以inline box高度是12px。但前面提到content area會圍繞著文字，所以文字大小設為16px，content area也是16px。在這種情況下，就會有文字超出inline box(如圖)。

文章前面也提到，content area是隱形的，我們肉眼所能看到的範圍只有inline box的藍底區塊。所以當inline box比較小的時候，它所包覆的文字會被截斷，我們看到的也只是那塊藍底截斷的文字。

這也就是為什麼，當你發現文字被截斷的時候，可以使用line-height來解決截斷問題。但是最有效的方法，還是一開始在設定字型大小以及行高的時候就要先避免該問題出現。

高度是line-height還是font-size決定

最後提到的是高度的問題。我們都知道當一個圖層(div)有了文字之後，就會自動生成高度。那麼這個高度是由line-height還是font-size決定的呢？ (這邊指的不是指定高度height)。

我們先寫一個簡單的CSS+HTML：
大家好，我是阿木

大家好，我是阿木

出來的範例如圖(有興趣的朋友可以把語法copy回去試試看)：

在這邊我就不多做解釋了，相信聰明的各位一定看得出來高度到底是由誰決定的:D。

參考文章

除了文章一開頭提到的網站之外，我在寫這篇的過程中，還有查閱了其他網站的相關資料。在這邊一併放上來給大家做參考。

1.css行高line-height的一些深入理解及應用 / 鑫空間鑫生活
2.[譯] 深入 CSS 行高 / ISD Webteam
(這兩篇真的講得很詳細，再次推薦!!)

3.Box Model - CSS 框框模型 [2*] / 網頁藝術思考
4.CSS3 Text Effects Module / W3C

css, css教學, css語法

語法 | 用css讓區塊水平垂直置中

muki — Tue, 01 Jun 2010 03:31:18 +0000

有時候我們想要做個簡單的首頁(有人稱前導頁、形象頁...等)，或是購物車平台要做圖片展示，會運用到水平+垂直置中的技巧。以前都是直接用text-align:center以及vertical-align:middle兩行解決。

但使用這個語法，有時成功、有時又會失效，在不太清楚原因的情況下，我改用了其他方法實現我想要的區塊水平垂直置中，在這邊也整理出來分享給大家，希望對你們有所幫助:)

首先先看範例：

首頁、前導頁、形象頁，區塊水平垂直置中

這是我部落格現在的首頁，有興趣研究的朋友，可以直接到我的首頁網站觀看。但其實眼尖的朋友會發現我的垂直區塊並沒有完全置中，因為這部分是可以作微調的，以下會做說明。

我使用的css語法設定如下：
#div {
width:450px;/*必須要設定你整個DIV區塊的寬度*/
position:absolute;
margin:-100px 0px 0px -200px;/*調整水平垂直置中*/
top: 50%;
left: 50%;
overflow: auto;
}

如果你想來點特別的，不想要那麼剛好在正中央，可以對margin:-100px 0px 0px -200px;進行微調。像我的首頁是寫成margin:-200px 0px 0px -200px;，所以才沒有剛好在垂直中線上。

參考資料
該語法來源自mycelly.com的Nice and Free CSS Templates，他網站還有更多各式各樣的佈局參考，包含二欄、三欄，甚至是特殊欄位的樣板。找到你想要的樣板點下去就可以看到他的css+xhtml原始碼囉。

購物車圖片水平垂直置中

如果是想要讓每張圖片都水平垂直置中，像是購物車，或是相簿的圖片展示，可以參考以下css語法：

css語法設定
#img {
float:left;
/*以下是寬&高不是圖片的寬&高，而是包覆圖片的DIV的寬&高*/
width:240px;
height:155px;
border:1px solid #d0d0d0;
text-align:center;
/*line-height設定是重點，建議可以設成跟height一樣*/
line-height:155px;
/* IE */
/* 專為IE7調整，140px=155px*0.8 */
*font-size : 140px;
*font-family : Arial;
}
應用在xhtml裡頭可以寫成：

參考資料
該語法來源自Vexed's Blog，這設定方法應該是原作者自己想出來的，裡頭也有詳細解釋到為什麼IE要*0.8做設定，還有更多細部的修正&微調。

大家可以發現原作者提供的語法較長，我的短很多。雖然短，我提供的語法卻同樣適用於Firefox、Google Chrome、Opera、Safari、IE6、IE7、IE8...等瀏覽器，那是因為我的xhtml有做DOCTYPE的Strict宣告，如果你們不希望語法那麼長，也可以考慮做個DOCTYPE宣告喔。

至於如果宣告DOCTYPE呢？只要在你的html檔案最上方加入這段語法就可以了!!!

css, css語法

活動 | WordPress簽書分享會順利落幕

muki — Sun, 02 May 2010 14:59:45 +0000

總計32人到場

2010年5月2日，預定2個小時的簽書分享會，居然延長到3個半小時才結束。這次活動總計有32個人與我共襄盛舉，很開心認識你們，也要特別謝謝老貓、拆組達人，這麼用心的幫我辦活動，還有幫我慶生。(第一次跟拆組達人見面，我才發現原來他那麼痞)

距離活動開始的時間愈近，我的心情也愈來愈緊張，甚至還跟朋友說我想要「臨陣脫逃」這種沒GUTS的話，看到陸續來了很多我不認識的人，只好硬著頭皮跑去跟他們裝熟、哈啦，搞得我朋友都以為我認識那些人。哈，我其實是很害羞內向的，只是為了要讓氣氛熱絡一些，所以才猛當公關每桌跑透透。

害羞內向的偽公關

其實我真正認識，也見過很多次面的，是在我演講時左手邊，還有右前方那兩桌。剩下的我都沒看過，也是第一次見面。

另外還有一家人，包含爸爸、妹妹、弟弟都來捧我的場，詢問了一下，原來是羅賓在上WordPress的課有提到我，所以幫我做宣傳(感謝羅賓)，而且這家人居然一人一本我的書，真是太感動了。尤其弟弟跟我一樣是KOBE迷耶，好開心唷

謝謝你們專注的神情

之後開始演講了，首先是老貓先做開場白，介紹他自己的BLOG，接下來就換我了。我覺得左邊這張照片實在很好笑，所以一定要放上來跟大家分享~

在問答的時候，發現大家真的都很害羞，都愛私下問(我明明就有說你們可以傳愛的小紙條給我，怎麼還那麼含蓄呢。)總之有一位男士問了一個很高深的問題，還有老貓也問了我關於PR6的事情。而這兩個問題我都無法回答，所以有請我們更厲害的WordPress部落客幫忙:P。這三位分別是Carrie、Alice，以及Vista。

Carrie

Alice

Vista

接著是簽書會的時間，在簽書之前拿了一本我帶去的書1元起標，幸好最後有人買，也以300元成交，揪甘心。好難得我也有一堆書可以簽耶(羞扭)!!

300元成交的善心人士

溫馨感動的一家人

Alice / 拆組達人

簽完書，跑去找噗友聊天的同時，突然燈光全暗，我姐端了蛋糕走出來，大家開始唱生日快樂歌祝我生日快樂。原來這是老貓精心策劃的生日禮物，我真的很感動，眼淚都快掉出來了。而且蛋糕不只一個，總共兩個蛋糕耶~

80大壽!!!!!!

開心切切切

另外一個蛋糕

活動進行到後面，連鼎鼎大名的於文強都出現了，聽說他還特地從台中趕上來。我的媽呀，太感動了啦！而我最後就是跟一些好友，還有新認識的朋友愉快合照。

這張好像在跳什麼舞，好好笑

正經板

謝謝漆器特地北上

老貓~超愛你的啦

拆組達人真的很妙

圓滿落幕!!!

謝謝大家的簽名

嗯，有點累了~

1. 想要看更多的照片，請移駕到我的相簿觀看
2. 這次的WordPress分享會，我釋出我演講的PDF檔案，歡迎各位下載觀看

css, wordpress

「親手打造部落格的家：WordPress架站、管理、經營」二刷訊息 & bug修正

muki — Fri, 26 Mar 2010 15:26:36 +0000

親手打造部落格的家：WordPress架站、管理、經營

剛剛收到消息說，我寫的這本書要二刷了!!!

不過可能是因為換了新工作，一直處在早起晃神的狀態，所以一開始收到這個訊息還蠻平淡的。直到過了幾分鐘才慢慢有種興奮的感覺，哇塞，二刷耶，好屌唷!!!! 然後這個月也要開始在大陸發行這本書了，真的很期待吶。

但是....

這邊要跟大家致上深深的歉意，因為我只是個超小咖的作者，所以當我收到要二刷的訊息時，書已經在印製了。

所以....

有讀者發現的BUG仍然沒有做修正。

真的要跟大家說聲抱歉，雖然小咖不是藉口，但他真的是個理由，我完全是最後一個才知道消息的人。OTZ

既然BUG沒有辦法在書上做修正，我決定先在我的BLOG放在網友找到的一些筆誤BUG，供大家做為修正的參考。這些BUG多由SR提供，在這也要大力感謝SR，他真的很用心的看我寫的書、我寫的每個字:)

第7-4頁
第一段倒數第6行：
我們馬上呼叫TinyMCE編輯器隱藏功能，只要點選編輯器最"左"邊的按鈕
更正為
我們馬上呼叫TinyMCE編輯器隱藏功能，只要點選編輯器最"右"邊的按鈕
(抱歉啦，MUKI左邊右邊，真的是傻傻分不清楚。)
第7-11頁
步驟3：
接著打開「wp-includes\js\"(空白) "quicktags.js」
更正為
quicktags.js前面多了一個空白，請把它刪除，路徑這裡是沒有空白的唷。
第7-36頁
第二段：
至於其它國內BSP是否支援MT匯出，可以觀看下表的簡單整理:
更正為
請忽視這句話，我沒有放表....
(抱歉，當時本來要整理一張表的，可是最後漏掉了。)
第8-18頁
8-2-4定義註釋：
註釋的標籤為「...<-->」
更正為
註釋的標籤為「」
(手滑滑很大...)
第9-6頁
第二段：
divc和span的差異
更正為
div和span的差異
(請原諒我再度手滑...)
第9-9頁
子選擇器的介紹：
我在範例程式碼裡頭寫了兩個同樣的id：child；但其實同一張網頁是不能重複出現ID的，所以我這邊是錯誤示範，請大家不要學我....。
(我錯了，我真的錯了)

以上就是我的筆誤彙整，雖然都是一些小地方，但還是很對不起大家。
我在校稿的時候可能眼花了OTZ。

總之，書要二刷了，也要推出簡體版了，我很開心(Y)。

對了，如果還想買這本書的朋友，可以參考這篇文章的賣場整理

css, wordpress, 佈景主題, 日記

「親手打造部落格的家：WordPress架站、管理、經營」上市囉

muki — Tue, 09 Feb 2010 02:24:42 +0000

親手打造部落格的家：WordPress架站、管理、經營

2010年2月2日，我寫的書正式上市囉。

各大通路販售地點

目前已知可在以下地點購買(香港也買得到囉!!!)：
【網路書店】
1. 博客來書籍館(9折)：
http://www.books.com.tw/exep/prod/booksfile.php?item=0010460373
2. 松崗購物網(85折)：
http://www.kingsinfo.com.tw/item_detail.asp?pro_id=7406
3. 金石堂網路書店(79折)：
http://www.kingstone.com.tw/book/book_page.asp?LID=se008&kmcode=2013120106079
4. 天瓏資訊圖書(75折)：
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789867309099&sid=55071
5. PCHOME線上24小時專區(75折)：
http://shopping.pchome.com.tw/?mod=item&func=exhibit&IT_NO=DJAA1W-A46044400&c=A05
(pchome目前是375元，為全台最低價，優惠到3/15日唷)
6. 誠品網路書店(85折)
http://www.eslite.com/product.aspx?pgid=1001113631922795

PCHOME還有幫我們的書做了宣傳banner以及eDM呢，真是感動
→ 宣傳banner位置
→ 圖片：

→ eDM連結

【實體書店】
1. 天瓏資訊圖書
2. 益大資訊
[香港!!!] 3. 溢東昇電腦書公司。 TEL : 2748-6120 。地址 : 九龍深水土步福華街146-152號黃金商場地庫34號。聯絡人 : 鄧太太 OR 阿婷
(建議先打電話問店家有沒有貨，不要白跑一趟:P)

為自己的部落格建個家吧！
不再依附在大型部落格服務平台BSP的主機下，為自己的部落格找個空間、申請網域，設計屬於自己的部落格樣式，這才是經營部落格的好方法。WordPress是一個開放原始碼的部落格軟體，使用者可隨心所欲自訂站台，就像親手裝潢自己的房間一樣，並能藉由模組工具，讓WordPress結合SEO，優\化網路搜尋引擎功能，增加部落格的曝光度。
作者從最初的親自架站、到最後該如何結合網路行銷，不藏私地詳解WordPress經營必經之路，是該好好寵愛一下自己的部落格了！
本書特色
．結合部落格架站及管理，完整呈現部落格經營幕後工程。
．獨家附贈虛擬 LAMP 環境，架站、備份不求人。
．收錄知名部落客：Vista、高登、香腸與WordPress之間的心路歷程。

目錄
‧ Chapter 1 從Web2.0 開始的革命浪潮
部落格並不是崛起的理所當然，Web 2.0大大地影響的我們的網路使用方式，關於Web 2.0和部落格的歷史您不可不知。
‧ Chapter 2 幫你的WordPress 準備一個家
決定用WordPress做為你的部落格管理工具了嗎？先幫部落格找個房子吧！
‧ Chapter 3 申請WordPress專用的域名和主機
擁有自己的網址域名是最能能代表自己的了，讓自己的名字被拉到最前頭來，才能不在茫茫網海中被淹沒。
‧ Chapter 4 安裝及設定你的WordPress
如何安裝WordPress？程序好像很複雜，安裝過程中要注意甚麼？在安裝過程中作者必須要讓你知道的重要觀念，不藏私全部出手！
‧ Chapter 5 建立最完美的LAMP 環境
要在自己家裡架站應該注意的事，建立良好的架站環境。
‧ Chapter 6 基本的WordPress使用
安裝好WordPress也建立好了架站環境後，先來熟悉WordPress的基本操作用途！
‧ Chapter 7 不可不知的WordPress 進階功能
那些在大型部落格服務平台BSP的功能，在WordPress中也能自己做，先做好這一步，日後便能更加有效管理你的部落格。
‧ Chapter 8 改造你的Wordpress 佈景主題
新家需要裝潢，新的部落格也需要設計，打造自己喜歡的部落格佈景主題。
‧ Chapter 9 運用css讓你的主題排版更流暢
CSS能控制網頁的文字、版面設定，舒服的排版也是讓讀者喜歡閱讀部落格的要素之一。
‧ Chapter 10 使用外掛擴充Wordpress功能
提供各種推薦外掛，讓部落格功能更完整。
‧ Chapter 11 絢爛的特效讓Wordpress與眾不同
互動式網頁讓讀者閱讀輕鬆、使用方便，你也可以使用AJAX和jQuery打造一個！
‧ Chapter 12 瞭解部落格受歡迎的程度
部落格的曝光率決定於甚麼？簡單幾個瞭解自己部落格的方法。
‧ Chapter 13 推廣你的部落格
網路行銷的時代開始，怎樣才是受歡迎的部落格？身為部落客要做些甚麼才能讓部落格更廣為人知？
‧ Chapter 14 SEO的重要性
並不是每個部落格的SEO方式都一樣，找出適合自己部落格使用的SEO，才能真正切入重點。
‧ Chapter 15 當部落格開始賺進第一桶金
環境、內容、行銷都有了，部落格就可以開始為我們帶來收益了。利用部落格賺錢是多少都會有的心願，賺錢也有不得不知的方法。
‧ Chapter 16 和社交網站的整合
網路社交是互動的好方法，Facebook、Twitter、Plurk崛起，部落客該如何善加利用？
‧ Chapter 17 自動同步及備份WordPress網站
別讓辛辛苦苦建立的心血流失了，搭配本書附贈的虛擬LAMP環境，輕鬆備份WordPress。

線上試閱
需要試閱的朋友可以到博客來網站進行試閱喔。
優惠活動
本書以我個人名義，跟裕藍多媒體工作室合作，只要購買他的主機方案再加200元就可以獲得這本書(附上我的簽名喔)！

寫在後頭
書出了真的很開心，也請大家多多支持，有任何問題、感想，或是發現錯誤一定都要告訴我
讓我可以做得更好喔:)

css, wordpress, 佈景主題, 日記

分享 | 我的reset.css是這麼寫的

muki — Fri, 05 Feb 2010 14:36:28 +0000

今天aj問我，要怎麼製作reset.css？
我才想到原來我一直沒有釋出reset.css的檔案給大家，文章只有兩篇相關介紹文而已。
所以我決定把我自己在使用的reset.css分享給大家，順便簡單說明我是怎麼設定的

想使用的朋友，直接抓取以下的css語法即可。

reset.css 語法
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}

input, button, textarea,select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {font-size: 100%;}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {*font-size: 100%;}
body {line-height: 180%;}
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

在這個重製表裡頭，我主要的設定就是將整張網頁，包含圖層、表格、項目符號...等的邊界都設成「0」，為的是讓所有瀏覽器在初始條件下完全相等。
此外還有把每個人的字體都調成100%，同樣是讓瀏覽器環境相等。

接著是網頁的按鈕元素，在字體大小、顏色、樣式....等地方我都設定了「inherit」這個繼承屬性，他可以用來繼承父元素的設定。如果不懂繼承的概念，可以參考CSS選擇器說明裡頭第四點：子選擇器，有稍微提到繼承的意思。

重製表主要就是要解決瀏覽器之間的不同，所以我做的設置大概是這樣。

重製表的製作很簡單，只要抓住一個概念，他是為了要讓網頁在一開始，在所有瀏覽器都長得一模一樣。只要抓住這個原則就好了~

有關其他重製表的介紹，可以參考以下兩篇文章：
1. 快速寫好css的五種方法 (在第一點有提到css重置)
2. 打造自己的reset.css

最後請再容許我打一下廣告：我的書上市啦!!!
「親手打造部落格的家：WordPress架站、管理、經營」

css, css語法

出書 | 親手打造部落格的家 WordPress架站管理經營

muki — Tue, 12 Jan 2010 06:23:59 +0000

親手打造部落格的家 WordPress架站、管理、經營

從去年9月開始寫的WordPress書籍，終於要在今年年初問世了。
因為是第一次寫書，也怕可能寫到最後被腰斬、或是寫不好不出版的情況下，我一直都很低調，默默進行我的寫書活動，也因此知道我要出書的朋友們並不多。直到確定送印了，連封面都出來了，我才敢開始大肆宣揚

1/29新增公告：上市日期確定啦!!!!
1/18新增公告：本書的促銷活動
1/13新增：本書的作者陣容
1/13新增：針對上市的Q&A

訂購訊息(NEW)

這本書將在2010年02月02日正式上市!!!!在博客來書籍館已經有商品圖片及內容的介紹，大家可以到博客來看喔~
博客來書籍館＞親手打造部落格的家：WordPress 架站、管理、經營

作者有誰

這本書的作者除了我MUKI之外，還有一位vaemon(虛擬先生)，他在電腦軟體以及虛擬機的操作上算得上是達人一位，有興趣的朋友也可以到他的部落格參觀唷。

關於本書

這本WordPress工具書，主要是寫給入門新手，以及中階使用者閱讀的。
書裡頭會從無到有，教導大家怎麼架設WordPress，還會介紹各種免費、付費主機的差異性 (我想這對新手來說應該是很實用的)。
此外，我也有從WordPress的四大構面來思考，篩選出我覺得很實用的WordPress外掛分享給大家。外掛都有附上安裝檔案，可以從附贈的光碟裡頭安裝，或是直接從WordPress.org下載。
書裡也會獨家解說WordPress特有的php函數運用，這部份的教學對我來說算是一個新的開始，也很高興能將這些東西分享給你們。
當然還有大家最期待的部份!!! 就是看到muki就會想到的「佈景主題」跟「CSS」啦~

在書裡頭我有放上一連串的CSS以及HTML教學，希望大家可以很快速的上手，並且知道如何修改自己的佈景主題。
此外還會分享WordPress相關的實用技巧，包含像是敗家誌的阿諾最想知道的迴響樣式，還有一些jQuery運用，這些都是我沒公開放在部落格，只有買書的人才會知道的喔。

上市Q&A

上市之前想必大家有許多疑問，我也在此一一為大家解答說明

Q.我跟muki認識，交情應該也不錯，那muki會送我書嗎？
A.這邊要跟大家說聲抱歉，雖然我會有書，但因為我收到的贈書不多，所以沒辦法一一送給大家，很抱歉。
Q.一本書大概多少錢？
A.此書為全彩印刷，價格為新台幣500元整。
Q.買很多本會打折嗎？
A.這可能要直接詢問出版社唷，不過一次訂購10本應該會有折扣的。
Q.我買書muki會幫我簽名+合照嗎？
A.如果出版社不會幫我舉辦簽名會，只要你有買書上台北找我，我都一定會幫大家簽名+合照(請自備相機)。
Q.為什麼問你很多資訊你都說不確定？
A.在這要跟大家說聲抱歉，因為我只是一個小咖作者，與出版社聯繫都是透過vaemon虛擬先生，所以我並沒有任何的決定權。

想對大家說

這本書是我的處女作，從去年9月陸續忙到年底，而寫作當時正好是工作最忙碌的時候，所以每天加班回家就是趕著寫書，深怕不能如期交稿。
因此，我投入了非常多的心血在裡頭，包含以前從未深入接觸過的WordPress函數運用，我也特地到WordPress.org官方網站，去一個一個瞭解這些函數是如何運用，嘗試著用最淺顯易懂的方式教導大家。
也許在撰寫過程中，仍然有一些不足的地方，也希望大家看了這本書之後可以告訴我哪裡寫的不好需要修改，你們的意見我都會仔細聆聽的:)

我會陸續在這篇文章裡頭更新書籍的相關宣傳資料，確切上市日期我並不清楚，但是跟大家保證年初一定會上市，所以請跟我一起期待吧。

css, wordpress, 佈景主題, 日記

佈景 | Plurk噗浪佈景主題:per-pur

muki — Sat, 09 Jan 2010 06:53:19 +0000

Plurk Theme : PER-PUR

上次因為plurk佈景不小心被我砍，一氣之下做出rainbow主題。
那麼這次做plurk佈景的原因呢？是因為今天湖人跟拓荒者的這一場，湖人輸了 ......
因為湖人輸了，我很不爽，亟需要某件事情來轉移我的注意力，所以我就跑去做plurk佈景了~

同樣是不開心的情緒，所以做出來的顏色也是偏黯淡系列。本來是想先幫我可愛的咖稱金噗友做黑色主題，但逛到紫色系列的桌布又為之心折，所以跳槽了 !!!!

Plurk theme：per-pur
version：v1.0
theme author：muki
preview：In Picutre
install：http://www.plurk.com/installDesign/35977-33a18d03dc
web browser：ie6.0, ie7.0, firefox3.5, G chrome

per-pur更新記錄
2010-01-09：第一版釋出

css, plurk, 佈景主題

MUKI space* » css

教學 | 用Compass取代CSS，寫個html專案

甚麼是Compass

出書 | 站長親授！WordPress 3.0部落格架站十堂課

本書特色

作者陣容

販售地點

章節目錄

負責部分

合作優惠

推薦本書

教學 | 深入CSS之line-height應用

什麼是line-height

line-height屬性及作用

line-height 跟 box model的關係

高度是line-height還是font-size決定

參考文章

語法 | 用css讓區塊水平垂直置中

首頁、前導頁、形象頁，區塊水平垂直置中

購物車圖片水平垂直置中

活動 | WordPress簽書分享會順利落幕

「親手打造部落格的家：WordPress架站、管理、經營」二刷訊息 & bug修正

「親手打造部落格的家：WordPress架站、管理、經營」上市囉

各大通路販售地點

分享 | 我的reset.css是這麼寫的

出書 | 親手打造部落格的家 WordPress架站管理經營

訂購訊息(NEW)

最新公告

作者有誰

關於本書

上市Q&A

想對大家說

佈景 | Plurk噗浪佈景主題:per-pur