2014年1月7日 星期二

2014 blogger改版筆記─決戰css

為了迎接新一輪的旅程,把blogger狠狠地改了一下。這次的修改重點是,完全把blog的「氣息」去掉,變成一個純文字的ebook式的版型。亦即,除了圖和文字之外,我不希望各位受到各種各樣的訊息干擾。
兩欄式變成一欄式最大的挑戰,莫過於網友再也不能從側邊欄發掘其他資訊,為此我做了一浮動的導覽列。導覽列是參照Blogger 調校資料庫的HTML造出來,並把Ooparts最多人看的文章類型︰閱讀旅遊,分開連結。同時把搜尋網頁的自訂搜尋器放到導覽上來。
而為了補充沒有側邊欄,網友無法找到關於我的訊息和訂閱Ooparts(有人會這樣做嗎=口=?),特意用很笨的方法,做了一個首頁。可是「最新文章」無法顯示,測試時明明OK的……得再思考該怎麼做。暫時也只有這樣。
Ooparts拉到底,會有Ooparts新的G+ page FB page的連結。我並不是覺得自己紅到有需要開page讓大家成為我的「粉絲」,我只是想試一試不同的宣傳方式,看那一種行銷方法最有效。搞不好之後會覺得很煩關掉也說不定。這樣也好啦,一些漫罵和極膠言論,留在私人FB,不會給其他人看見……唔……不過Ooparts也很膠就是了。
另一個大改動是CSS。Blogger本身的文字顯示方式很醜,到最近學排版才發覺。內文編輯時好好的,出到外面的頁面就覺得痛苦了。特別是現在把文章拉長的情況下,文字和圖片很難配合。
試過雖多方法,例如
text-indent : %em,首行縮排
這個方法最大的問題是,在.post-body 內安裝,blogger會假設所有樣式都會縮排,包括圖片。文字「抵抗」的辦法是輸入0em,圖片就不知道了,隨文插圖原本有2em的距離,再加2em就非常難看。不過這個版型的圖片和圖片文字也很難看,仍未摸出方法修改。因為.post-body img 和其他元件,共用了一個樣式,我不敢動到它……因為實際上我也不是很懂……
標題樣式修改成我喜歡的樣子︰

標題h2

子標題h3

小標題h4

修改時千萬別在CSS 直接打
.h2{} .h3{}
一出去你就會發現,所有widget的名稱,全部變成你設定那個樣子,因為widget標題的程式碼長這樣︰.h2 div class。當然這不是重要目的,我只需要改內文,所以最好進入編輯HTML裡面,新增樣式
.post-body h2 {} .post-body h3{}
這就以後打文章,選擇標題,樣子就會改變,層次變化就更能幫助閱讀。
重點的內文我研究了好久仍未找到最佳解法辦法,最初我想像的樣式是縮排、鬆字距、寬行寬。就像這樣︰
.post-body{font-size:15px;line-height:1.5em;letter-spacing:0.15em;text-indent:2.3em;}
可是因為前述問題,text-indent取消了。那只好用笨法子,直接空兩個全型空格,然而分段效果仍不明顯。想了好久,覺得段距隔個2em就最好了。可是,無論用margin或padding都無法達到效果。想一想應是enter和shift enter的關係。
隨便按enter的話,段落html碼是<br \>,表示一行結束。而blogger的分行方式,還有<div> <snap>等等。所以不大好控制,除非每段文章用html調整。那也太累了吧?會死耶。固…目前調整成這個樣子,真有需要時就按兩下enter。而最好的顯示方式是,第一行頂格,第二段空一至兩格或一行。強烈效果加分隔線。不過,這些類似的設定,wordpress早就內建了……故此我整理過的文章,目前都放在worpdress,不怕字的請過去︰housescheung.wordpress.com
CSS可以參考這個網站︰梅問題教學網。

至於貼圖,目前尚未有很多圖的範例文章。故我只能說,將會使用+Joe Tsang 大大的方法來貼圖。從前都不太在意這個,隨便插入貼上了事,希望將來能夠造一篇賞心悅目的文章出來。

最後最後,改成目前這個樣子,是我相信無論怎麼改,大家都會透過Feedly等工具訂閱,或者加入G+、FB追蹤。我也會勤一點發文。那些工具都會「無視原本網站的格式」,編排一個獨有的舒服方式,供使用者瀏覽。所以我怎麼改CSS其實影響不大,甚至是毫無意義。
那……我改來幹甚麼呢?
純粹自己爽一下吧……

沒有留言:

張貼留言