Stylebot 設計網頁不用懂CSS語法, 親切版Stylish隨意改造網站

stylebot-00

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

只是Stylish雖然能夠直接套用別人做好的樣式(而且有龐大的樣式資料庫),讓你隨意替換Gmail、Facebook或各種網站的外觀,但是當你想要針對某個網站進行手動版面調整時,Stylish要求用戶必須懂得CSS語法才能進行程式碼修改。那麼那些對於CSS樣式語法不熟悉的用戶怎麼辦?

現在,透過「Stylebot」這款Google Chrome套件,我們可以用非常簡單的所見即所得編輯器,操作圖像介面直接調整網站的CSS樣式。這樣一來大大的增加了用戶使用上的普及性,任何人都能夠輕易的去將某個網站調整成自己喜歡的外觀。

 

  • 所見即所得的CSS編輯器:

在Google Chrome中安裝Stylebot,來到任何網站,點擊網址列右方新增的「CSS」連結,就可以開啟側邊欄編輯列。

這時候你必須在網頁中用綠色框框點選一個你想編輯的版面區塊,才能開始進行細部修改動作。在所見即所得的CSS編輯列中,你可以調整字體、行距、字距、背景顏色、欄位樣式等等,而所有修改都直接利用按鈕選項調整即可,並可於網頁中即時看到修改結果。

stylebot-02

 

  • 自動儲存自訂後的網頁新樣式:

你可以利用CSS側邊欄編輯器上方的左右切換按鈕,把側邊欄換到左邊或右邊,以免擋住你想修改的部份。而編輯列下方的〔Reset All〕按鈕,可以把所有修改復原成網站最原初的版面樣式。

在Stylebot編輯列中所做的任何修改,都會即時儲存。之後你來到同一個網站時,就會直接替換你修改過後的CSS樣式。

stylebot-03

 

  • 獲得編輯後的CSS語法程式碼:

點擊Stylebot編輯列下方的〔Edit CSS〕按鈕,可以獲得你剛剛進行的CSS樣式修改語法(也可以在這裡直接編輯)。

這對於想要修改自己部落格、網站版面的用戶來說,是一個很好的輔助工具。

stylebot-04

 

  • 自動同步你的網站樣式修改清單:

進入Stylebot的套件選項設定中,你可以於「Custom Styles」列表中看到目前儲存的修改網站清單;而啟動〔Enable Sync〕功能的話,還可以透過Google Chrome內建同步工具在多台電腦之間同步你的CSS修改清單。

stylebot-01

 

  • 小結:

以「Stylish」來說,它的優點在於有龐大的樣式資料庫,我們可以直接搜尋替換。而「Stylebot」雖然沒有可以直接替換的樣式,但卻提供了比Stylish更親切的所見即所得編輯器,這也帶來了兩個應用上的優點:

  1. 將任何網站改造成自己喜歡的版面:讓不懂CSS語法的用戶也可以享受「自己亂改網頁外觀」的樂趣。
  2. 作為個人部落格、網站樣式修改時的輔助工具讓不熟悉CSS語法的用戶快速獲得正確的程式碼,並複製到自己的網站中(熟悉CSS的朋友,也可以利用所見即所得編輯器,輕鬆實驗各種改造效果)。

推薦給大家玩玩看。

留言

  1. 這個看起來不錯呢,感謝介紹。
    火狐上我是用firebug/web developer。
    也是滿不錯的,不過這個有同功能,似乎更值得試試^^

    回覆刪除
  2. 不知道有沒有辦法用這個把google日曆的小工具都排版一下呢?

    回覆刪除
  3. Stylish數月前已因有爭議的資料收集行為遭到chrome官方下架
    https://www.ithome.com.tw/news/124338

    提醒一下:)

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

自動化圖片去背教學!只需 Word 或 PowerPoint 搞定

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

如何重新整理 Evernote 筆記?完整教學流程的重新排序分享

子彈筆記術(上) Bullet Journal 快狠準清單日記法教學

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

畫出一生的週行事曆,規劃人生的4680個空格:免費範本下載

如何實現年度計畫?下載與演練「改變每週時間規劃表」範本

工作愈忙愈要學習,問題不在沒時間、沒效果,試試這三步驟