大家好 這是部落格樣式修改的第二篇文章，這一篇我主要會教導一個小技巧，是一個很實
用的技巧喔，可以節省我們很多的時間去做修改，或許會有讀者覺得使用基本的步驟就好
了不用學那麼多東西，但誠心希望妳跟著做一遍，你會發現好加在我有學習這個小技巧喔
嘻嘻
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
痞客邦樣式修改教學 - 第二單元 修改樣式小技巧-chrome功能介紹
稍微介紹這一次的小技巧，主要是我們在調整CSS的數值時(沒有修改經驗的人或是還不
熟的人可以觀看我的第一單元 基礎CSS修改示範)，有調整過的人都知道並不會
一次到位有時候希望他再大一點或是靠左一點，看到這裡大家有沒有深有同感呢，尤
其是在配色的時候往往都不會一次完成必須多方地嘗試各種配色。
這邊所使用的是chrome的功能可以讓我們在調整CSS時邊調整邊預覽我們的搭配，等
到確定正確的數值後再搭配Blog CSS調整(不會的同樣可參考我的第一單元 基礎CS
S修改示範)，把樣式的CSS做調整，這樣就可以省略一直來回調整做比較的時間，直
接預覽想要的數值邊調邊觀看，聽起來是不是很心動呢，趕快來看看怎麼做吧!!!
步驟1
打開我們想要調整的部落格，這次示範的地方跟第一單元一樣是在我是joy介紹區塊如圖1
所示，接著在畫面中按下F12，會出現圖2的畫面，底下有一堆的程式碼，但一樣不要害
怕喔，照著步驟就可以進行修改，不用全部的程式碼都需要了解也可以喔。
圖1
圖2
步驟2
這時可以配合圖3來做學習，圖3中有三個步驟，首先點選我們左邊的放大鏡功能，放大
鏡功能可以為我們選擇我們想要選擇的區塊，可以用來找尋區塊的標籤名稱再去後台做
修改，接著我們點選這次要修改的地方，我是joy的介紹區塊這時區塊會變成淺藍色表示
已經選取，接著看到圖3的第三步驟我們右手邊的地方，這邊表示我們選取的區塊的全部
CSS屬性，它可不單單只是顯示CSS的屬性數值這邊簡單喔，要是這麼單純就不用介紹
啦
圖3
步驟3
步驟3我們可以點選color右邊的色塊就可以跳出如圖4中的顏色調整區塊，那竟然跳出調
整區塊我們就來點選看看， 哇!!神奇的事情發生了，我們剛點選的區塊也跟著變換顏色
了，如圖5圖6所看到的，那我們透過這個方法就可以不用每次都要進到Blog的CSS調整
去做更改儲存後在點選預覽這麼麻煩的動作，看到這邊是不是很心動呢，這個功能可真好
用不過還沒完喔我們繼續看步驟4
圖4
圖5
圖6
步驟4
這時我們很開心地按下F5(重新整理按鈕)，奇怪了怎麼我們剛調整的都沒有呈現還是跟一
開始一樣呢，別急竟然都說是預覽了那他就只是提供我們一個CSS上的調整搭配，透過這
樣的方式我們可以不用一樣樣的去調整再做微調儲存這些反覆的動作，所以我們這邊看到
圖7的地方，在我們確定好這個CSS數值和調整的樣式是我們所想要的數值時，可以透過
右邊的欄位來記錄剛剛所調整的數值，再去後台Blog CSS調整的地方進行調整，一樣就
可以得到我們剛剛調整好的漂亮樣式囉。
圖7
後記
這次的教學是提供一個可以加速修改的小技巧，節省掉很多反覆操作的動作，整個過程並
不會太難這邊示範的地方是顏色的部分，同樣的圖7中看到的其他數值也都可以透過一樣
的方法做調整預覽，在確定完整版後在去後台做CSS的修改喔，希望大家喜歡這次的小撇
步，大家下次見囉
國內旅遊 (1)