[WordPress] 教你細修佈景主題中的 CSS,輕鬆打造完美的部落格

WordPress 擁有數千數萬的佈景主題可以供我們隨時更換,但對於剛接觸 WordPress 的朋友們來說,會有一個很大的困擾就是:當你找到一個大致上還算完美還算理想的主題時,偏偏就有一些地方不是很喜歡,可能是字太小阿,或是有些地方間距太大或太小,當你想要修改卻不會修改,導致又去找別的佈景主題了!就這樣一直循環,沒完沒了!

今天就要來幫大家解決如何細修 WordPress 的佈景主題。這一篇主要對針對佈景主題的 CSS 做修改,如果需要做比較大的架構更動的話,我就會比較建議可以去找相近的主題來修改,這樣會比較節省時間。由於細修還是要會一點點的 CSS 語言才可以做比較多的變化,所以當你看不懂 CSS 的時候可以去網路上查一下會有利於你修改 CSS 喔!

修改需求

我沒辦法全部都講到所有東西的修改方式,但如果反應好或是大家都有需求的話我會再做一篇來教大家想要細修的地方。而這篇我會用細修「Padding」這個屬性來當範例。

當我想要細修上面的間距,原先預設的間距太大,想要修改小一點,要怎麼修改呢?

預覽修改後的樣式

這邊就需要運用 Google Chrome 裡面的「檢查功能」,再隨便一個空白區域點擊右鍵,找到「檢查」

就可以發現右側視窗出現一個整個網頁架構的視窗

由於修改的時候右邊的視窗會想要調大觀看會比較舒適,但會導致預覽的時候會變成手機版的樣式,今天我們要修改的是電腦版的樣式,所以這邊我會先建議修改預覽的尺寸。調整到出現電腦版的大小即可

接著,點擊右上角的滑鼠圖案,靠近並點擊你想要修改樣式的地方。點擊完後右側就會跳出跟你點擊有關的 CSS 屬性

接著在最右邊的區塊拉到最下面,會有一個框架圖

可以試著修改裡面的參數。想我這邊是修改綠色的「Padding」,修改完就會發現上方會立馬預覽你修改後的結果。當你調整完你心目中的數值時,把數值記錄下來,並將網頁重整一次「CTRL+R」

尋找 CSS 在位置

重整完後,就可以開始尋找 「padding」這個屬性在什麼地方。而尋找的時候是要找沒有劃刪除線的屬性,沒有劃刪除線才代表現在的 CSS 是使用這個參數,當然你靠近那個參數的時候也會顯示剛剛綠色的標示,跟你講這個參數是影響它的。

當你找到後,就可以看到 CSS 的右方是這個屬性所在的檔案名稱跟第幾行可以找到這個屬性,而這個屬性的位置就在「style.css」的第「3549」行裡面

修改 CSS

就可以去尋找剛剛 CSS 所在的位置了,將 CSS 修改成你想要的參數

完成

大致上到這邊就可以完成囉!但有些人會反應怎麼沒有效果呢?這邊你可以先利用無痕模式看一下是否有沒有效果,不然也可以清除 Chrome 的快取檔案,強制 Chrome 重新拿取資料。如果再沒有就可以重複剛剛的教學看看 CSS 有沒有更改成功!

有話大聲說!