April 16,2005

CSS 語法〝小〞解析 ( 下 )


.blog
昨天我在那邊改東又改西的
雖然現在的版面我很滿意
可是由於是屬於大版面的,我則比較喜歡小版面
所以昨天一直在研究如何把文章以及回應內容縮小

如果大家也想跟我一樣,縮小內容的版版
就在〝.blog〞加入下列語法↓
MARGIN: 0px 15px 0px;
background-color: #ffffff; ( 這裡是文章最底部的顏色,大部份都是白色,想知道修改後會長啥樣子,那就自己動手試試看吧 ^_^ )
padding-top: 10px;
width: 450px; ( 這個數字是修改小版面的寬度,數字越小,版面越小 )
float: center; ( 這裡是文章及回應版面的位置,想知道修改後的樣子,一樣自己動手試試看吧 )

.comments-head↓
background-color:#8B8B89
仔細找,每一篇日記結束後,會出現〝回應文章〞的字樣
有些版面的〝回應文章〞
字樣下面有底色橫條圈住,這個就是改橫條的顏色
若是沒有橫條的版版,只要在〝.comments-head
增加這個語法,就會出現橫條
如圖:


.comments-body↓
color:#333333
這裡是〝回應內容〞的字體顏色

background-color:#DFDDC6
有些版面有把別人的回應用背景顏色框起來
這裡就是在更改〝回應內容〞底下背景框的顏色
有些人的版版一開始就沒有這個框,同樣的
在〝.comments-body〞增加這個語法就會出現框了
如圖:


圖樣謫自Jertsai

除了回應的底色,我想一定有人會想問
那要如何把回應用框,框起來?!
很簡單,一樣在〝.comments-body〞加入以下的語法↓
border-color: #999999;
border-style: solid;
border-width: 1px;

如果你想像我一樣,把別人的回應框起來
為了避免出現問題,最好直接複製我下面的語法貼入
.comments-body{
font-size:12px;
MARGIN: 10px 0px 0px 0px;
LINE-HEIGHT: 120%; ( 這個地方可以不需更改,原本你的設定為何就為何 )
color: #333366; ( 這裡是回應內容的字體顏色 )
padding: 10px;
border-color: #999999; ( 這個是回應邊框的顏色 )
border-style: solid; ( solid 是實線,dashed 是虛線 )
border-width: 1px; ( 這個是框線的粗細,數字越大線越粗 )
background-color: #ffffe0; ( 這個是回應底色的顏色 )}

.comments-post↓
COLOR:#4E4E4C
每則回應下方會出現留言者的名字與時間
如〝Posted by RICKY at March 28,2005 20:59
這個是在更改上面所述的字體顏色
如圖:


border-bottom:#CCCCCC solid 1px;
有些版面把每則回應用細分隔線區分
這個就是在改回應區分隔線的顏色語法
如圖:


LABEL↓
color:#4E4E4C 填寫回應左方有
姓名、email、URL、記錄個人資訊、回應〞字樣的字體顏色
如圖:


#author 填寫回應姓名旁邊的邊框顏色
#email 填寫回應email旁邊的邊框顏色
#url 填寫回應URL旁邊的邊框顏色
#text 填寫回應內容的邊框顏色
( 以上這些的邊框顏色,在〝border:#aaaaaa〞更改就行了 )
如圖:


background-color: #E4F4FC;
另外,如果想要像我一樣,想要把填寫回應所有的欄位底下用自己喜歡的顏色,只要在〝#author、#email、#url、# text〞這四個的CSS 語法位置最後,加上上述所寫的語法即可,有些版面本身就有這個語法,所以只需要修改色碼部份;若是沒有這個語法的朋友,請自行加入
ex:
#author {
WIDTH: 200px;
border: #aaaaaa 1px solid;
background-color: #E4F4FC; }

如圖:


#links↓
background-color:#FFFFFF
首頁邊欄連結區,有的是框起來的,底色可以更改
大部份都是白色,大家可以隨意更改顏色

border-color:#4E4E4C
而這個是首頁邊欄連結區,有框起來的邊框線顏色

.sidetitle↓
COLOR:#ff6600
首頁邊欄有許多連結,每個人設定的連結大標題都不同
如:〝最新日記〞〝迴響〞這些連結大標題的字體顏色
如圖:


A.aside (A.aside、A.aside:link、A.aside:visited、A.aside:hover)↓
邊欄連結區,每一個大標題下面有著許多的連結
而上面所有的〝COLOR:#4E4E4C〞都是在更改所有連結字的字體顏色 ( 如上圖 )

大致上是這樣
至於有改圖的問題,也可以問我
不過‧‧我會改的東西很有限唷 ^^"

改圖最重要的部份有二:
BODY {
Font-Family: Arial, Helvetica, sans-serif;
MARGIN: 0px;
WIDTH: 100%;
COLOR: #999999;
HEIGHT: 100%;
TEXT-ALIGN: center;
font-size: 12px;
line-height: 150%;
background-image: url(http://blog.roodo.com/theme/news2/bg1.gif);

#container {
MARGIN: 0px auto 0px;
WIDTH: 740px;
TEXT-ALIGN: left;
background-image: url(http://blog.roodo.com/theme/news2/top.gif);

就是以上兩個字的地方
這兩個地方是置圖區
首先,把兩張圖 (有的時候只有一張) 下載下來
比照大小之後,要做一張一樣大小的圖
如此覆蓋上去才會剛剛好
( 把網址的圖換掉 )

還有其他問題再留言問我吧 ^_^

若是怕改醜了或是忘了改了哪一個
我建議剛開始可以一邊改一邊用紙筆記錄自己更改的事項

最後再把更改後的CSS 樣式複製下來,貼在Word上面
如此一來,下次就算改錯了,還是可以再復原丫 ^_^

其實改錯了也不要緊
大不了再改回來‧‧
我自己研究blog有一番感想
當初也是Joe告訴我滴

他告訴我,叫我別害怕
就大膽的改語法,改錯了,大不了再選回原來的版面重新開始囉 ^^"

所以新朋友也一樣,別害怕,勇敢的改吧 ^0^


Posted by happy1211230 at 樂多Roodo! │15:18 │回應(82)Miss. 分享
樂多分類:日記/一般 工具:加入樂多書籤編輯本文
Ads by Roodo! 
引用列表:

 在blog裏用到二個語法~CSS 和 HTML
 如果你想要有一個自我風格 blog 就要會修改 CSS , 
 但想要多一些變化的 blog 那一定就要學會 THML 語法

快速學會HTML 語法【拼貼人生】 at May 22,2005 08:45
回應文章
ㄟ,我跟你說喔!我弄好的ccs,圖片都無法顯示ㄟ!!
原本的css裡就有設定呀!!


回覆:

我不太懂妳的意思呢?
妳指的圖片無法顯示,是指跟我一樣改掉版面的背景圖嗎?

還是在每一篇日記標題前面加上可愛的小圖咧?

問妳兩件事:
1、妳有沒有把圖上傳到blog,然後把圖片的網址貼在CSS 的圖片url ( 網址 )上面?

2、在貼好以後,有沒有到〝更新Blog 網頁〞做〝全部的頁面〞的更新呢?
Posted by esther at April 16,2005 18:49
第一件事:不會弄
第二件事:第一件事不會弄,所以..
我是直接在個人化設定弄得


回覆:

愕~

我現在也沒辦法解釋的很清楚 ^^"
下面的Jertsai 有稍稍做了解釋,若是真不了解,再想辦法吧 ^_^
Posted by esther at April 17,2005 10:22
To: Esther

要在網路上看到任何檔案,必須上傳到所謂的網路空間!如果這樣說不懂!我直接教妳方法八。
樂多有提供像這樣的空間!

1.先進入管理後台
2.然後選擇
3.然後選擇要上傳的圖片
4.完成後觀看圖片網址
通常有兩種方法,一種是按左鍵,讓圖片開在新視窗,然後網址列就是圖片的網址了,
另一種是,按右鑑,直接在檔案列表上,在你要的圖檔上點右鍵>>內容,就會看到圖片的網址了。

最後再根據Elia所寫的圖片跟換,把原本的圖片網址,換成妳剛得到的網址,這樣就行了!
啊~打了蠻多的,不知道你看不看的懂?@///口///@


回覆:

謝謝你的解說
幫我省了一些力 ^^"
Posted by Jertsai at April 18,2005 08:39
Hello~想請問一下你知道要如何更改標題的位置嗎?(所謂的標題是在banner裡的標題!Thank you!)


回覆:

到CSS 找到「.blogtitle」裡的「TEXT-ALIGN: center
紅色字部份就是更改位置的地方
Posted by karen at May 6,2005 11:11
妳好 ^^ 妳的站做得好棒哦!!
想請教妳一個小小的笨問題...
我在個人設定中套用GRAY_MOON的語法
然後在#banner這裡改上我自己的圖檔
但是更新頁面後並沒有出現耶 @@"
我是不是還要再修改哪邊的語法呢??
謝謝~~~(鞠躬)


回覆:

你能給我你部落的網址嗎?

可能還需要等我測試一下才會知道問題出在哪唷

畢竟我沒看到那種樣式的部落
所以單單聽你描述也不太能知道問題的所在
Posted by 烏魚子 at May 15,2005 23:14
http://blog.roodo.com/crimson/

在這邊 ^^


回覆:

已經到你家回覆你囉 ^_^
Posted by 烏魚子 at May 16,2005 23:39
謝謝你的回覆 ^^
後來我把圖放到「#container」還是一樣出不來呢 ><"
我也確定我放圖的位址正確說 @@"
好奇怪哦...


回覆:

我去你家回覆你囉 ^_^
Posted by 烏魚子 at May 18,2005 11:39
我寄給妳了,麻煩妳囉~~~*鞠躬*


回覆:

好 ^_^

那我去收收看唷
Posted by 烏魚子 at May 18,2005 13:57
不好意思 ,能不能教我你的回應欄裡面的那隻草莓小可愛是怎樣放進去的... 我放進去可是他會重複顯示 , 怎麼做才會跟你'回應'的一樣


回覆:

你好 ^_^
放置回應圖的語法請看如何在回應框裡放置圖片?

此篇教學文最下方我又另新增了一篇置圖語法的小介紹,相信對你會有所幫助滴 ^_^

Posted by diablo~ at June 1,2005 11:36
真的可以了 , 謝謝妳~


回覆:

不客氣 ^_^
Posted by diablo at June 1,2005 20:20
妳解釋的好詳細喔 , 可以問奇怪的問題嗎..
有沒有讓, "回應欄"邊框變顏色的方法 (整段的) ,妳上面寫回應欄那邊框是紫色的..我看到的是黑色的 = = (會不會是瀏覽器的問題), 最重要的問題是把滑鼠移到任何選項時會有"虛線"的底線 ,能不能告訴我是怎麼用的~謝謝


回覆:

我不太懂你的第一個問題耶?
我回頭看上面寫的,並沒有看到我有寫任何有關"紫色"的字耶 ^^"

至於第二個問題,由於我某部份是複製從外面down 下來的版型,所以我也不太記得是哪個部份的語法了 ^^"

嗯~可能要花時間找找看唷 ^_^
Posted by diablo at June 2,2005 21:36
#author 填寫回應姓名旁邊的邊框顏色
#email 填寫回應email旁邊的邊框顏色
#url 填寫回應URL旁邊的邊框顏色
#text 填寫回應內容的邊框顏色
( 以上這些的邊框顏色,在〝border:#aaaaaa〞更改就行了 )
應該是這段吧 = = ....
至於每個選項看妳的留言板上面移過去會出現虛線覺得很有趣
沒有也沒關係拉...呵呵


回覆:

哦~
沒錯丫
如果你是想更改填寫回應的所有邊框顏色
那就是修改「border: #aaaaaa」紅色字的部份丫
這個叫"色碼"
我在Blog 學習有收錄關於色碼的網址,你可以到那裡看看唷 ^_^

至於你說你看到的是黑色
愕~由於我沒看到這種情況,我明明是用淡紫色丫 ^^"

你看到我最外圍的那一圈,是我圈起來的
主要是為了清楚註明是哪一個部份,所以我都會圈起來,難道你不覺得那張圖的回應框有兩個線框嗎?
Posted by diablo at June 3,2005 16:59
http://blog.roodo.com/ferrari701230/68a79fae.jpg
剛剛圖沒連好...


回覆:

呵 ^^"
Posted by diablo at June 3,2005 17:00
Hi 唷 !!

又要來麻煩妳了 >o<

我試過把版面縮小但是似乎沒變不知道哪出了問題

我覺得我的版面太過長,又不知該如何把選單欄往上移,傷腦筋呢,想說來請問你囉!


回覆:

你不只把版面縮小吧 ^^"
你還移了邊欄跟本文的位置對吧
其實不是你移位而造成的問題
原本的那個版型,邊欄本來就為了配合top 圖而往下偏移,但你只是做了左右的更改,只是改變方向罷了

其實CSS 還是要靠自己慢慢摸
我對邊欄跟本文位置的固定並不是太了解
我會的只是把美化版面而已
所以這方面我可能幫不上忙 ^^"
Posted by 羅小猴 at June 6,2005 14:49
我的無名小站想用分隔線上去??但是我不知道語法是什麼!!!
而且我不太了解CCS~~SO..可以為我解答嗎??


回覆:

想用分隔線?
不知道你指的是想在哪裡加分隔線呢?
Posted by 飯糰 at June 12,2005 01:57
我看了你的教學,真的解惑不少,希望今晚能有突破性的進一步.
但我仍有個小問題,就是每當我寫完文字後要送出,它會顯示
NO_Connect???
不知為何如此,
1.有時並不想貼圖
2.當我想順利送出,我再試貼圖,但之前的文字也沒了,必須重打,但此次卻可順利送出.
你能幫我嗎?

謝謝!!


回覆:

嗯~那句英文的意思是「沒有連接」

可是‧‧我只遇過「沒有標題、沒有內文」這類的標題耶

這個問題我沒辦法幫你
因為這個無關CSS
而是可能你在發表新文章的時候漏填了什麼
我並不清楚問題到底發生在哪裡
不然你可以寫信到樂多客服問問看丫
mail:mailto:service@roodo.com
Posted by chen at June 14,2005 17:36
問 依 下 唷 !!
你 之 到 版 版 的 門 牌 要 這 樣 做 嗎 ???
我 督 不 會 做 ~!
Posted by 呆 秀 at July 18,2005 15:01
哇係路人~^^
~灌水唷~
~歡迎大大ㄑ我ㄉ版版抗抗唷~
http://www.9cc.cc/afgb.php?A=petty200238
Posted by 小巧可兒 at July 22,2005 20:46
請問如何修改底色
想把 『耀眼的橘色』換掉,一直找不到在那換
可以告知在那邊嗎,謝謝
Posted by arthur at July 29,2005 15:51
不好意思,剛不小心找到了,

一直以為底色會以 『background-color』下去定義,結果不是
反而是用圖去填滿
在 body{ 裡面
有一行
background-image: url(http://xxxxxxxxxxxxxxxxxxx);
background-repeat: repeat-y;

換掉紅色的部分,就會改掉底圖的顏色
Posted by arthur at July 29,2005 16:21
您好,不好意思請教您一個小問題
我想把 banner 右邊的字刪掉,換成回首頁、管哩,並設定連結,我研究了一下實在找不到,可否麻煩提示我一下呢,謝謝
Posted by erick at October 1,2005 21:17
您好,我有照您的方式在基本設定那邊加入 html 語法,當在首頁時的確有更正了,但是當我選擇閱讀文章時,就又變回這樣了,不知還有沒有其他的方法呢 ?
Posted by erick at October 4,2005 22:13
求救求救!可能是我太笨吧...可以請你到我的部落閣看一下嗎?我現在的這個版型很喜歡,但是我想把最上面那張海洋的圖換掉,可是每次換都是下面紫色的部分被換掉,可以請你幫我看看嗎?拜託敗囉!謝謝你
Posted by 小魚 at November 10,2005 13:58
我想請問,

那個 - 相簿表面的字

我想把它變小
請問要怎麼用?!
Posted by 小 Q at January 1,2006 10:24
回覆:

>> 小Q

你好‧‧
我不太懂你的意思耶
我記得樂多並沒有相簿丫

我想你可能是無名的使用者吧

除了基本語法與樂多的問題以外,其他的問題我可能不太清楚唷 ^_^
Posted by 版主 at January 3,2006 01:37
請問一下左邊的分類啦 最新紀事啦 最新回應啦,我想改它的寬度怎麼改ㄚ

甚至我覺得文章的主框我也覺得太小了貼圖都不夠
怎摩改呢

謝謝,請指教
Posted by 土豆 at May 18,2006 01:26
● 土豆
邊欄寬度請至 css 找到「#links」修改裡面的「width: 450px;」。width 是指寬度
--
內文的主框應該是找到「.blog」一樣是修改「width」的部份,不過這個我不太確定,你可以試試看啦!
Posted by 版主 at May 22,2006 14:51
blogtitle和description的間距要怎麼調整呢?
謝謝
Posted by 小小 at July 12,2006 11:59
● 小小

你好,要調整可以用一種方法,最簡單的
那就是你在部落格後台,就是像我最上方寫「若要連結請自行連結,小水滴我已無飼養,很抱歉 ^^"」的地方,在最前面加上 <br> 就會空一行了!
Posted by 版主 at July 17,2006 23:29
您好..我想請問欄位的標題想改顏色..指的是links的border-color..可是我改了,怎麼標題跟標題下的發表文張的標題...顏色一樣..都無法分辨ㄋㄟ??
真是苦惱ㄛ..css >,
Posted by saint at September 22,2006 10:44
saint
我想您應該是在
.sidetitle
.side
內分別去設定border-color吧不是在links
Posted by 路過 at September 24,2006 00:20
我已經將我的背景 … 等
都用好了 ,

我想要知道的是 ..

我們所要看文章時的那個區塊 , 移到中間 ?!
Posted by 小葉子 at February 12,2007 18:15
謝謝你的解說,幫了我不少忙,謝謝!
Posted by 姚太太 at February 24,2007 17:32
jueylga tdkof kioxrd keacfnhq ljhx loufgmz dkwefcu
Posted by reyjdh lgcavmodf at April 16,2007 10:50
zbhif kfyt hzuwx msydlxh zfidpwost jxhoydswb ypcom http://www.nmoej.ofdq.com
Posted by albwv sgzmijftc at April 16,2007 10:50
Posted by cam chat free live no registration video web at April 18,2007 15:20
Posted by cam chat free live no registration video web at April 18,2007 15:23
Posted by cam jasmin sex web at April 18,2007 21:03
Posted by web cam anal sex free at April 18,2007 22:54
Posted by acm asian cam sex web at April 19,2007 00:12
Posted by hot sex web cam at April 19,2007 02:11
Posted by free hidden sex web cam at April 19,2007 06:12
Posted by free web cam sex room at April 19,2007 07:10
Posted by free web cam sex room at April 19,2007 07:10
Posted by cam live sex web at April 19,2007 14:35
你好,
你的教學很清楚,
但我的blog首頁邊欄的"最新的回應",
不知為何改不到留言人的名字顏色,
不是更改body的color嗎?(我改了都沒反應)
因為我現在的板面和留言人的名字都是白色,
要按全選才看到...
若你不明白我的意思,
你到我的blog(http://blog.roodo.com/phoebetam)
看看"最新的回應",在按ctrl+a便明白了,
煩請解答,謝謝你
Posted by 企鵝 at May 29,2007 16:30
你好,多謝你的回覆,
我找到解決辦法了,
但也謝謝你的教學,
我學懂了很多東西。
Posted by 企鵝 at May 30,2007 23:07
你好,多謝你的回覆,
我找到解決辦法了,
但也謝謝你的教學,
我學懂了很多東西。
Posted by 企鵝 at May 30,2007 23:07
Posted by fantasy soccer at September 22,2007 04:56
Posted by david beckham wallpaper at September 22,2007 19:24
Posted by david beckham picture at September 22,2007 21:20
Posted by hpd eskjet at September 22,2007 23:51
Posted by triver hp at September 23,2007 06:27
Posted by drive canon at September 23,2007 14:30
Posted by hp laserejt at September 23,2007 20:25
Posted by h plaserjet at September 23,2007 21:22
Posted by prezident of iran at September 25,2007 07:33
Posted by prezident of iran at September 25,2007 07:33
Posted by presitent of iran at September 25,2007 09:07
Posted by presitent of iran at September 25,2007 09:07
Posted by presiden of iran at September 25,2007 16:19
Posted by mahmoud ahmadniejad at September 26,2007 01:51
Posted by stunt bike at September 26,2007 17:07
Posted by limewire at September 26,2007 19:19
Posted by priyanka chopra at September 26,2007 22:58
Posted by katrina kaif at September 27,2007 00:03
Posted by katrina kaif at September 27,2007 00:03
Posted by eve lawrence at September 27,2007 01:16
Posted by myspace at September 27,2007 03:20
Posted by suzuki samurai at September 27,2007 07:30
Posted by kerry marie at September 27,2007 09:27
Posted by subaru posters at September 29,2007 08:22
Posted by seat posters at September 29,2007 10:04
Posted by edag posters at September 29,2007 12:35
Posted by lincoln posters at September 29,2007 17:45
Posted by panoz posters at September 30,2007 03:46
Posted by mitsuoka posters at September 30,2007 05:26
Posted by cremonese at September 30,2007 14:05
Posted by cremonese at September 30,2007 14:06
Posted by pescara at September 30,2007 14:59
Posted by juventus at September 30,2007 17:12
[URL=http://www.wertino.cn/elezione-amministrativa-gorizia] elezione amministrativa gorizia [/URL] elezione amministrativa gorizia [URL=http://www.wertino.cn/rodriguez] rodriguez [/URL] rodriguez [URL=http://www.wertino.cn/cazzo-pelosi] cazzo pelosi [/URL] cazzo pelosi
Posted by Huanita at June 13,2008 11:49