只用「外觀>自訂」能變出的花樣有限，有時候又覺得WP的主題實在好彆扭，怎麼這邊字這麼小，那個間距這麼寬，這個行距這麼窄等等。
我們要怎麼完全控制這些版面的設計呢？
由於 WordPress 的版面設計幾乎全是用 CSS 建出來的，所以只要找到是哪一段 CSS，然後把它貼在「外觀 > 自訂 > 進階選項 > 附加的CSS」裡面，就可自己下新的定義。
不過好像不是每個 WordPress 主題都有支援這個選項，在選擇佈景主題時，最好先檢查看看有沒有這個地方可以加入自己的 CSS ，不然會很麻煩。
這個分享主要在示範如何用Chrome瀏覽器的「檢查」功能找到控制某一個部分的 CSS 碼，然後如何重新定義，再貼上去「附加的CSS」裡面，達到客製化設計、調整版面的目的。
▼我們在「檢查」模式下，可以在右邊的視窗看到整個網頁的程式碼，用滑鼠在上面移動，左邊會有亮藍色的區塊，那就是我們滑到的這段程式碼控制的區塊。假設我們要設定左上角logo的CSS樣式。我們就要先找到屬於它所在位置的那段程式碼。
▼我們找到了這一個區塊程式碼裡面有包含logo的圖檔位址。
在這段程式碼裡面我們看到這張圖(的網址)被放在一段<img>的標籤裡面，而這段<img>又被包含在一個<a>標籤裡面，這個<a>標籤又是在一個<p>標籤裡面。
為什麼我們會說“裡面”？因為html標籤都有一個開始和一個結束，比如說<div>意思就是一段div區塊的開始，直到下一個</div>為止。也就是出現「斜線(/)」時，這一段標籤才結束。每一段標籤裡面又可以包含其他標籤的開始和結束在裡面。
我在 WordPress 裡面設定 CSS 的時候，通常會依照這樣的結構去找「最近的p 或是 div」這種標籤，看看他有沒有套用 CSS。如果你看到類似<div class=“…..”>這樣的東西，或是<p class=”….”>這樣，就可以從這邊著手。（這邊我先忽略用 id 選擇器套用的狀況）
在上面的例子中我們看到距離圖片網址最近的<p>標籤它套用了一個名為 “site-title” 的 CSS 選擇器。所以我們可以從這邊開始添加宣告，我們的CSS宣告會長這樣：
.site-title a img{
屬性：值 ;
}
我們先專注在如何宣告CSS的路徑就好，這裏 “site-title” 是 class 選擇器名稱所以前面要加一個英文句號「.」，而 a 和 img 則是HTML的標籤，所以前面不用加任何東西。
我們就從最外層寫起，中間都空一個空格，這個空個的意思為(裡面的)，所以就可以用「.site-title a img」來表示“site-title” 這個 CSS 裡面的 a 標籤裡面的 img 標籤。
至於要套用什麼屬性和值就寫在大括號 { 和 } 裡面。這些屬性和值一開始不用去背它，需要的時候用查的就好了，知道怎麼套用比較重要。
比如說我們要讓這個 logo 變成圓形的，我們就會這樣表示：
.site-title a img{
border-radius: 50%;
}