鼓勵此網誌:0
從無名小站搬到天空來,為了要將版面設計得跟在無名的一樣,花了好一番時間修改才完成,雖然有些地方仍然是搞不大懂,而且又是根據自己陽春腦袋裡修改的樣式,但仍然想將這些心得分享出來。
一、隱藏礙眼的連結設定:(使用{display: none; }來隱藏顯示)
#adText 廣告連結(網頁頂端)
#companyBar 「天空部落|Yam」(網頁頂端)
#sponsorAd 贊助商
.rightPage 主頁連結
二、可自由設定位置的:(使用top、left、right、bottom來設定位置)
#commend 推薦這個部落格
#linkLogin 登入|免費註冊|忘記密碼
#adText 廣告連結
#navBar 頻道選擇(網誌|RSS)聯播|相簿|留言版)
.cheer 鼓勵此網誌(範圍限制在文章區塊)
(此項設定的變更會影響相簿內頁的鼓勵此相簿無法顯示)
三、標籤設定的相互影響:
(1) form & .post_commentbody:填寫留言的區塊。
form:網誌內頁中的「私密留言」、「記住我的個人資料」及登入填寫區的文字設定;
日記內頁中為整個「發表你的留言」區塊的設定。
.post_commentbody:僅為網誌內頁中的「發表你的留言」區塊,
在日記內頁中並不接受這個標籤所下的設定。
◎解決方法:可統一於form裡設定,才不會前後牽制。
(2) form & .sideContent form、.rssbody form、#photoViewbody form、
.photomsg_Body form。
a) .sideContent form:旁邊小區塊的「搜尋」區塊或是其他有填寫文字的區塊。
b) .rssbody form:RSS訂閱名單標題區塊。
c) #photoViewbody form:單張相片瀏覽頁中的"照片描述"下方的區塊。
d) .photomsg_Body form:單張相片瀏覽頁中的「發表你的留言」區塊。
◎在form中若有設定背景,則會影響a、b、c、d的背景設定,需將a、b、c、d背景設定為
{background: none;},即可解決。
(3) .post_content & .commentbody。
.post_content:網誌文章內文區塊。
.commentbody:留言內文區塊。
被.post_content 的設定影響,在此做文字設定會被視為無效,
但背景、邊框、留白等設定皆為有效。
(4) .cheer:鼓勵此網誌。
由於網誌文章區塊與相簿內頁區塊內的.cheer是共用設定,故變更位置設定會影響
相簿內頁的「鼓勵此相簿」無法顯示。(關於此點令人十分苦惱,怎麼研究都失敗)
(5) .th_title & #profile th。
.th_title:個人檔案頁面的部落格資料內的「部落格標題」、「部落格描述」、
「部落格分類」之標題設定。
#profile th:個人檔案頁面的部落格資料內的「部落格標題」、「部落格描述」、
「部落格分類」及 個人資料內的「暱稱」、「年紀」、「性別」、「地區」等
之標題設定。
◎設定#profile th會覆蓋.th_title的所有設定,但有個例外,在.th_title的左留白(padding-left)與
#profile th的左留白相較下已有預先的留白設定,所以即使#profile th會影響.th_title的左留
白,也只是累加了留白的距離,而不會與#profile th所顯示的左留白對齊。
四、留言內容的版主回覆區塊設定:
版主回覆的區塊需先輸入.blockquote{}的標籤後,再輸入.bmreply 來設定,其樣式才能生效。
例如:
.blockquote{}
.bmreply{
font-size: small;
color: #595857;
line-height: normal;
letter-spacing: 2px;
background: #eaf4fc;
border: 0px;
}
目前整理出來的大致就是以上四點,以後有想到其他的再分享上來。除此之外,第一次想要修改CSS的人,最好先了解天空版面的樣式結構,現在天空有提供新版的樣式結構表,讓想自行修改版面的人參考,但出得有點慢,在我摸索完且修改完成後才刊出來><。
天空部落新版樣式結構表:
http://pics.blog.yam.com/images/css_structure/sky/index.html














