有在玩BLOG的新手格友們，如果有要美化您的BLOG，或是活用CSS的話，參考下面的專業文章唄!!




來源文章：芭樂園BLOG




目前 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 語法的教學連結，我的語法很多是從這裡拿出來用的，所以建議您以不用記憶的方式瀏覽一遍，先有個概念。


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



　


管理部落格→面板設定→各式樣板→分類
選取喜愛的圖樣，在該圖上點按一下，會跑出另一視窗
這是內定的樣板及其範本顯示。


在該圖示上按右鍵選【複製捷徑】貼在記事本可得


例：http://tw.yimg.com/i/tw/blog/css/cat7_7/cat7_7sp.jpg


將最後之【cat7_7sp.jpg】內之 sp 刪除，也就是整式改為如下


http://tw.yimg.com/i/tw/blog/css/cat7_7/cat7_7.jpg


這就是該底圖位址


　



色板：


這是依 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












這是微軟軟體的基本色板，上面有的就不再提供色碼


黑 000080 藍 008080 青 008000 黃 00FF00 棕 800080 紅 808000 橙 808080> 白 C0C0C0
















等有喜好的顏色再添加


FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF 5E1818 F0F0F0












FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF F4ECF1













前言 部落格主體 部落格頂部的三橫框 主文區 左右欄框
其他功能效果 網路空間申請教學 部落格範本 發文 常用語法 CSS 語法教學連結
arrow
arrow
    全站熱搜

    藤小二 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄