WordPress 應用 – 附加的 CSS 類別

以前在撰寫文章時，就發現旁邊區塊底下的進階設定，有個 HTML 錨點 和 附加的 CSS 類別，但我從來沒有用過這兩個功能，雖然沒用過，不過看錨點底下的簡介，不難猜得出是幫標籤設定 id，另一個 CSS 類別顧名思義就是 class 了！

最近想要在撰寫文章時，為圖片加上框線，就想說能不能利用這個附加的 CSS 類別？
但是我要加在哪裡？又要怎麼加？
經過一番摸索總算被我找到了！

所以今天就來分享這個好用的功能。
如果想知道什麼是 CSS，可以參考我之前寫的文章，我有簡單的介紹。
在 HTML 中套用 CSS 的三種方法 – JB 程式筆記 (jbprogramnotes.com)

1. 首先到 WordPress 後台，點擊「外觀 – 自訂」，再點擊最底下的「附加的 CSS」。

P.S. 妳也可以直接點「外觀 – 附加的 CSS」試試，因為我的點下去會跳到 Jetpack 的設定頁。

看到下圖的畫面，我們要將 CSS 寫在裡面。

2. 將下方的 CSS 碼，複製到附加的 CSS 的編輯區。

.img {
	border: solid 1px #6b3008;
	border-radius: 6px;
}

.head {
	border-left: solid 6px #6b3008;
	padding-left: 6px;
}

CSS 解析

1. 因為是要給 class 用的，所以最前方要加個點 .。
2. 名稱可以隨便取，不用跟我的一樣，但妳最好取一看就懂的。

3. img 是設定給圖片用的，功能為為圖片加上邊框，且四個角都是圓角。
border 是邊框，裡面的參數分別為樣式、粗細、顏色。
solid 為實線、粗細設 1px，細細一條線就好、#6b3008 為色碼。

border-radius 是設定圓角

4. head 是設定給標題用的，功能為在字的左側加入一條直線。
剛剛說了 border 是邊框，那 border-left 就是左邊的邊框，只設定這個值的話，就只有左邊會有框線。

padding 為邊框到內文的距離，而 padding-left 顧名思義，就是只設定左側的距離而已。

3. 最後要來套用 CSS，請新增一個文章或編輯舊文章。

然後新增一個圖片或在段落隨便打上一段字