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

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

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

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

• Stylebot：http://stylebot.me/

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

• 小結：

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

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

推薦給大家玩玩看。