原來的部落格樣式(Teatime)雖然素雅,調性也很契合,但淺白的底色,似乎不夠吸睛,無法凝聚訪客的注意力; PO上相片後,淺色的襯底也難以突顯相片的色彩。在參考了別人的部落格後,覺得底色為深色的版式,表現力比較佳。

瀏覽了痞客邦提供的各款樣式後,非常喜歡「Sunset」,黯黑的底色,閃耀著鵝黃的金光,既沈謐、又溫暖,跟神燈的調性也搭;重要的是,相片PO上去,底版很能反襯出相片的原生色彩。所以當下就決定部落格要改頭換面,選用「Sunset」作為新的樣式。但是,卻面臨一個棘手問題-主文區不夠寬。由於很多文章,我都會放上一排五張小相片作為Header,每張相片寬120px,所以主文寬度就要600px。但是「Sunset」樣式主文寬度只有525px,這樣五張連排相片就會被打成2排,視覺效果就有明顯落差。這可怎麼辦?又喜歡「Sunset」的樣式,可又不能接受較窄的版面,魚與熊掌若要兼得,唯一的方法,就是自己動手修改版式。對於毫不熟悉CSS語法的我,只好硬著頭皮試試看了,大不了再改回原來的Teatime樣式嘛。

終於,在2個禮拜前的今天,下定決心,改頭換面了。

修改部落格樣式的第一步驟,是複製CSS原始碼:
到「部落格後台」點選「樣式管理」的『樣式選擇』,挑選喜愛的樣式;然後再點選『自訂樣式』,再點選 『CSS原始碼編輯』,就可以看到喜愛樣式的CSS原始碼。用滑鼠右鍵複製到word文件,作為對照底稿。

修改部落格樣式的第二步驟,是了解CSS基本語法:
對於「body」、「container」、「content」、「link」...等要有基本認識與了解,才知道自己要改的是什麼,也才找得到程式碼在哪裡。有3篇部落格前輩對於CSS寫的文章,對初學的人很有幫助:
「我不懂CSS語法,如何輕鬆修改痞客邦部落格」 http://sinea100.pixnet.net/blog/post/170605818
「從網頁原始碼看HTML標籤與CSS樣式」http://www.7headlines.com/article/show/408406268
容器標籤的屬性值--Container(一)     http://www.7headlines.com/article/show/409794671

修改部落格樣式的第三步驟,就是自己動手做:
有了要修改樣式的CSS原始碼,也對語法有了基本認識,接下來就是嘗試自己動手修改了。從「部落格後台」®「樣式管理」®『自訂樣式』®『CSS原始碼編輯』,就可以針對要動手的部份,嘗試語法的修改。由於是初學者,建議一次進行一個參數的修改,藉由變數的控制,才容易了解究竟是修改了哪一個參數,才達到預期的效果。修改完先按右下角的『預覽』來觀看修改的效果,透過一次次的修正,來達到最滿意的效果後,再按下『儲存』。

這次修改的目標是加寬主文(Content)寬度,但是側欄(Link)寬度維持不變;另外,也把文章標題(ARTICLE_HEAD)寬度也放寬,在字體大小不變的前提下,讓一排可以容納較多的字數,儘量不要擴到多排,這樣版面比較好看。

在修改的過程中,遇到第一個棘手問題是,調整Content寬度時,側欄會跑掉,被擠到Content的左下方,一直到縮短側欄寬度後,主文側欄才得維持在同一水平高度。

修改過程的第二個問題是,側欄縮短後,QR Code及廣告等圖像被切成兩塊,視覺效果很醜。發現其實有2個側欄(Links-row-1 & Links-row-2),其中側欄2是隱形(畫面上看不到)的,但是有寬度的。在Container=Content+Links-row-1+ Links-row-2的限制下,我在Content加寬、Content+Links-row-1維持不變後,把Links-row-2的width改為0px,整個狀況才恢復正常。

第三個問題是,版面寬度達到預定效果後,側欄的文字竟然跟主文文字重疊。研究了半天,才找到問題是左側欄文字是跟版面最右邊對齊的,所以修改方式是把Links-row-1的邊距改為right:(Container width- Content+Links-row-1 width)px,這樣側欄文字才不跟主文文字打架。

解決了上述的3大問題後,才終於放寬了「Sunset」的主文區。看到效果還差強人意,辛苦了大半天的時間,總算是有了代價,真好!

創作者介紹
創作者 阿拉丁 的頭像
阿拉丁

阿拉丁的神燈世界

阿拉丁 發表在 痞客邦 留言(0) 人氣()