close


 ～~感謝"芭樂園"分享~(請關掉背景音樂)~～ 














目前 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 內定色所做的色板，

使用時要注意主色會受底色及邊色影響而有誤差。






















































































































































































































































































































































0000001111112D2D2D4343435B5B5B7373738B8B8BA2A2A2B9B9B9D0D0D0E6E6E6FFFFFF
7F7F00BFBF00FFFF00FFFF40FFFF80FFFFBF525330898A49AEA945C3BE71E0DCAAFCFAE1
407F0060BF0080FF00A0FF40C0FF80DFFFBF3B5738668F5A7F97578A9B55B7C296E6EBD5
007F4000BF6000FF8040FFA080FFC0BFFFDF033D214380597FA37C8DAE94ACC6B5DDEBE2
007F7F00BFBF00FFFF40FFFF80FFFFBFFFFF033D3D347D7E609A9F96BDC4B5D1D7E2F1F4
00407F0060BF0080FF40A0FF80C0FFBFDFFF1B2C4838537657708F7792ACA8BED1DEEBF6
00007F0000BF0000FF4040FF8080FFBFBFFF212143373E68444F75585E828687A4D2D1E1
40007F6000BF8000FFA040FFC080FFDFBFFF30244954466F655A7F7262849E8FA9DCD1DF
7F007FBF00BFFF00FFFF40FFFF80FFFFBFFF4A234A794A72C0A0B6ECDAE59363869D7292
7F003FBF005FFF007FFF409FFF80BFFFBFDF451528823857A94A76BC6F95D8A5BBF7DDE9
800000C00000FF0000FF4040FF8080FFC0C044141582393CAA4D4EBC6E6ED8A3A4F8DDDD
7F3F00BF5F00FF7F00FF9F40FFBF80FFDFBF482C1B855A40B27C51C49D71E1C4A8FDEEE0


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









































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


等有喜好的顏色再添加





























































FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5E1818F0F0F0
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF4ECF1





















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





myshero重新整理編輯\97.07.29-02


arrow
arrow
    全站熱搜

    Myshero 發表在 痞客邦 留言(0) 人氣()