部落格佈置：前言－DIY玩化學

目前 Blog 正於網路大眾化中盛行著，每一個玩 Blog 的人都想把自己的 Blog 佈置得精緻美觀，但受限於 Blog 的提供方所給附的都是陽春調整功能，讓使用者無法將美化 Blog 環境依己意盡情發揮；那～如何來美化它呢？想要詳細研究 CSS 語法的人，這裡提供一個CSS教學網站的連結請自行前往鑽研，這裡不再敘述，而以下將就如何以 CSS 語法來佈置 Yahoo Blog 做為解說。

雖然引用說明是一種尊重，但我這個人不反對您將我的文章複製張貼後沒有告知，您也不用推介我這頑老，因為我很看不慣一些人到處抄襲、拼湊後被複製了還哇哇叫說是被偷。但是…這裡的文章常會做修改、添加，所以您最好是使用引用，這樣如這兒有了修改，對想學習的人才能有多一點找得到的幫助。另外，您如有新見解或發現新用語，敬請知會我一聲；彼此互相學習，是成長猛進的良方。

底下是剛登錄 Yahoo Blog 時的 CSS 語法，只是給您參考用。
為了分類解說及測試，順序上有做了調整，裡面的註解是加進去的；也希望您能於參閱後面解說時，自己能修改試試體驗一番。

/*customization CSS　＜啟用 CSS 製作＞*/

/*Background　部落格底布＜背景＞*/
body{ background:#f6f6f6 }

/*Master header　第一橫框＜主頂欄＞*/
#yhtw_masthead{ color:#666; background:#c5c5c5; filter:alpha(opacity=100); opacity:1; moz-opacity:1; }
#yhtw_masthead a, #yhtw_masthead a:link, #yhtw_masthead a:visited, #yhtw_masthead a:hover{ color:#fff; }

/*Blog title　第二橫框＜部落格名稱＞*/
#yblogtitle .mbd,#yblogtitle .mft{ background-color:#A4A4A4; color:#666; }
#yblogtitle h1{ color:#333; }

/*Opacity for blast　招呼語框透明度＜突出物的透明度＞*/
#yblast .bg { zoom:1; filter:alpha(opacity:100); background: url(http://tw.yimg.com/i/tw/blog/yimg/blast_bg1.gif) no-repeat}

/*Main content header　主文區標題＜主要內容標題＞*/
.yc3pribd .mhd{ background:#cdcdcd; color:#333; }

/*Main content body　主文區內容＜主要內容主體＞*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#fff; color:#666}

/*Nav module header　左右欄標題＜可控制的組件頂欄＞*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#e3e3e3; color:#6A8F9A; }

/*Nav module body　左右欄內容＜可控制的組件主體＞*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#f6f6f6; color:#666; }

/*定義月曆上今天日期的字色*/
#ymodcal .mbd td strong { color:#333; }

/*Links　連結字串的控制＜高爾夫球場＞*/
a,a:link,a:visited{ color:#4B97AD; }
a:hover{ color:#88D0E6; }

上面語法裡 /……/ 這二個符號之間的文字串，是在做註解用，好讓使用者容易找到要用的語句，並非是用來產生效果的語法。而＜……＞是英文字串翻譯註解，這是讓英文程度和我一樣粉差的人看的。
例如：/*customization CSS*/，這是在宣告 CSS 的啟用，所以裡頭我加上註解成了 /* customization CSS　啟用 CSS 製作 */，這裡的【*customization CSS　啟用 CSS 製作*】放在 /　/ 裡都是在做註解、容易找尋用，而非語法。
又例如：/* 定義月曆上今天日期的字色及大小 */，這也是添加上去用以說明底下語法是作用於何處的。

Yahoo Blog 的部落格 CSS 定義是從主頁的【管理部落格】→【面板設定】→【自訂樣式】進入添加及修改的。您於了解後應【清除】裡面所有語句，再植入新的語法，或是從我製作的範本內挑一個貼上再加以潤飾，否則有些語法的重複將造成系統的不穩定，甚至無法進入頁面。
另外要注意的是，請勿將您的網頁做得太複雜、花俏、龐大，這只會讓想瀏覽您網頁的人，因傳輸緩慢而放棄您。再說 Yahoo 是個生意人，他給的這種免費空間，頻寬並不大，哪天…等 Yahoo 拐足了人數，就會開始收費的。　所以建議您在學好部落格佈置後，利用您的 ADSL 公司提供的網頁空間，做個專屬網頁吧！

教學解說上將分成下列幾類。您應從頭開始看起，很多在前面有解釋過的，後面將不再贅述：
前言：也就是本篇文章
部落格主體：將講部落格底色、邊框及捲軸、滑鼠
三橫框：指的是頂欄、部落格名稱框、招呼語框
主題區：是指主要內容區也就是您現在所看的這個區域
可控欄框：也就是左右二側之欄框，內容含括定型及自訂框的底色、字體、插圖
其他功能效果：將講連結字串的字色、插圖及內文、左右欄框框線
部落格範本：這裡將製作幾則樣式讓您參考運用
發文常用語法：將講一些基本的文字、插圖、插外部連結、……等語法。
網路空間申請：這裡將舉如何申請香港雅虎為例
CSS 語法教學連結：這是深入研究 CSS 語法的教學連結，我的語法很多是從這裡拿出來用的，所以建議您以不用記憶的方式瀏覽一遍，先有個概念。

也許……，您應該先申請個網路空間，好放置您於佈置時想用得上的圖片、音樂、動畫、影片、網頁……等等，所以您可先進去看網路空間申請這篇教學。

色板：

這是依 Yahoo Blog 內定色所做的色板，使用時要注意主色會受底色及邊色影響而有誤差。

000000	111111	2D2D2D	434343	5B5B5B	737373	8B8B8B	A2A2A2	B9B9B9	D0D0D0	E6E6E6	FFFFFF

7F7F00	BFBF00	FFFF00	FFFF40	FFFF80	FFFFBF	525330	898A49	AEA945	C3BE71	E0DCAA	FCFAE1

407F00	60BF00	80FF00	A0FF40	C0FF80	DFFFBF	3B5738	668F5A	7F9757	8A9B55	B7C296	E6EBD5

007F40	00BF60	00FF80	40FFA0	80FFC0	BFFFDF	033D21	438059	7FA37C	8DAE94	ACC6B5	DDEBE2

007F7F	00BFBF	00FFFF	40FFFF	80FFFF	BFFFFF	033D3D	347D7E	609A9F	96BDC4	B5D1D7	E2F1F4

00407F	0060BF	0080FF	40A0FF	80C0FF	BFDFFF	1B2C48	385376	57708F	7792AC	A8BED1	DEEBF6

00007F	0000BF	0000FF	4040FF	8080FF	BFBFFF	212143	373E68	444F75	585E82	8687A4	D2D1E1

40007F	6000BF	8000FF	A040FF	C080FF	DFBFFF	302449	54466F	655A7F	726284	9E8FA9	DCD1DF

7F007F	BF00BF	FF00FF	FF40FF	FF80FF	FFBFFF	4A234A	794A72	936386	9D7292	C0A0B6	ECDAE5

7F003F	BF005F	FF007F	FF409F	FF80BF	FFBFDF	451528	823857	A94A76	BC6F95	D8A5BB	F7DDE9

800000	C00000	FF0000	FF4040	FF8080	FFC0C0	441415	82393C	AA4D4E	BC6E6E	D8A3A4	F8DDDD

7F3F00	BF5F00	FF7F00	FF9F40	FFBF80	FFDFBF	482C1B	855A40	B27C51	C49D71	E1C4A8	FDEEE0