各位WordPress的站長們應該都知道,大部份網站的外觀都是使用CSS指令來設定它們的外觀和呈現方式的吧!如果您熟悉CSS指令的話,其實可以在編輯文章的時候使用「文字」模式,然後插入style指令來加入各式各樣的CSS指令來調整每一個文字或段落的外觀,詳細的方法請參考這一篇文章:【部落客必學的CSS指令】。但是,其實我們也可以使用WordPress內建的CSS編輯功能,來對於網站的整體外觀做調整。方法如下:

  首先,請先使用瀏覽器連結到你的網站,然後顯示網頁的原始碼,如下圖1所示:

圖1: 顯示網頁原始碼的方法

圖1: 顯示網頁原始碼的方法

  這是我們這個網站首頁的部份原始碼,如下圖2所示:

圖2: 網頁的原始碼

圖2: 網頁的原始碼

  在網頁的原始碼中,我們要找出想要修改的段落所屬的CSS類別名稱。以此網站為例,我們想要重新設定在側邊欄的小工具中,所有屬於li(條列式)項目下有a連結的部份的呈現方式,改為一開始的時候沒有底線,等滑鼠移到項目上時再加底線並變為藍色。在這裡我們發現,它屬於widget類別下的li和a。

  接下來就是到WordPress控制台中,找出「編輯CSS」的功能選項,然後把我們想要修改的CSS指定加上去,如下圖3所示:

圖3: WordPress編輯CSS指令的地方

圖3: WordPress編輯CSS指令的地方

  我們依照上述的內容輸入CSS的格式設定,如下所示:

h1, h2, h3, h4, h5, h6, body, p, div, span, table {
	font-family: 微軟正黑體;
}

.widget li {
	font-size: 11pt;
}

.widget li a {
	text-decoration: none;
}

.widget li a:hover {
	color: blue;
	text-decoration: underline;
}

  別忘了,要設定非預設的tag的類別,在類別名稱之前要加上「.」才行。然後再按下儲存樣式,如下所示:

圖4: 儲存樣式

圖4: 儲存樣式

  你就可以在網站的首頁側邊欄中看到我們設定的外觀整了。