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

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

 

  • 看著不順眼,隨手就換:

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

stylish-01

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

stylish-02

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

stylish-03

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

stylish-04

 

  • 多種樣式複合搭配:

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

stylish-05

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

stylish-06

 

  • 看不膩的豐富外觀:

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

stylish-07

 

  • 值得推薦的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更可以讓他們自己手動的去修改並覆蓋原始網站的樣式,尤其對閱讀效果要求很高的人來說,他們再也不用忍受不喜歡的網頁外觀,完全可以自己手動來編輯改動了。

 

 

留言

  1. 作者已經移除這則留言。

    回覆刪除
  2. 感覺其應用會便於"網頁設計師"在Design的過程更加如虎添翼。

    回覆刪除
  3. 謝謝你的回饋,
    這個小工具其實適用範圍還真的滿廣的

    回覆刪除
  4. very nice publish, i certainly love this web site, keep on it
    Feel free to visit my web blog onegameoneworld.wordpress.com

    回覆刪除
  5. That is very fascinating, You're a

    very professional blogger. I've joined your rss feed and look ahead to seeking more of
    your magnificent post. Additionally, I have shared
    your web site in

    my social networks!
    Also see my website: poyou

    回覆刪除
  6. 網誌管理員已經移除這則留言。

    回覆刪除
  7. Needed to post you that tiny remark to help give thanks again for these lovely opinions


    you've featured here. This is

    certainly unbelievably open-handed of you to deliver

    extensively exactly what numerous people could

    possibly have supplied for an e-book to help with making some bucks for themselves,

    most notably since you might have done it in case you wanted.

    Those thoughts

    in addition acted to provide a fantastic way to fully grasp other people

    have the identical dream the same as my personal own to see good deal more with regard to this matter.

    I believe there are thousands of more

    enjoyable sessions in the future for many who read carefully your

    site.
    Here is my blog post :: 4 beyonce album listen

    回覆刪除
  8. I was wondering if you ever considered changing the layout of your

    site? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content

    so people could connect with it better. Youve got an awful lot of text for only having one or
    2

    pictures. Maybe you could space it out better?
    My page :: 128x160 nokia games free download

    回覆刪除
  9. Howdy! Do you use Twitter? I'd like to follow you if that would be

    okay. I'm absolutely enjoying your blog and look forward to new posts.
    Here is my web blog http://tools.hackerjournals.com/?p=278

    回覆刪除
  10. Hi! Do you use Twitter? I'd like to follow you if that would be

    ok. I'm absolutely enjoying your blog and look forward to new updates.
    Also see my web page: Blogspot.Ru

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google Maps 我的地圖完全教學!規劃自助旅行攻略

個人知識管理的時間平衡心法,忙碌中我如何維持高效率輸入輸出

5 條「這時候,不要做」清單打破無意識行動模式的低效率循環

Google 表單的 10 個專業問卷調查設計秘密教學

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學,勝過 Midjourney