動手更換 Facebook 的新版面
前陣子等得望穿秋水的 Facebook 終於改版了！雖然改版很開心，但是看了幾個小時後發現體驗不太好，舉例來說，這次塗鴉牆的圖片尺寸雖然變大了，但每則訊息的間距也因此變小，所有訊息交雜在一起，很難分清楚這是誰說的？那篇又是誰發的？假設一個人每天要看的資訊流很大，或像我一樣是 FB 重度使用者一直用滾輪看消息的話，就會覺得很痛苦。
另外廣告真的很阿雜，三欄訊息沒有一個比重，文字都是黑色字體，非常的沈重且壓迫，搞的塗鴉牆訊息無法跳出來，真的很痛苦。
所以花了一點時間微調了 Facebook 的版面，就像是我上面的圖片一樣。如果你的 Facebook 也改成新版了，不妨對照一下我改了哪些東西吧 🙂
原本使用 Stylish 這個擴充元件，只要稍微懂點 CSS 的朋友，都可以透過他在本機修改網站樣式，符合自己的閱讀習慣。此外官網也有許多同好做的佈景樣式，方便我們套用。
但是後來發現另外一套：Stylebot，功能更強大也更好用。雖然樣式沒有 Stylish 多，但是他的網站更漂亮，而且使用起來也更方便！推薦大家使用 Stylebot 喲～
▼ 比 Stylish 好看一百倍的網站！
關於 Stylebot 的介紹與教學，異塵行者已寫過一篇文章介紹，我這邊就不再贅述了：
當你來到一個網站，覺得它的內容排版方式不符合你的喜好時，會不會想要自訂替換新的網頁版面？當你正在架設自己的部落格，希望比較各種可能的外觀介面微調，會不會需要一個簡單易用的網頁樣式編輯器？在此之前，能夠滿足上述CSS樣式調整需求的工具，應該是Firefox、Google Chrome皆適用的擴充套件：Stylish。
Stylebot 設計網頁不用懂CSS語法， 親切版Stylish隨意改造網站
套用我修改的 Facebook 樣式
最後要跟大家分享的是我自己修改後的語法，可以參考上面的截圖。
我有將語法放在 Stylebot 上，如果你已安裝相關擴充元件，可以直接點選網址套用：http://stylebot.me/styles/5315
比較特別的修改如下：
- 去除廣告 (一定要的)
- 修改動態牆的間距，讓每篇文章看起來有個分隔
- 修改文字大小、行高與段落，閱讀較為舒適
- 加大動態牆的寬度
- 刷淡左側側邊欄的顏色，讓塗鴉牆跳出來，不會被左側的側邊欄干擾
- 移除左側側邊欄的遊戲、朋友、以及其他資訊，讓資訊更為簡單
- 固定左側側邊欄，滾動的時候，側邊欄不會跟著移動
- 右側廣告部位預設為小勞勃道尼的帥氣照，懂 CSS 的朋友，可以將 http://i.imgur.com/RAv5bAy.jpg 改成任何你想放的照片。
因為 stylebot 不支援火狐瀏覽器，所以如果你恰巧使用火狐，也可以改裝 Stylish，然後複製我底下的 CSS 語法即可～
@import url(http://fonts.googleapis.com/css?family=Lato);
div._4-u2._5v6e {
display: none;
}
#contentArea {
width: 80%;
}
div.rightColumnWrapper.fixed_elem, div._64b.fixed_elem {
margin-left: 140px;
background: url("http://i.imgur.com/RAv5bAy.jpg") 0 0 no-repeat;
text-indent: -5000px;
font-size: 0;
height: 650px;
width: 400px;
transition: .5s ease;
}
div.rightColumnWrapper.fixed_elem:hover, div._64b.fixed_elem:hover {
opacity: 1;
}
div._4-u2.mbm._5jmm._5pat._5v3q._5sq8._5x16._5uun {
margin-top: -90px;
}
div._4-u2.mbm._5jmm._5pat._5v3q._5sq8._5x16 {
margin-bottom: 30px;
border-bottom: 3px solid #ccc;
}
div.mbs._5pbx.userContent p {
font-size: 13px;
color: #000000;
}
#leftCol {
opacity: .5;
transition: all .3s;
position: fixed;
}
#leftCol:hover {
opacity: 1;
}
._6m7 {
color: #555;
line-height: 1.5em;
font-family: ubuntu, arial, sans-serif;
}
._6m6 a {
color: #333;
}
._59tj {
display: none;
}
/* sidebar */
#pagesNav, #listsNav, #appsNav, #interestsNav, #developerNav {
display: none;
}
#pagelet_web_messenger {
width: 120%;
}
.ego_column {
display: none;
}
div.text_exposed_root p {
margin-bottom: 1em;
}
1