[分享] 部落格的文字排版

看板Blog作者HGC (阿筌)時間15年前 (2008/11/16 20:31)推噓5(5推 0噓 5→)

留言10則, 6人參與討論串1/1

前兩天第一次學會改css設定，於是把版面的字體、字距、行距等排版都改了也把我對部落格文章排版的想法寫了一篇文章，大家不嫌棄的話就看看吧網誌版：http://hgc0818.pixnet.net/blog/post/23323192 ----------------------------------------------------------------- 無論你寫的是書面報告、企畫書、論文或是部落格，只要是給人看的，就應該要去注意閱讀的舒適度。我以前大學的時候，也曾經有過活動秩序冊排版太差，而被學長痛罵一頓整本退回的經驗，當時還覺得不以為然，覺得是學長太過龜毛了。直到研究所被教授嚴厲的釘過論文後，在不知不覺間把字型、版面編排內化成基本要求，現在看到學弟妹交上來的書面資料或是看到別人毫無修飾的部落格，也是覺得苦不堪言呀。以部落格為例，經常看到有些人的版面亂七八糟，一堆字都疊在一起，或是內文字型太小，手動放大時邊欄與主標卻又大過頭而擠在一起的狀況。通常我看這種部落格，如果是陌生人，是直接視為拒絕往來戶的，如果是好朋友的部落格則是直接開罵，但如果是親戚或是其它想要去關心的朋友，就只好忍耐著看完了。也有些人是自認自己閱讀時可自行調整內文大小(調整螢幕解析度或是簡易的利用 CTRL加滑鼠滾輪)就可解決閱讀的問題，卻無視許多的閱讀者或許對電腦的使用並不精通。亦或使用自己慣用的瀏覽器、作業系統或顯示器時閱覽時並無大礙的方式在編輯自己的部落格，卻疏忽了其它不同狀況可能會造成不便甚至無法閱讀的狀況。(不過這種狀況不多啦，稍微注意一下就行了) 剛接觸部落格不久的我，之前一直不知道原來版型是可以自己手動調整的，而一直傻傻的找一個最能接受的版型來套用就不再更改，但我前一個版型的行距太過狹窄也是讓我整整痛苦的看了兩個月呀。直到前幾天看到別人和我一樣的版型卻又不同的行距，一問之下，才知道原來是可以自行修改後台"樣式管理"的css編碼來調整的。(ps.我一直都是個程式白癡，下面分享的都是簡單又好用的程式碼改寫喔) 我第一個學習調整的就是兩排文字間的行距了，只需要在css的程式中找到 line-height 的選項，去修改其後面的數值就行了。由於網路的閱讀，眼睛與文字的距離比平常看書的時候更遠，所以行距應該要比書面編輯的排版更大才行。我調整的結果， 26px是我的目前最滿意的行距，約字級高度的70%左右。但原則上大家還是以自己眼睛來做判斷會最準，不過通常最好不要低於字級高度的50%。行有餘力的話，也可以調整字與字之間的左右距離，一樣是去後台，調整 letter-spacing就行了，我目前的字距是1.8px，也給各位做個參考。內文字的大小，我之前是習慣用字型14灰色的標楷體，閱讀起來感覺會比較舒服優雅。後來卻偶然發現，在別人的螢幕上由於明度對比不夠，所呈現的灰色會看不清楚，而且這種狀況我還在不同人的電腦遇到了兩次。偏偏我的部落格內建的文字系統，在標楷體14 的時候無法變成黑色，但12的字又太小，最後我只好使用我次一等喜歡的新細明體12的字型了，也就是現在大家看到的。側邊欄位的部分，也是我之前的版型以及我在許多人的部落格都有發現到的嚴重問題，就是字實在是太小了，雖然還勉強算是看得清楚，但畢竟稱不上是舒適。於是我又去後台把側邊欄位每個font-size:11px的字體，改成12px，大了一點點，可是整體閱讀舒適度卻是差了十萬八千里呀。最後再給大家一個我個人在部落格寫作上的經驗，在段落與段落之間，最好是利用空行來做分段，有時候如果每段落中的文字較多較長，即使用空行來做分段仍會有擠在一起 (最好不要超過200字，網路也不適合長段落的閱讀)，我通常會利用enter空行之外，再利用shift+enter換行，來讓段落與段落之間更為明顯清楚好閱讀。 (寫這篇時，發現因為我把行距變高了，回頭看之前的文章，段落間反而空太遠了，這篇後來就改成用兩次shift+enter) 以上，是我自己在部落格寫文兩個月來的經驗談，給各位做個參考。每個人的套用版型與喜好不同，最好還是自己找出一套最適合的文字編排方式。稍微花一點點心思，你可以讓每個願意來你的部落格關心你或是閱讀你想法的人，更能夠享受到舒適的閱讀環境。也歡迎大家給我一些排版上的建議囉。 -- 獅子歌歌blog： http://hgc0818.pixnet.net/blog/ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.139.143.184

推

a892245

11/16 23:08, , 1^F

11/16 23:08, 1^F

→

HGC

11/17 02:26, , 2^F

11/17 02:26, 2^F

→

HGC

11/17 02:27, , 3^F

11/17 02:27, 3^F