作者：Vamei 出處：http://www.cnblogs.com/vamei 歡迎轉載，也請保留這段聲明。謝謝！
在博客園寫博的半年中，我有時會糾結於一些諸如寫作格式和顯示效果之類的小問題。我想任何一個熱衷於在這里寫博客的人都可能會遇到類似的問題，所以就把自己遇到的一些狀況和解決方法列出來，以便交流。
在博客園看到不少很絢的博客頁面，我很想知道都是怎么實現的。:-) 希望大家不要客氣，在評論區留下訣竅。謝謝！
編輯器
下面是博客園的編輯器界面：
博客園編輯器界面
1. 查詢HTML
寫一篇文章實際上是構建了一個HTML網頁，內容和格式都最終保存在這個HTML網頁中。如果格式上有什么不確定的地方，都可以查詢和修改HTML本身。你可以通過下面的“HTML”按鈕來查看：
2. 插入代碼
對於技術博客來說，代碼插入是必不可少的一個環節。常規的博客編輯器通常都沒有這個功能。博客園的插入代碼算是比較齊全。值得注意的是“全部折疊”選項：
如果代碼過長，而文章的重心又不在於分析代碼，那么可以勾選這個選項。代碼會隱藏成一個”View Code“的按鈕，只有在點擊之后才展開。這樣，可以讓讀者專心於文章的脈絡。讀者快速瀏覽一遍之后，覺得還有興趣的話，可以自行展開代碼閱讀，而不會在一開始的時候就被超長的代碼嚇走。
3. 格式與字體
格式
所謂的格式，實際上是html標簽(tag)。比如，如果采用段落格式，那么內容就會被鑲嵌在<p></p>的標簽之間。再比如標題1，實際上是<h1>。你可以通過查詢HTML源碼來找出每種格式對應的標簽。采用格式的好處是可以通過CSS來統一管理每一種標簽所標示的內容。
字體
最值得推薦的字體是Courier New。它是等寬字體，每一個字符的寬度相同，所以上下兩行很容易對齊，比如：
TomIDNumber = 10
VivIDNumber = 22
如果是非等寬字體，字符寬度根據字符形狀發生變化，比如i會比較窄，而o會比較寬，所以上下兩行很難對齊。比如Arial：
TomIDNumber = 10
VivIDNumber = 22
等寬字體是程序員的首選字體。
4. 關於顏色
每一個人都有自己的顏色喜好，有人會比較偏愛黑白的頁面。但從認知心理學的角度來說，人們更容易閱讀標出要點的段落和文字。特別是網絡和電子閱讀時代，彩色相對黑白沒有額外的印刷成本，所以利用顏色標記值得一試。下划線、粗體、斜體也是相同的道理。 (在黑白印刷時代，人們慣用這三種方式來區分重點。你甚至可以在機械打字機上見到它們)。用這些標記方式的時候，最好可以在每篇博文中保持統一。比如可以用粗體表示命令，用斜體標記引用，用紅色表示重點。這樣，人們連續閱讀同一個博客的時候不會覺得混亂。
CSS定制
管理 -> 設置 -> “通過CSS定制頁面風”中，我們可以定制自己的CSS風格。這是很實用的功能。
1. 定制標簽(tag)
在編輯器部分，我們看到所謂的格式實際上是HTML標簽。這些標簽可以通過CSS定制來統一管理和控制。比如我們想設置標題2的格式為：
可以通過添加如下CSS實現：
h2 { text-align: center; box-shadow: 10px 10px 5px #888888; background-color: #5FBDCE; color: #015666; }
2. Image溢出和解決
圖像溢出是個常見的問題。在一個小的屏幕或者瀏覽器中，圖片的像素可能超出div的區域。比如:
調整前
你可能會重新設定圖片的大小。但是由於可能的讀者所使用設備可能差別很大(比如手機和大屏幕)，我們並沒法預估所應設定的大小。
我們可以在CSS定制中選擇img，然后使用overflow屬性：
img { overflow: scroll;
}
這樣，溢出的圖像會被隱藏在滾動條中。
我采用了另一個方法：
img { max-width: 80%;
}
這樣，img的寬度不會超過div寬度的80%。圖片會根據情況調整大小。
調整后
定制公告、頁首、頁腳HTML
在管理 -> 設置中，這三者可以添加自己想要顯示的HTML元素。比如在公告欄中我添加了微博的圖片和豆瓣的Javascript（如上圖）。你也可以增加其他更加個性化的東西。
微博：我的工具 -> 簽名檔 -> 獲得代碼，然后將代碼復制到博客園的公告欄。
豆瓣：到下面網址http://www.douban.com/service/badgemaker，生成代碼，然后將代碼復制到博客園的公告欄。