
p {
text-indent: 0!important;
}
.p2 {
text-indent: 2em!important;
}
我發現痞客邦裡資訊豐富,但是閱讀經驗十分痛苦,所以想幫個忙:如果你也在痞客邦寫文章,但是也苦惱於不能提供比較舒適的版免面,這篇文章提供一些要點。
在台灣以中文在 Google 搜尋許多比較生活類別的關鍵字的時候,會找到很多來自痞客邦的網頁,多到令人驚訝,不容忽視。痞客邦裡各部落格的文章,最多的是每張圖夾一兩行字一路往下排開的遊記或食記。通常是手機隨手拍攝的畫質,臨時或憑記憶給每張圖補上簡短的說明。版面沒有特色可言,使用者體驗(UX)則是:一路滑下去,到沒耐心為止。加上免費痞客邦帳號的頁面廣告超級多,有全頁蓋版的,佔據四面八方角落的,突然跳出來嚇人的,自己播放說唱起來的,不勝枚舉,每一個都比該帖的本文搶戲,喧賓奪主。
李大衛 發表在 痞客邦 留言(2) 人氣(198)

我大約是一年前註冊痞客邦,註冊後就放著了,一篇文章也沒有寫。今天心血來潮,登入來玩,可是很不適應他窄窄的版面、醜醜的字型、和鋪天蓋地的廣告,嚇到吃手手。因為看到它接受 HTML 原始碼,也有一個可以編輯版型 CSS 的地方,還看到幾個做得很漂亮的站,例如
歐飛先生的網頁:
怎麼可以做得那麼漂亮啦!我也要!(歐飛老師:我可以乾脆直接用你的 CSS 嗎?)因為沒有立刻聯絡到歐飛先生,所以只好袖子捲起來,自己試試看,一個類別一個類別慢慢刻。一開始,我的版面長像這樣,當時還不知道如如何調整側欄內容,所以邊邊比這張截圖還密密麻麻,有全頁蓋版的廣告,彈跳出來的廣告,嵌在側欄的廣告,還有一隻狐狸頭。畫面很窄,仍然擠三欄進去,兩邊放的都是不知所云的資訊。
可是,我對內建的寬度、字形、廣告、底圖,我都很有意見。所以我花了一個下午的時間,慢慢摸索改寫,然後做出這樣的版面來了:嘿嘿,全幅寬,留了 80px 的邊邊而已,關閉大部分的廣告:因為我相信廣告只會讓自己的網頁看起來很便宜,很不專業,把有品味的讀者都趕跑了。手機板更誇張,一篇文章可以被他們灌水伸展到五倍長,而且有些廣告的畫面真的會讓人當場生理不適。這些全部清空,確保找得到各式黑體字型,然後,我還加了一塊我自己最愛的直式中文文字框。直書的中文可以讓畫面看起來有紙本書的直很開心,好像有比拼出一個3000片的巴黎鐵塔拼圖有成就感。
其實整個過程沒有學問,算是一種苦工卻是細活,就是一直在比對元件名字,然後修改顏色圖案大小位置,比對在為條。所以就不在這裡詳細獻曝,但是如果有朋友也想改,卻不知道怎麼改的,可以留言與我聯繫,我看看能幫你多少忙。
附帶說明,我一直認為中文還是直書最好看,所以只要可能,我都會把自己的文件做成直式,包括讀電子書。如果你也特別有興趣於直書中文,也歡迎與我交流。有興趣可以參考我的上一篇文章,其實是引用宜蘭縣政府的圖文,以直書方式重新排版做一個示範頁,讓它盡量像在書本雜誌上一樣,排版得美美的,連結在這
一頁給您參考。
至於本頁,打完之後,我發現我的超寬欄位對於這種圖文夾在一起,文字不是很多的文章,居然也是一種負擔,畫面會不平衡。所以我乾脆把他切成兩欄,如果你的畫面寬於 1024,那麼,你現在在讀的這篇,就可以看到兩欄排版,畫面小一些的,就做單欄;在更小的,Pixnet 有自己對應的手機版的程式模組,不是用 @media 的方式做 RWD,我一時也不知道怎摸覆蓋它,不知道有沒有比每一篇都要放表頭還一勞永逸的。
現在,畫面下還有一塊廣告被拿掉但是留白在那裡的缺陷,希望等得到高手來指導囉!
對了,如果您需要我現在的版型,CSS 檔的連結在
這裡。
李大衛 發表在 痞客邦 留言(2) 人氣(351)

這是一篇直式排版示範網頁,不是圖喔!
我特別喜歡直是的中文排版,比較有美感。(在痞客邦裡面,目前只適用於電腦版)
李大衛 發表在 痞客邦 留言(0) 人氣(133)