只用「外觀>自訂」能變出的花樣有限,有時候又覺得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%;
}