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

    提醒一下:)

    回覆刪除

張貼留言

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

這個網誌中的熱門文章

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

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

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

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

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

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

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Draw.io 中文線上製作流程圖首選!專業水準完全免費

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

Google 表單自動關閉回覆教學:時間人數到達就過期