Paulean R

分享樣式那麼久以來
還真的常常碰到大家問一樣的問題耶XD

所以我覺得把它全部整理起來
是不是比較好呢?
也避免大家老是問一樣的問題嘛XD!!

不然我這種不背標籤英文的人
每次都還要找一下標籤XD
真麻煩是不是??

而且有些害羞的朋友不敢問問題
也可以讓他們偷偷看一下 嘻嘻~是不是^^

ｐｓ這裡的問題解答是以我的版型問題為主唷:)

--------------------------------

⊙隱藏每篇文章的人氣
　在css最末端加上
　.author span{display:none;}
　即可
　

⊙修改文章字大小or顏色
　只要是壯兔兒的版型,文章字型大小或顏色都在
　.article-content{color:#444;font-size:12px;*font-size:11px;} 中
　color:#444;為顏色,修改444為你要的色碼即可
　大小請修改font-size:12px;*font-size:11px; ((前面要比後面多1
　
　另外
　.article-content a{color:#d93174;} <---文章中超聯結字色
　.article-content a:hover{color:#000;} <---文章中超連結移過去的顏色
　
　
⊙改banner的步驟
　我的樣式中可以改banner的版型都會說明如何改banner
　下載時可以點你下載樣式的詳細說明看看
　不過大致上的步驟是這樣:
　1.用photoshop或其他軟體將照片切成需要大小 ((若不會請自行上網搜尋
　2.將圖片傳到你的相簿中 ((一定要將相簿後台的基本設定中的保留原圖勾選起來
　3.複製圖片網址 ((請勿複製中縮圖的網址,若相簿中你的照片可以再放大請一定要先放大再複製網址
　4.取代CSS中 #banner內的網址為你的網址 ((#banner標籤依版型而異,有時候是在#header中
　5.儲存CSS
　
　
⊙改整個BLOG文字大小
　body{font-size:11px;*font-size:10px;}
　我都會將"整個BLOG"的字形大小放在body{}中
　要修改把數值前後各差1即可 ((前面要比後面大
　
　
⊙改"文章標題字"大小或顏色
　我習慣會將標題字顏色大小放在.title h2 a{}中
　.title h2 a{font-size:11px;*font-size:10px;color:#000;}
　修改font-size:的數值 前面比後面多1即可
　顏色的話把000改成你的色碼即可
　另外 .title h2 a:hover{color:#ddd;} 這個是滑鼠移過標題的字色
　
　
⊙修改內文區塊內的行與行間格
　#content{line-height:170%;}
　我都會把內文區塊的行與行間格放在#content裡
　所以只要修改line-height的%數就可以囉:)
　
　
　
-------------------------------------------
　
我現在只想到這樣啦:)
如果有想問什麼就問吧
有時間我會慢慢PO上來XD

看的懂給點鼓勵吧XDDD

因為我真的越來越忙了:)
所以如果要問問題的朋友要多體諒一下歐!!^^
自己先找找看黑^^

如果有其他朋友問別的問題我還會陸續增加的:)!!!

其實呢，我是自己快受不了才發了這篇ＸＤ～，因為我慣用火狐，真的會受不了字型太小導致看不清楚的問題，所以想說ＰＯ出來提醒大家一下會不會我以後看文章比較順阿　囧｜｜｜

我自己也很愛小字 （我的部落格就是小字），那樣看起來比較整齊。

但是，如果只設一個數值。

例如

font-size:7pt;

那在IE看就會是小字,但你用火狐看看,他一定擠到你看的眼睛會脫窗!!!   
我每次一看到字小到我看不清楚的網頁或部落格就直接按X了
字太小會造成用火狐的朋友們的不方便
雖然後來小BE教我說,用ctrl+滾輪,可以變動大小,但我有時候實在懶的這麼做


-------------------------------------

好多朋友們的部落格字都小到我快抓狂

--------------------------------------    
所以發篇吶喊文(教學?)好了
那到底怎樣用CSS來使兩個瀏覽器有不同大小的顯示呢??

其實非常簡單

當你要設字型的時候

假設你要設小字好了
你一定會寫font-size:7pt;  或是 font-size:10px;

這時,你希望火狐顯示出來的字型是比IE多1pt或1px,    

你可以改寫成這樣


font-size:8pt; *font-size:7pt;

或是

font-size:11px; *font-size:10px;

前面是火狐的數值而後面是IE的   *記住兩者前後不可對調 


至於為什麼要這樣寫呢???
原因實在也很難清楚講透透
  或許大家可以上網爬文一下~~~


希望發了這篇文章之後,我瀏覽到超小字的機率能夠稍為小一些些些.....................................
我真的很愛用火狐阿!!!

最近發的這兩個上下板-->靜綠和湛藍,我相信很多人有用,但是卻發生了一個大問題!!

就是放在側欄的音樂播放器怎麼有黑底

還有因為兔兒的上下板的側欄都會設寬高(不設的話物件亂跑空隙鑽會很不雅觀!)

所以導致很多小掛件被切掉跑出捲軸

其實發現黑底問題的時候我弄了老半天,有點挫折,後來一步步審視CSS,又讓我學了一課!!

很開心我沒有中途放棄:)



※首先黑底的部分我已經解決了!請有下載靜綠網誌樣式跟湛藍網誌樣式的寶貝們重新下載^^



接下來我要來一連串的改ＢＯＸ寬高教學,教你們改出自己喜歡的寬高!畢竟每個人需求不同不是嗎?

分成3部分: 1.改全部側欄欄位的寬高   2.改單一欄位寬高(例如改月曆)   3.改個別自定欄位寬高

看你的狀況需要改哪個

首先,我拿"湛藍板"來做示範



改全部側欄BOX的寬高

關於這部份,比較簡單,如果你的掛件都差不多高,改這個就好了!這樣你的欄位全部大小都會一樣!





到後台CSS區,找到以下CSS碼

.box-text{width:200px;height:190px;overflow:auto;}

修改WIDTH值以及HEIGHT值為你想要的數值!

完成!!

很簡單吧:)





當然呀,有人會希望某個區塊高一點,某個區塊少一點之類的,就照我這樣改吧^_^






到後台CSS區,找你想要改的區塊的代碼

我們拿月曆來做示範好了!

湛藍的月曆代碼是以下這些

#calendar{}
#calendar .box-title{display:none;}
#calendar .box-text{font-family:verdana;font-size:10px;text-align:center;}
#calendar table{width:100%;font-family:verdana;font-size:10px;}
#calendar .month-nav{background:#81d6ff;}
#calendar .current-month{text-align:center;}
#calendar .calMonthHeader{}
#calendar td{padding:4px 4px 4px 3px;border:1px solid #81d6ff;}
#calendar td a{background:#cceeff;;font-family:verdana;color:#000;}
#calendar td a:hover{background:#81d6ff;color:#FFF;}
#calendar table th {text-align:center;}

請找有.box-text的代碼

也就是這行

#calendar .box-text{font-family:verdana;font-size:10px;text-align:center;}






在{}裡加入width:200px;height:190px;

數值改成你要的數值

當然在這個步驟

假設你是改月曆,就只有月曆的寬高會變,其他皆不會^^

以下是改各個欄位寬高的代碼

#visitor .box-text{}  /*誰來我家*/
#crumb .box-text{}  /*我去誰家*/
#broadcast .box-text{}  /*好友聯撥*/
#headshot .box-text{}  /*頭像*/
#search .box-text{}  /*搜尋*/
#calendar .box-text{}  /*月曆*/
#hot-article .box-text{}  /*熱門文章*/
#category .box-text{}  /*分類*/
#latest-trackback .box-text{}  /*最新引用*/
#mylink .box-text{}  /*我的連結*/

我只列出幾個大家比較會改到的,如果你想改的我沒列到可以去看官方的架構圖^^




接下來就是教大家改各個自定欄位的寬高

先假設我要改我放音樂撥放器的那個自定欄位的寬高



到網誌上,按右鍵--->檢視原始檔

然後找到你的播放器的代碼是在哪裡,通常用搜尋,搜尋你自訂欄位的標題就可以找到!

我的自訂欄位標題是:音樂播放器

所以我打音樂播放器就找到了我的欄位





請看下圖我畫紅底的部份,就是我的標題,然後往標題的上面看,你會看到我畫藍底的部份,每個自定欄位的數值都不一樣,請把藍底部份複製下來!



然後前往CSS修改區






把剛剛複製的碼前面加上#,以及後面加上.box-text{},貼到CSS最後面

也就是變成--->

#box330312 .box-text{}

然後在{}中加進width:200px;height:190px;

數值改成你自己的

完成!!!


如何,都不會很困難吧^^

希望大家都能成功哦^^


※最後給個小提醒！就是你修改完寬高後，側欄區的大小就不一定會一樣，有些會亂鑽，到時候就請自己玩排排看和改改看，壯兔兒不是神明＞＜，沒辦法做出一個真正符合”所有人”需求的版！
所以得請你們自己改了！對不起＞＜！

不知道這樣的教學祥不詳細呢？？
有的話給個鼓勵吧^0^!!!~~

這篇很長，你想了解CSS嗎?想的話就不要嫌它長耐心看完吧!



怎麼寫CSS呢？　你在哪裡學會CSS的呢？　有哪些網站有教學嗎？　我不會CSS教教我好嗎？

這些令我頭疼的留言讓我不知道該怎麼回覆！所以就下定決心，只要有空就一步步的發CSS教學文，讓大家看懂那些小螞蟻是怎麼一回事！



----------------------------何謂標籤?

首先，要先知道CSS是由很多很多標籤組成的，每個標籤控制成不同的文字、區塊，例如部落格標題，就是個小區塊。

標籤通常是一段說明文字前面加個符號，例如#header，或.title等等...。



----------------------------什麼是控制碼?

而所謂我們在改Blog樣式呢，就是更改、增加、刪減標籤的控制碼，控制該個區塊或文字產生變化。

標籤的控制碼可以是長這樣的：font-size:10pt;這個意思是指，文字大小是10pt。

現在學會了嗎？

趕快點入後台的CSS版型語法看看，阿痾...，一定跟兔兒我一樣，剛點入CSS設計區的時候，就傻了吧...。

阿這些標籤是要控制哪的...，什麼#header #banner的..。



----------------------------了解架構圖,了解哪個標籤控制哪

不要驚慌，真的不要驚慌。趕快去看痞客幫釋出的痞客版版型架構，或是套用後台的”教學版型”，裡面都有每個標籤的中文解釋，知道該標籤是控制哪樣東東。

讓你一步步了解痞客版CSS的架構，慢慢摸索...，想當初我也是這樣慢慢改出來的呀...。（只不過我後來發現教學版型裡其實有些很小的標籤都漏掉了）

說真的痞客幫真的很NICE，釋出了架構圖讓我們了解哪些區塊是包覆在哪些區塊內的，以便於做變化，大家做久一點應該就會慢慢體會到他的好處。（想當初我看到這張架構圖都感動到快哭了）

如果看了解釋還是不知道它控制哪，兔兒我教大家一個超簡便方式，在想知道的標籤裡面多增加一條控制碼bored:5px solid #000;你會發現版面上多一條很粗的黑框,那就是標籤控制的地方。

當然了解了痞客版CSS內有哪些標籤後，就要開始來設定我們的CSS拉!




----------------------------怎麼控制標籤?介紹#header

來，我們來看看，我們來找一個標籤當今天下手的目標ˋˊ。

阿哈！我看中了#header

先介紹#header，他是控制網誌四大區塊中的其中一塊：橫幅，橫幅感覺好術語，不懂他在講什麼，趕快點一下痞客板的架構圖看，#header內有什麼？

原來它裡面有#banner,#banner內又有網誌的標題還有描述，標題通常都是什麼：”壯兔兒的小小世界”之類的，描述就是它下面那個，例如”我的世界裡有好多樣式分享”。

然後來包覆著一些烏ㄟ抹ㄟ...，總之#header就是網誌上面那一大塊代表你網誌的特色的東東。

來看看#header內可能會控制些什麼吧！

#header{
background:#000000;
font-size:10pt;
bored:1px solid #000;
width:500px;
height:100px;
}

我來解釋一下，以上都是非常簡單的語法，今天的課程你只要對他熟悉就好了，我最後會附上最簡單的CSS控制碼供大家下載回去，想要一步登天不可能，趕快打好底子才最重要！

首先#header是個標籤，大家看到這裡應該都知道了吧！不知道要打屁屁，趕快回去重看！



---------------------------語法怎麼寫?

標籤後面會有一個大括號{}，裡面包覆著你要控制的控制碼。

控制碼是什麼？看看掛號裡那些，我先對第一行做解釋。

background:#000000;

首先background是指背景的意思，而:後面的是一個顏色的色碼。#000000是黑色的，注意色碼都是6個數字前面加個#。（有些人只有３個數字是因為CSS會自動重複後面的，所以#333就會＝#333333）

所以background:#000000;寫進去後，你的橫幅背景就變成黑色拉！記住，給個控制碼的最後面都有 ; <---分號

下一個（跳）

font-size:10pt;

上面那段是指字的大小變成10pt，這會影響你整個#header包覆的區塊內的所有文字，像標題阿，描述阿等都變成10pt，除非你進一步對更小的區塊做描述，以下做個範例。

#header{
font-size:10pt;
}
#banner h1 a{
font-size:20pt;
}

上面那段語法一寫出，就會導致header內的字全部變成10pt，唯讀標題變成20pt。

再來，bored:1px solid #000;，這個是在header的周圍加框
1px指的是1px寬  solid指的是實線 #000指的是黑色。


最後兩個描述
width:500px;height:100px;

這兩個好解釋了，前面的是控制寬，後面的是控制高，就是控制header的寬和高!






OK!

簡易教學到此結束!(謎:寫得落落長還說簡易...)

大家趕快去改改看教學版型吧!

祝你們成功~(揮~)


以下可以下載壯兔兒我整理出來的簡易CSS控制碼

控制文字   控制背景   增加框線　　寬高:width:500px;  /*寬500px*/   height:500px;  /*高500px*/

喔對，被/*　*/包覆住的東西在CSS內是會被忽略的，所以大家可以在CSS控制碼後做個小筆記。

有問題留下來吧:)

　　ＣＳＳ其實蠻多控制碼的，當然要上手得花一些時間

　　我還沒有時間好好整理出ＢＬＯＧ　ＣＳＳ　初學者應該了解的觀念等等，作為我網誌教學的先鋒0.0

　　不過倒是在我整理出教學時先給各位看看一個好網站

　　這兩個網站都是以語法教學為重，讓你設計出個網站，雖然性質不是ＢＬＯＧ教學，但是會ＣＳＳ的人就知道他的好了：）

　　可以從基礎釐清一些觀念，但這個網站是英文的，對不懂英文的人來說，可能有些眼花撩亂，不過我是覺得還好＠＠，我的瀏覽器是ＦＩＲＥＦＯＸ，它會自動幫我解釋我不會的單字ＸＤ，不然我的英文也可說是非常差的＝　＝...。

　　先介紹第一個網站好了，她裡面有很多ＣＳＳ控制碼，可以讓初學者一次學會，在ＣＳＳ中其實有很多標籤，例如＃ＢＡＮＮＥＲ｛｝

　　把控制碼放在｛｝裡，就可以設定該個區塊的內容。

　　而控制碼就是類似這樣

  width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;

　　結尾一定會有分號

　　放在｛｝裡就能設定各個標籤

　　放進去就便這樣：

#banner{
 width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

　　另外提供一個小技巧，如何用最簡便的方式知道那個標籤是控制什麼的呢？這方法有８成都有用

　　就是在｛｝裡加入border:20px solid red;

　　然後儲存後到你的ＢＬＯＧ看，被紅色框起來的地方就是那個標籤控制的區塊拉︿︿！

　　廢話不多說，我趕緊貼上這個有很多控制碼的網站給大家瞧瞧　　點我

　　不懂的地方一定要問我喔！～

　　大家有期待我暑假發的教學文嗎ＸＤ？


　　不過我對自己沒有太大的期待，因為我好像也是個半吊子0.0，怕朋友們來問問題還被問倒　囧...

　　希望大家多支持囉！

　　教學相長！