WordPress筆記｜CSS為Headings(h2/h3/h4/h5/h6)加入自訂的背景與邊線

內容更新於 — 2023-06-17 15:57

這篇文章想記錄我的CSS學習起點，也想感謝我的啟蒙老師優雅筆寄。一開始只是想幫文章中的h2加上底色與左側的寬邊框，我知道CSS就可以做，根本不需要為了這一點小功能再安裝外掛！雖然網路上有許多CSS樣式的教學，比如說w3schools，背景與邊線的樣式根本小菜一碟，而codepen則是可以試做CSS與JS樣式。
然而，問題來了，我該將這些CSS樣式放在哪裡？以及，我該如何將這些CSS樣式應用在文章裡的h2？

基礎CSS樣式

我在h2運用到的樣式包含〔背景顏色〕、〔字體顏色〕、〔邊線位置〕、〔邊線寬度〕、〔邊線顏色〕、〔上右下左的內距〕。
使用的CSS snippet如下：

h2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

在上面的CSS語法中，藍色字是可以自由更改的屬性值，紅色字則是可以按照需要加上。

CSS語法

在CSS語法結構中，為最前面的〔h2〕是selector，也就是被指定的元素。
後半段前後用{}花括號包住的是declaration，是用來聲明樣式給最前面的selector。

selector｜指定要套用CSS樣式的元素

因為h2是HTML的標籤，如果想要在全站的h2都套用這個樣式，在最前面的selector直接用h2，是最快速方便的方式！如此便不需要再個別去套用CSS樣式。
除了h2以外，h1、h3、h4、h5、h6都一樣，可以作為最前面的selector，用後半段的declaration去指定樣式，並且套用到全站。

這種預期之外的全站套用，如果不影響版面佈局，那就無所謂了；反之，一旦影響了版面的整齊美觀，那就得為這個指定的selector做一些設定進行篩選，讓它只套用在我們想要套用的元素上。

為特定的selector命名，將CSS樣式套用在指定的元素中

這個方式不只能應用於headings(h1~h6)，其實是可以應用在所有的HTML的標籤或元素中，當然，也可以應用在Gutenberg或Block Editor區塊編輯器的任何一個區塊中。

因為是自定義的selector，名稱的前面必須加上〔.〕這個英文的句號。
比如說，想要將CSS樣式只套用在特定的h2身上，那就為這個CSS樣式命名為〔.myh2〕，或者是〔.miriamh2〕，甚至是〔.lmthequeen〕也可以，隨自己喜好，只要這個名字在網站的CSS樣式中是獨一無二的即可，重點是前面一定要加上〔.〕。
如果決定將selector命名為〔.myh2〕，修改後的CSS語法如下：

.myh2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

字體顏色

▶字體顏色的屬性為color，範例中使用的是〔HEX〕，屬性值為#ffffff
▶屬性值可更改為自己想要的字體顏色。
▶在CSS的樣式聲明中，屬性與屬性值之間使用英文的冒號:
▶範例中在顏色屬性值的後面加了一個【!important】，前面一個英文的驚嘆號!，後面是英文字important，這代表這個屬性值必須優先。
▶屬性值後面的英文分號【;】是為了與下一個屬性區隔。

顏色的屬性值

可使用顏色名稱〔color name〕、〔RGB〕、〔HEX〕、〔HSL〕以及可調整透明度的〔HEXA〕與〔HSLA〕。

color name

比如說Black、Blue、Red、Gray…等等，是最常用到的Color name，可以在w3schools中，查看一百多個顏色的〔color name〕、〔HEX〕以及〔RGB〕數值。
如果要使用Color name作為屬性值，可直接將範例中的#ffffff改成White就可以了。

並不是每一個顏色都有Color name，如果想要更多元的顏色，還是〔HEX〕最豐富也最方便！

HEX

呈現方式為#FFFFFF或#000000，也就是白色與黑色。
這是最容易取得的顏色屬性值，能選擇的顏色最細。
在WordPress後台的編輯頁面中任何一個色盤中，就可以找到顏色的〔HEX〕，或者是這個好用的檢色器網站，也能快速查找顏色的〔RGB〕、〔HEX〕以及〔HSL〕。

RGB

雖然比較少使用到，但是可以了解一下它的呈現方式為rgb(255, 255, 255)或rgb(0, 0, 0)，前面那組是白色的RGB數值，後面那組則是黑色的。
如果有需要，也可以在Picker上使用檢色器面板快速找到。
如果要使用RGB作為屬性值，可直接將範例中的#ffffff改成rgb(255, 255, 255)就可以了。
CSS語法就會變成：

.myh2 {
  color: rgb(255, 255, 255) !important;
  background-color: rgb(131, 181, 170);
  border-left: 12px solid rgb(92, 114, 110);
  padding : 1px 1px 1px 20px;
}

背景顏色

▶背景顏色的屬性為background-color，範例中使用的是Hex，屬性值為#83b5aa
▶屬性值可更改為自己想要的背景顏色。
▶在CSS的樣式聲明中，屬性與屬性值之間使用英文的冒號:
▶屬性值後面的英文分號【;】是為了與下一個屬性區隔。
屬性的呈現方式為

background-color: #83b5aa;

邊線位置、寬度、樣式與顏色

❶邊線屬性：位置
▶邊線的屬性為border，代表四邊都有邊線
▶如果只需要特定位置有邊線，可在屬性後面加上-top、-right、-bottom或-left
▶範例中只要左邊有邊線，所以屬性就是border-left
–
❷邊線屬性值：寬度、樣式與顏色
▶邊線的寬度、樣式與顏色是屬性值。
▶在CSS的樣式聲明中，屬性與屬性值之間使用英文的冒號:
▶邊線寬度的單位為【px】，範例中邊線寬度為【12px】。
▶邊線樣式的屬性值有【dotted】代表點點、【dashed】代表虛線、【solid】代表實線…等等，還有許多樣式，可以在w3schools中查詢。範例中選擇的樣式為【solid】。
▶範例中的邊線顏色使用的是〔HEX〕，屬性值為#5c726e
▶屬性值後面的英文分號【;】是為了與下一個屬性區隔。

內距｜padding

▶邊線的屬性為padding，目的是控制元素裡面的內容與邊線的距離。
▶內距的屬性值依序為上右下左，單位是【px】。
▶範例中指定為只有左邊距離20px，其他都是1px，所以設定值按照【上右下左】的順序為1px 1px 1px 20px

添加CSS樣式

按照前面所自訂的CSS樣式，有2種作法：
❶自動套用在全站的h2
❷手到套用在指定的h2

自動套用在全站的h2

CSS樣式最前面的selector直接填h2即可：

h2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

手動套用在指定的h2

必須先自訂selector，範例中自訂取名為myh2，前面要加上英文的句號〔.〕如下：

.myh2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

CSS樣式放哪裡?

決定好CSS樣式之後，接著就是前往Appearance外觀→Customize自訂→Additional CSS自訂CSS，將CSS樣式貼上之後，再點擊發布Publish即可。

自動套用在全站的h2

在自訂CSS貼上後，就會在右半邊的即時預覽看到變化。
一開始顯示的是首頁，可以前往文章或頁面看效果；如果都沒有問題的話，就可以點擊【發布Publish】，如此就能自動套用在網站中所有的h2。

因為我的首頁裡面也有使用h2，所以一貼上套用到全站h2的CSS樣式之後，有二處的h2已經呈現出CSS樣式。
但是這二處h2標題套用了自訂樣式之後，反而破壞了版面的美觀。

手動套用在指定的h2

因為在WordPress網站中，不一定只有文章中可以自己設定headings，有一些主題與外掛會強制設定標題要使用h2或h3…，除非要自己去修改主題或外掛的【.php】檔案。
所以，當遇到各種麻煩的原因，導致套用到全站的CSS樣式發生意料之外的效果而破壞版面，那只好麻煩一點，在自訂CSS貼上後，再手動套用到需要指定CSS樣式的h2區塊中。

如何在區塊編輯器指定CSS樣式給特定區塊?

將CSS樣式指定給特定的元素，在Gutenberg或區塊編輯器Block Editor是非常簡單又快速的操作方式，完全不需要切換到HTML編輯模式，非常推薦！

操作時間 1 minute

STEP 1｜自訂名稱的CSS語法

使用的是自己定義CSS名稱的這組語法。

STEP 2｜先將CSS語法加入主題的自訂中

在Appearance外觀→Customize自訂→Additional CSS自訂CSS，將CSS樣式貼上，再點擊發布Publish。

STEP 3｜在區塊編輯器中使用自訂的CSS樣式

因為CSS樣式已經加入主題的自訂CSS裡面，所以編輯文章的時候，每當需要指定h2的樣式時，再手動輸入自訂的CSS名稱，範例中的名稱為【myh2】。
操作方式☞在區塊編輯器先新增headings區塊→在右邊的【Block】中找到最下面的【Advanced】→展開下拉箭頭後會出現一個叫做【Additional CSS class(es)】的欄位，接著將自訂的CSS名稱【myh2】填在這個欄位中。

請注意，在自訂CSS中的CSS語法中，自訂名稱前面要加英文輸入法的句號〔.〕，但是在區塊編輯器的【Additional CSS class(es)】欄位中，就不用再加上〔.〕，只需要填寫自訂的名稱myh2就可以了。

為h2自訂CSS樣式的教學就介紹到這裡了！如果有任何問題，歡迎在下方的留言板討論指教囉。
更多WordPress相關筆記都在這裡。