無論你寫的是書面報告、企畫書、論文或是部落格,只要是給人看的,就應該要去注意閱讀的舒適度。我以前大學的時候,也曾經有過活動秩序冊排版太差,而被學長痛罵一頓整本退回的經驗,當時還覺得不以為然,覺得是學長太過龜毛了。直到研究所被教授嚴厲的釘過論文後,在不知不覺間把字型、版面編排內化成基本要求,現在看到學弟妹交上來的書面資料或是看到別人毫無修飾的部落格,也是覺得苦不堪言呀。

     
    以部落格為例,經常看到有些人的版面亂七八糟,一堆字都疊在一起,或是內文字型太小,手動放大時邊欄與主標卻又大過頭而擠在一起的狀況。通常我看這種部落格,如果是陌生人,是直接視為拒絕往來戶的 ,如果是好朋友的部落格則是直接開罵,但如果是親戚或是其它想要去關心的朋友,就只好忍耐著看完了。


    也有些人是自認自己閱讀時可自行調整內文大小(調整螢幕解析度或是簡易的利用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)

    以上,是我自己在部落格寫文兩個月來的經驗談,給各位做個參考。每個人的套用版型與喜好不同,最好還是自己找出一套最適合的文字編排方式。稍微花一點點心思,你可以讓每個願意來你的部落格關心你或是閱讀你想法的人,更能夠享受到舒適的閱讀環境。也歡迎大家給我一些排版上的建議囉。

 

沿伸閱讀:

            老貓學出版--

傳統編輯對部落格新手的寫作建議:一個呼籲


 

 

創作者介紹

獅子歌歌

hgc0818 發表在 痞客邦 PIXNET 留言(14) 人氣()


留言列表 (14)

發表留言
  • A7V7
  • 很棒呀,以後多練習寫程式,然後介紹給大家吧!
  • 改天我成了程式大師了,我會記得感謝言輕小青蛙給我啟蒙...XD

    hgc0818 於 2008/11/16 07:23 回覆

  • tim
  • 受教了

    最近也剛排完營運企劃書。

    標題是標楷字14,內容是標楷字12。
    幸好是內部用,排版沒釘的很用力。

    又多了解了幾個CSS屬性,
    有改的方向了,
    謝謝
  • 嗯,新細明體只適合在電腦上看,印成紙本的話完全不能看呀,還是用標楷合適。

    很開心對你有幫助喔^^

    hgc0818 於 2008/11/16 07:48 回覆

  • kokafan13
  • 你這樣寫初學者看的懂嗎?都沒圖
    我承認我不用Ctrl滾輪變大字體就不會用網路的人,跑去網咖還會下載chrome來用,不過這只是當兵完才養成的習慣
  • 我的版面是設計成一般14吋螢幕進來也能輕易閱讀,有需要的人還可以自行放大。


    每個人的css語法都不一樣呀。我的兩個面版寫法就差很多。貼圖反而會誤導。

    我當初也是a7v7叫我去找這些關鍵字去改,我就去改,我就改好了。

    hgc0818 於 2008/11/16 20:04 回覆

  • jnlin
  • 要分行的話用 Shift-Enter ,但是要分段的話應該要用 Enter 而不是兩個 Shift-Enter 喔。 你可以改 p 的 margin ,例如說設定成 12px,或是你覺得適合的數值,讓段與段之間拉的比較寬。
  • 我是用手動的方式,利用兩次shift+enter來達到我想要的分段的效果。也謝謝你教的把空行拉長的方法,可是這樣一來,如果我要寫那種一行一行的字句,反而中間又會分太開了。

    hgc0818 於 2008/11/16 20:50 回覆

  • jnlin
  • 一行一行的字句的話,中間要用 Shift-Enter 分行。
    分段是用 Enter, 分行是用 Shift-Enter(跟 Word 一樣 :p)
  • 我懂你的意思,我下次來試試好了。如果效果跟我預定的一樣的話,用你的方法的確是省事多了。

    總而言之,就是除了增加行距之外,也增加空行的高度,這樣一來,就可以回歸到最原始的分段是用 Enter, 分行是用 Shift-Enter。而不用像我還用更繁複的方式來搞得亂七八糟吧。

    感謝你的建議囉:)

    hgc0818 於 2008/11/16 21:38 回覆

  • ianet
  • 我喜歡你的新版面!
    我也想自己用版面,不過因為不會用,加上短時間沒有太多時間摸索,所以一直沒動XD
  • 我這個版型也是套用的,只是有自己修改一下下。還有很多功能是我以後也想改但目前還懶得去專研的。

    目前只改了一些我覺得很必要改的而已,哈,你也可以從這些去試試

    hgc0818 於 2008/11/16 22:37 回覆

  • Jason
  • 你好

    我的部落格找不到letter-spacing的話要怎麼調文字間距?上下已經照你的方法調過了,這邊先謝謝你的教學^^
  • 厄,其實我也是最近才剛學到,就忍不住上來賣弄了。^^""

    如果真的找不到,你又很想調的話,或許可以試著寄信問一開始寫那個面版的這個人看看


    hgc0818 於 2008/11/17 01:58 回覆

  • devika
  • 學會了,謝謝分享~
  • 很高興對你有幫助,歡迎以後常來逛逛^^

    hgc0818 於 2008/11/17 09:57 回覆

  • genle
  • 真的有比較舒服耶,這樣我家的字好像太小了:P
  • 找到自己比較喜歡的風格比較重要...^^

    hgc0818 於 2008/11/18 16:22 回覆

  • 樹
  • 不知道版大有沒有部落格改版面的教學呢
    很像換個版面但是對CSS時在不懂....
    每次頂多都只會把主圖換掉而已
    想改其他的欄位拉格式等等我就不會了
  • 我到上個星期才第一次聽到css這個名詞呢,其實我也很不懂。
    文章中寫的也是和人請教,人家教我的,我覺得很適合初學者入門,所以才寫出來分享。

    如果你想改更多地方的話,這個圖片連結你也可以參考看看

    http://ndap.igt.com.tw/4/CSS_class_list/CSS_0205.html

    有不懂可以提出來一起研究討論看看。^^

    hgc0818 於 2008/11/20 20:01 回覆

  • 阿光
  • 最近也是剛開始在網路上到處找CSS的相關教學,看到版大這篇文章真的是收穫不少:)
  • 很高興能對你有幫助喔...^^

    hgc0818 於 2008/11/22 04:09 回覆

  • d2watasia
  • 很實用!

    冒昧問問..側邊欄位的字體大小要如何調整?以及文章內文的行距?

    從按鈕找不太到.
    感謝!
  • 側欄的字分很多格,我其實也分不出哪個是哪個,一律把font-size的把上加一級。像我的原本是11px,我把它改成12px。

    我看你的側欄字還蠻大的呀,應該本來就有12吧

    另外,內文的行距就像我文章中寫的,要找到內文區的 line-height。如果真的沒有的話,就自己找到內文主區塊,自己加進去。

    像我的話是長這樣,不過每個人的css語法長得差很多,僅供參考囉。
    article-content {
    _height:1%;
    overflow:hidden;
    _overflow:none;
    color:#444;
    line-height:25px;
    letter-spacing:1.8px;
    margin:10px 0;
    }

    hgc0818 於 2008/12/18 08:12 回覆

  • kilin
  • 我在這邊回好了,感覺比較相關。

    文字排版的問題之前我就想過了,最早我是用像BBS那種一行一行寫的,很不正式的感覺。

    之後就想用段落的文字編排,但出現問題了→前面要不要空格,如果要空,是空一格或者空兩格。

    如果依照一般中文書寫用法,是要空兩格,但總覺得有點怪怪的。

    隨後我又特別留心觀察各大名人的blog,還有網路新聞等,似乎以不空格佔多數。

    之後我會傾向不空格的方式來寫文章,這是我的看法啦。
  • 嗯,你的心路歷程和我蠻像的。我也是開了部落格後,才慢慢改掉bbs的寫法。我自己覺得文章太長的話,還是有空格會好看一點,如果是短文的話,有時候反而沒空格會比較好看。

    hgc0818 於 2009/01/06 12:22 回覆

  • 悠閒
  • 看完你這篇文章,突然覺得我blog的字好小哦~ 有空也來改一下好哩~
找更多相關文章與討論