跳到主要內容

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其實影響不大,甚至是毫無意義。
那……我改來幹甚麼呢?
純粹自己爽一下吧……

留言

這個網誌中的熱門文章

墨爾本旅遊交通全攻略

來墨爾本三個星期,總算搞清楚交通狀況。一如出發前的諾言,除了沒人看的遊記,旅遊攻略也會多打一些,以衝流量。


主要網站
Public Transprot Victoria: http://ptv.vic.gov.auMetro:http://www.metrotrains.com.au全路線圖:http://ptv.vic.gov.au/getting-around/maps/目錄
一、墨爾本交通概覽
二、公共交通遊玩攻略
  -全免錢! 巿中心遊玩大法
  -省錢旅遊方式
三、簡易行程規劃
  -擅用客戶服務中心
  -惱中的下班時間
另注:Skybus+酒店接駁服務

矛盾大作戰──Nikon VS Canon

我猜,問「哪一家的相機比較好」這個問題,一定比問「照片怎麼拍才好看」的人多上好幾倍。至少在還沒有選擇「敗」那一家照相機之前,大家都會猶豫、考慮、拼命上網找資料,然後懷疑網上資料不盡不實,覺得自己的「感覺」最準確,又苦無「使用」機會。去店家捧着照相機玩一兩個小時又覺得太誇張怕被罵……
想起來我頗幸運,雖然沒有單反,但我已經玩過很多器械,包括︰D90、D7000、D3100、500D、550D、5DMK2、5DMK3、Sony A99、Nex 3,而且是每一抬最少拍了三百張的程度。甚至iphone、Canon和Nikon各類型的DC……因此,我覺得自己雖然不是專業的攝影師,應該也有資格談一談器械的選擇順便衝一下流量吧。

毋需鬧鐘的日子

這是多少年來的習慣?

設定六點半的鬧鐘,實際上六點已經醒來,坐在床上,等着手機響鬧,單調乏味的預設音效,爬起來關掉。上個廁所,再看一點書,看到是時候出門為止。中學時,七點。大學不固定,或七點或十點。上班這幾年就很固定了,一律七點十分出門,只不過六點半醒來後,往往一邊播土豆,一邊看書,不太看得進去,斷斷續續地。

來到墨爾本一個禮拜,一頁書都沒看過。