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

[HGC (阿筌)]

前兩天第一次學會改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:你有些地方是從老貓的文章引用來的吧？ 請加個參考網址吧
→ HGC:我之前的確是看過他的文章
→ HGC:不過我自己習慣的排版是自己調出來的，沒有照他的做說
→ HGC:不過既然你這麼說了，而且的確某些觀念也蠻雷同的
→ HGC:我還是加一下好了，感謝你的提醒...^^
推 sunnyboy28:每個人都有自己的習慣方式,沒對沒錯啦,以前有類似覺得
→ sunnyboy28:這樣不好..,提醒別人,卻被罵回來,後來就算了,青菜啦.
推 rssai:有參考過別人寫的，就附上參考資料而已，多個網址少了紛爭
推 koka13:我寫的都不敢貼 Q.Q
推 james732:這篇對我的幫助很大  感謝您!!!