Stylish：看著不爽？隨手換掉網站的閱讀版面與視覺效果

Stylish是Firefox上的一個擴充套件，它可以讓使用者透過改寫CSS的方式，改變任何一個網頁的外觀，也就是說只要加裝了Stylish後，當你看膩了哪個網站網頁，你就可以手動幫網頁來換衣服，讓網頁看起來更順眼。可是你說你跟我一樣不會改寫CSS怎麼瓣？這也沒關係，因為這個擴充套件已經推出滿久了，所以也累積了許多由其他使用者寫好的外觀主題，我們只要會套用即可。雖然使用者設計的CSS不一定都會比原本的外觀漂亮，也可能不一定都比原網站易讀（當然也有很多相反的例子），但是讓網站「看起來不一樣」其實就已經是一件很有趣的事情，也可以讓我們疲勞的眼球增加一些新的刺激，而且透過Stylish一些方便的功能，我們通常可以很快的就找到目標網站的佈景主題並替換，隨時隨地都能讓網頁瀏覽增加不同的小樂趣。

• Stylish（擴充套件）：https://addons.mozilla.org/en-US/firefox/addon/2108
• userstyles.org（外觀收集站）：http://userstyles.org/

 

• 看著不順眼，隨手就換：

即使不懂CSS的朋友也可以從Stylish獲得很多驚喜，而且它的使用方式其實很簡單。首先到擴充套件的網頁下載並安裝Stylish。重新打開Firefox後，你可以看到瀏覽器下方的狀態列，多出一個畫筆加圖紙的Stylish圖示，在圖示上點擊滑鼠左鍵，就可以在彈出選單看到Stylish的功能；這時候先載入你想要改變外觀樣式的網頁，然後選擇stylish功能表中的【尋找給這個網頁使用的樣式】，就會立刻連到外觀收集站（userstyles），並列出與你剛剛所在的目標網頁有關的可替換外觀。

例如我剛剛在「Google搜索」網站點選了Stylish，於是我就可以看到與「Google搜索」網頁相關的各種外觀，其中粗體字表示的是評分比較高的外觀。

點進其中一個外觀，你可以看到相關的介紹，有的還有預覽的圖片。這些Styles不一定都是大幅度的改變視覺效果，有的可能是優化閱讀的方式，例如Google搜索的Styles中，有的可以去除廣告，有的可以把搜索結果變成簡化的標題條目等等。如果決定要加載某個外觀，進入外觀頁面後，點選下方的﹝Load into Stylish﹞。

接著在彈出的視窗中，你可以看到這個外觀的CSS語法，如果懂得人都還可以自行針對其他用戶上傳的外觀來作進一步微調修改，讓其變成自己更喜愛的樣子。決定後按下﹝儲存﹞。

 

• 多種樣式複合搭配：

重新載入剛剛增添CSS外觀的目標網頁，就可以看到替換後的效果了。而且你可以同時搭配使用兩種以上的CSS樣式，有時候多個可以互補的樣式搭配後，會讓效果變得更好（但是也可能相反XD）。例如下圖中，我同時搭配了兩種Google Search網頁的外觀樣式，一個是「dark green google」，它可以讓Google搜索頁面變成黑底綠字；另外一個是「Googlepedia II」，它可以去除廣告，並用框線和高亮來標示每個搜索條目。如果你發現在同一種目標網頁中載入太多外觀，想要取消其中某些外觀時，只要到瀏覽器狀態列打開Stylish選單，這時候你會看到「目前網頁」有安裝的外觀列表，只要在外觀項目前面取消勾選，這個外觀樣式就不會執行了。

如果在功能選單中選擇【管理樣式】，就可以手動撰寫或編輯任何的樣式，也可以刪除已經安裝的樣式。

 

• 看不膩的豐富外觀：

接著我們來介紹一下「userstyles」這個外觀收集站，進入其首頁後，你可以在最右方看到目前最高評分、最受歡迎、最新加入的外觀樣式列表。在右上方有一個搜索列，還有四個分類標籤，﹝Site Styles﹞是以各種特別網站為主的外觀分類檢索，也是Stylish最主要的功能，你可以在這裡找到適用於Google、Yahoo、Youtube、wikipedia等等網站的外觀（不過我覺得用我最前面教的那個方法來找自己常用網站的外觀比較快）；﹝App Styles﹞則是和Firefox瀏覽器本身有關的樣式替換，例如可以改變瀏覽器空白頁、工具列的樣式；﹝Global Styles﹞全域樣式能夠找到一些所有網頁都適用的樣式替換，裡面有些東西很好用，例如在檔案連結前面加上圖標、修改更好看的表格樣式等等。

 

• 值得推薦的Stylish相關文章：

E-Space：使用Stylish定制Firefox(强烈推荐) ：教你如何用Stylish獲得常用網站的最大閱讀介面。

JosephPhto的網路日誌：Firefox：Stylish 重設網頁的 HTML 和 CSS 樣式碼 ：針對易讀性的一篇頗詳細的CSS編輯教學。

Nelson開始國一生活：[FX] 使用 Stylish 自訂網頁及瀏覽器外觀 ：推薦了很多優秀的可替換樣式，還有作者自己寫的優秀外觀。主要著眼點放在增加網頁的易讀、易用性上。

Goston's Blog：[FF] 把網站變漂亮 - Stylish Style 分享 ：介紹了一些能讓視覺效果加強的外觀。

Nicky's Blog：Firefox + Stylish = 10 个非常漂亮的网站 ：針對漂亮外觀的十大精選。

5 Extreme Gmail Makeovers ：五個最新針對Gmail的可替換樣式，效果驚人。

Mozilla Taiwan Stylish：Mozilla中文社群上對Stylish的詳細介紹與收集。

 

• 小結：

我自己最喜歡Stylish的地方，還是在於它非常方便的替換功能，只要我的感覺不對，或是想要換一下心情，點個兩三下，網站馬上可以變成不同的樣子。而對於更專業的用戶來說，Stylish更可以讓他們自己手動的去修改並覆蓋原始網站的樣式，尤其對閱讀效果要求很高的人來說，他們再也不用忍受不喜歡的網頁外觀，完全可以自己手動來編輯改動了。