
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,請新增一個文章或編輯舊文章。
然後新增一個圖片或在段落隨便打上一段字

然後在右側的 區塊,往下找到 進階設定,點開後在 附加的 CSS 類別 輸入妳要套用的類別名稱。
如果妳是用圖片那就打 img,希望字的左側有一條直線就打 head。

輸入完後發佈或更新文章,就可以在內文中看到套用的效果囉!是不是很方便

如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊

