動手更換 Facebook 的新版面

前陣子等得望穿秋水的 Facebook 終於改版了!雖然改版很開心,但是看了幾個小時後發現體驗不太好,舉例來說,這次塗鴉牆的圖片尺寸雖然變大了,但每則訊息的間距也因此變小,所有訊息交雜在一起,很難分清楚這是誰說的?那篇又是誰發的?假設一個人每天要看的資訊流很大,或像我一樣是 FB 重度使用者一直用滾輪看消息的話,就會覺得很痛苦。

另外廣告真的很阿雜,三欄訊息沒有一個比重,文字都是黑色字體,非常的沈重且壓迫,搞的塗鴉牆訊息無法跳出來,真的很痛苦。

所以花了一點時間微調了 Facebook 的版面,就像是我上面的圖片一樣。如果你的 Facebook 也改成新版了,不妨對照一下我改了哪些東西吧 🙂

原本使用 Stylish 這個擴充元件,只要稍微懂點 CSS 的朋友,都可以透過他在本機修改網站樣式,符合自己的閱讀習慣。此外官網也有許多同好做的佈景樣式,方便我們套用。

但是後來發現另外一套:Stylebot,功能更強大也更好用。雖然樣式沒有 Stylish 多,但是他的網站更漂亮,而且使用起來也更方便!推薦大家使用 Stylebot 喲~

▼ 比 Stylish 好看一百倍的網站!
stylebot

關於 Stylebot 的介紹與教學,異塵行者已寫過一篇文章介紹,我這邊就不再贅述了:

當你來到一個網站,覺得它的內容排版方式不符合你的喜好時,會不會想要自訂替換新的網頁版面?當你正在架設自己的部落格,希望比較各種可能的外觀介面微調,會不會需要一個簡單易用的網頁樣式編輯器?在此之前,能夠滿足上述CSS樣式調整需求的工具,應該是Firefox、Google Chrome皆適用的擴充套件:Stylish。
Stylebot 設計網頁不用懂CSS語法, 親切版Stylish隨意改造網站

套用我修改的 Facebook 樣式

最後要跟大家分享的是我自己修改後的語法,可以參考上面的截圖。
我有將語法放在 Stylebot 上,如果你已安裝相關擴充元件,可以直接點選網址套用:http://stylebot.me/styles/5315

比較特別的修改如下:

  1. 去除廣告 (一定要的)
  2. 修改動態牆的間距,讓每篇文章看起來有個分隔
  3. 修改文字大小、行高與段落,閱讀較為舒適
  4. 加大動態牆的寬度
  5. 刷淡左側側邊欄的顏色,讓塗鴉牆跳出來,不會被左側的側邊欄干擾
  6. 移除左側側邊欄的遊戲、朋友、以及其他資訊,讓資訊更為簡單
  7. 固定左側側邊欄,滾動的時候,側邊欄不會跟著移動
  8. 右側廣告部位預設為小勞勃道尼的帥氣照,懂 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;
}