2008年9月27日 星期六

Blogger模版CSS語法細部介紹(下)

上次把body、header、Main、post大概介紹完了,接下來就是Sidebar、comments及footer的部份,這部份比較複雜,而且很多模版設計者都有與眾不同的樣式,所以講解起來有點困難,大概介紹基本觀念及參考的方向。

不過這裡有一個部份是關於每篇文章下方都有個回到首頁、較新的文章及較舊的文章連結,和Atom的連結,


回到首頁,預設在中間
#blog-pager {
text-align: center;
}
較新的文章,預設在左邊
#blog-pager-newer-link {
float: left;
}
較舊的文章,預設在右邊
#blog-pager-older-link {
float: right;
}
Atom的連結,就是提醒讀者訂閱RSS的按鈕,通常若有使用feedburner,這一項可以隱藏,預設在左邊
.feed-links {
text-align: left;
}
如果你不想網頁上出現這些連結,只要在裡面加上一行敘述即可,他就會隱藏了
display: none;
如果你想更改顯示位置,也是改left或是right即可,而如果你想用圖片顯示,可以參考 將Archives頁面底部的文字導向連結圖形化這篇的作法,綸太郎自己倒是沒試過。

【Sidebar】邊欄
大部分的模板為一欄式,或是兩欄式的樣式,當然比較專業的會使用到多欄式或是綜合式的邊欄,所以元素的定義名稱都不至相同。

如果你本來只有一欄,想再加入一欄可以參考(非固定式)把Blog設為三欄—Not my business一文介紹,不過由於現在三欄式的模板不像以前那麼少,建議還是從模版資源(blogger templates)裡找到一個喜歡的來用就好了,不用動手自己改。

#side-wrapper { 整個邊欄區的定義,有的會再分為sidebar1、sidebar2
#sidebar h2 { 邊欄區的標題定義
.sidebar ul li{ 邊欄的項目條目,這裡我們常會用項目符號,來讓排版美觀,可參考Blogger 新手基本技巧問答(二)
.sidebar .widget, .main .widget { 邊欄及主欄的widget格式,通常我會設與左右的距離,譬如
padding: 0 5px 0 5px; (左右都空5px)

【comments】意見區
這個在Blogger 新手基本技巧問答(三)有提到一些技巧應用,如加上圖片或是位置調整。


#comments h4 { ,這個通常會用來定義回應區標題區,就是第一行字,就是 6人發表意見,
.comment-author { 回應區作者
.comment-body { 回應區主體
.comment-footer { 通常指發表日期時間
comment-link { 張貼意見的連結
而有些模板會用
#comments-block {,也是代表回應區,因為回應區通常是一大塊,然後在後面加上相關的定義名稱,如 #comments-block .comment-author { 就是回應區的作者格式定義。

這裡我有使用作者回應會和網友回應的顏色不同的Hacks,請參考高亮显示作者评论与评论通知,他會多出.comment-body-author p { 的定義,由於是簡體中文,加上不是每個模版都適用,如果你想要這種效果,可以參考Skyvee的為 blogger 留言區(comment) 加個對話框吧!會較容易上手,不過我因為一開始就使用上述簡體版本,skyvee的還沒用過。

【footer】頁尾區
通常頁尾很簡單,我個人是不喜歡使用太複雜的元素,有的人會在將此區再劃分為三欄或是兩欄,因為想要放的小工具很多或是整個頁面的考量,先前綸太郎也有嘗試用過這種模版,但是效果並不好,一般人比較不會想要點選這裡的東西,因為滑鼠要捲到最後,照一般人的使用習慣這種版面比較不討好,不過倒是可以放些資訊型的文章供網友參考。

通常在這區我會在這裡放上版權宣告及網站相關訊息的文字,及登入Blogger後台的連結,在Blogger 新手基本技巧問答(四)一文裡有提到。

這裡通常設footer-wrapper,或是只有footer的定義,如果想要加上背景圖片,一樣是
. footer {
width: 980px;
background: #000 url("圖片網址") no-repeat;
}
有些模板你要再設height: 80px; 高度,才能將你的圖完整顯示,或是限制只出現某部份,這是要注意的地方。

而footer h2這是頁尾區網頁元素的標題定義,如果你想有標題時可自行定義內容。

這裡一樣會有 a 文字超連結的設定顯示樣式,可以參考上篇說明。

其他還有像是
.code(程式碼區) ,顯示程式碼區域的格式,可參考[筆記]在文章裡顯示優質的程式碼區一文作法。
.blockquote(引用文章區),引用他人文章特別顯示的格式,通常一般模板都會有blockquote定義,如果你不喜歡也可以自己設計,參考善用及改造 blogger 中的引用文字(blockquote)功能一文介紹再加以變化花樣即可。

網路上關於寫Blogger技巧與Hacks的高手非常多,有興趣的都可以利用Google加以搜尋,找到你想改頭換面的效果功能,多多參考他人的文章對自己改版也很有幫助。

因為常常換模版,也常修改模板,而且最近模板資源真的是大幅度的增加,所以建議網友們選一個適合自己需求的template,強過自己去修改模板,因為修改模板真的是很辛苦的事情,如果你仍然有興趣,還是可以慢慢試,從錯誤中學習成長,多多參考網路上的教學,至少從中學到的都是你自己的資糧。

延伸閱讀:
Blogger模版CSS語法細部介紹(上)
Blogger template模板教學課程---CSS外觀解說

28 則留言:

  1. 綸太郎,你文章後面幾個blogger高手也是我常去朝聖的網站,真的非常受用!

    回覆刪除
  2. 是啊,blogger裡高手如雲,可取經之處很多,我也都還在摸索中。

    回覆刪除
  3. blogger in draft
    最近有沒有甚麼新消息阿?

    測試超久的

    回覆刪除
  4. 請問一下

    我照著指示做了

    可是在儲存設定時卻總是出現

    bX-4ks1iu 之類的錯誤碼訊息

    我該怎麼辦呢?

    回覆刪除
  5. 抱歉,你這樣問,我很難回答,照著指示,我不知是哪一個指示造成這個錯誤訊息,通常是你的code有錯,比如少一個;或是多一個},都有可能造成錯誤,如果是裝Hacks程式發生錯誤,可能就要請問原作者了。

    回覆刪除
  6. bX-4ks1iu 之類的錯誤碼訊息有可能是BSP內部忙碌造成的錯誤,前些日子我在設計版面的時候,就常常出現這一類的訊息,多試幾次,或者過一段時間再試試應該就沒問題了。要不然就換用火狐進去,每次出現這個訊息,我改用火狐進去就一次OK...。

    回覆刪除
  7. 太郎你好,

    你的留言箱不见了,所以只好在这里问你。

    请问如何把博客做成一个纯文本格式,这样可以解决那些因为我博客多媒体无法打开而不能阅读我文章的问题。

    我的意思是在我的博客做多应该超级链接到一个纯文本的格式,是否他依然可以留言?

    谢谢

    回覆刪除
  8. 謝謝南野紗羅提供的解決方法,筆記起來。

    To thepplway,你說的我沒法作到,也不知如何做,除非你自己再做一個純本文的網頁,連接到那。

    回覆刪除
  9. 針對南野沙羅所提供的解釋,我個人有一點小小不同的看法。如果在儲存blogger語法時遇到bX-4ks1iu,另有一種可能性是cookie的問題,清cookie即可解決。

    我之前在網誌改版也碰到這棘手的問題,看到ptt有人這麼說以後,果真清完cookie問題就迎刃而解。

    但有時一些cookie清了也很頭大,這時建議可以用類似google chrome的「無痕視窗」來修改,我個人的作法是在firefox編輯css,大致沒問題後在全部複製貼到chrome預覽、儲存。過程裡就完全不會碰到問題了。

    by自己改版三天的經驗

    回覆刪除
  10. 謝謝sango也這麼熱心的提供意見,Chrome我只試用一天就沒用了,下次再來試試,通常我的錯誤訊息都是在套用模版時會有問題,一般css編輯倒是沒有這問題,所以經驗不足,很高興看到大家願意提出解決方法。

    回覆刪除
  11. 不好意思,我想請問一下,我跟你用一樣的template,可是我用ie開首頁是正常的,但用火狐開就有問題,這是什麼樣的情況勒?

    回覆刪除
  12. 我的模板有修改很多地方。

    回覆刪除
  13. 你好,在这里有学习到一些知识,但是我有个问题要问。
    我想在我的mainpost加上一个框,但是不着哦该如何加上。。

    请你给予指点。。

    回覆刪除
  14. 通常是在
    整個文章區
    .main-wrapper{或
    個別文章.post{
    加上
    border: 1px solid #色碼;
    至於border的型態,你Google上找找應該會有很多格式,solid是直線、dotted是虛點線等等,你可以參考我上篇介紹的。

    回覆刪除
  15. 您好~
    可否請版大幫忙看看我BLOGGER這邊的問題
    它的邊欄顯示非常慢,雖然邊欄放的東西會拖慢速度,可是套別的版型開啟速度就不會這麼慢了
    找了很久還是不知道原因出在何處...T_T

    麻煩您了!感謝

    回覆刪除
  16. 阿凜,這篇"2008.6.11---Ze~~~~~~"你的繼續閱讀有問題,<span class="fullpost">後面少了</span>這個程式碼,看看是否是這個原因。

    回覆刪除
  17. 似乎不是那個問題耶
    因為還沒更新那篇文章前就有這個問題了
    不過還是感謝您的回覆><

    回覆刪除
  18. 因為我用IE6看,在"會不會有人叫我切腹謝罪"這段文字後,網頁就整個停住了,不是速度慢的問題,是根本沒法再繼續跑,所以我只能這樣判斷,邊欄那些都沒有出現,所以判斷是繼續閱讀造成的。

    回覆刪除
  19. 原來如此@@
    因為我這邊看顯示都正常,只是比較慢
    重新加上< /span>邊欄速度還是延遲滿嚴重的。

    回覆刪除
  20. 我記得以前有個網友跟我提過網頁有問題,後來他移除ClockLink掛件就好了,不知是否是個原因,你可以試看看,不過目前我看你的網頁是正常的,只是在ie6你的邊欄被擠下去了。

    回覆刪除
  21. 綸太郎~我想問一下~
    有沒有辦法把邊欄整個改成透明沒有顏色的.
    例如這個版面這樣~
    http://junblogspot.blogspot.com/

    回覆刪除
  22. 你可參考這篇的css語法教學。
    http://blog.xuite.net/jeanson61/xuite/279149

    回覆刪除
  23. 恩恩!謝謝!!!那我想再問一下@@

    比如果我要特別對某個邊欄"例如:文章分類"限制那個邊欄的背景是透明.

    那我是要在(head)裡面寫一個東西.然後再去後面(body)把他包起來嗎?

    因為我不管在(head)裡面的任何一個有寫sidebar的裡面加上
    background-image: none;
    background-color:transparent;

    他都不會有反應呢~冏

    回覆刪除
  24. 在背景圖語法後面加上filter:Alpha(opacity=60)也可,opacity數值越小越透明。
    例如
    background:url(圖片網址) repeat filter:Alpha(opacity=0);

    這個方式你試看看,至於個別元件,目前我有試過無法成功,以前是可以修改的。

    回覆刪除
  25. 綸太郎!!!我成功了!!超開心的!!!!\^0^/

    我發現我的Archive是包在<#sidebar-wrapper .widget-content>裡面.

    所以我就多寫一個<#sidebar-wrapper .archive-content>.

    然後再到下面去把Archive包的東西改成我自己新寫的.

    最後邊欄裡面就只有Archive的背景是透明的!!

    還是很謝謝倫太郎提供的opacity這個辭囉!!!!

    回覆刪除
  26. 板大不好意思
    我看過你的教學:水平列選單
    但我弄不出想要的,希望能不吝指教
    http://tw.knowledge.yahoo.com/question/question?qid=1010081809759
    這是知識+連結,希望能解惑

    回覆刪除
  27. 垂直選單我沒有研究,你可以參考看看這篇,是否有幫助?
    http://www.minwt.com/?p=831

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能