kobu agency ipARHaxETRk unsplash

如何讓 WordPress 文章標題更好看?5 分鐘教你用 CSS 自己改樣式!

最後更新時間:2020 年 8 月 11 日

如何讓 WordPress 文章標題更好看?如何將文章標題加上背景色?如何修改標題的樣式?如何讓文章標題更加凸顯出來呢?

這些都是 WordPress 新手站長很常問的問題,因為 WordPress 內建的文章樣式,原本也是參考英文使用者而去做出的設計,所以應用在中文上真的不是很好看。

接下來,我將教你如何使用最正確的 WordPress 修改方式,去改變網站標題的樣式,讓你的文章標題變得更吸睛、更好看!

利用 CSS 修改樣式

要修改 WordPress 中的文章標題 ( Heading ),你會需要用到一個叫做 CSS 的標記語言。

在進入 CSS 的介紹之前,為了讓你更加瞭解 CSS 的功能,所以我先準備了一個「乳酪蛋糕做法」的例子給你看,相信看完之後,你應該就對 CSS 有深刻的印象了。

  • 以下是用 WordPress 預設的文章樣式寫出來的東西:
2020 05 31 16 04 33
  • 以下是用 CSS 改變後的樣貌:
標題更好看

你可以很明顯地看到,標題的部分左邊多了一條線,並且有背景顏色,看起來跟內文有明顯的區別,因此也有起到凸顯標題的作用,而這就是 CSS 的威力。

好的,既然我們上面提到了很多次 CSS,那麼究竟什麼是 CSS 呢?

CSS 簡單介紹

什麼是 CSS?

CSS 又稱為階層式樣式表 ( Cascading Style Sheets ),詳細內容可以參考 MDN 的介紹,在這篇文章我不會詳細解講,簡單來說,你只要知道 CSS 是用來掌管網站外觀的一種標記語言就行了。

修改樣式一定要用 CSS 嗎?能不能用外掛解決?

你可能會問說:「我沒有任何程式背景,能不能用外掛做到相同的效果呢?」。

在這邊先跟你說句抱歉,可能沒辦法;如果你想要自訂 WordPress 文章標題的樣式,那麼自己寫 CSS 會是你最好的解法。

原因在於,一般我們不會在 WordPress 文章中使用任何外掛去寫文章,第一個原因是之後你刪除外掛或是換主題時,文章有用到外掛的部分都會出問題;再來就是使用外掛將會導致頁面載入速度變慢、以及影響主機效能等負面影響。

但其實不用對 CSS 太害怕,因為嚴格來說 CSS 並不算是一個程式語言,而是一個標記語言,它並不具有程式語言裡面有的邏輯,例如:函式、迴圈、判斷式,因此學習 CSS 其實是非常簡單上手的。

CSS 盒模型 ( Box-Model )

針對修改文章標題,你只會用到一個 CSS 的重要概念:盒模型 ( Box-Model ),盒模型主要是由以下四個元素所組成:

CSS Box Model
理想中的盒模型外觀
  1. 內容 ( Content ) – HTML 元素所佔的空間大小
  2. 內距 ( Padding ) – 內容到邊線之間的範圍
  3. 邊線 ( Border ) – 內距與外距之間的範圍
  4. 外距 ( Margin ) – 邊線之外的範圍

以剛剛的文章標題為例,會是長這樣子:

2020 05 28 00 19 37 2
  • 邊框、內距、外距,都可以分別指定,例如這個例子之中,只有左邊框下外距上/下/左內距
  • 在這個例子之中,我們想要左邊要一條線作為強調,因此只要顯示左邊框即可。
  • 因為邊框是包覆在內距之外,線段的長度是被內距所決定的,也就是內距越寬,邊框就越長。
  • 外距是用來將整個區塊與其它部分做分隔的部分,在這邊 WordPress 預設是只用下外距,避免跟照片/文字擠在一起。

看起來還是沒有很好懂嗎?沒關係,接下來你照著範例實作一次就能更了解了。

開始自訂文章標題

簡單講解完 CSS 的 Box-Model 之後,那我們就來實際做一次文章一開始的範例吧,希望做完之後,你也有能力修改成自己想要的外觀。

範例標題作法

2020 05 31 15 47 02

前往 WordPress 編輯文章,建立一個任一大小的標題 ( Heading )。

2020 05 31 15 47 29

點擊剛剛建立的標題,選擇右邊的區塊,並在最下面的「附加的 CSS 類別」中邊輸入一段你自定義的文字,例如我輸入的 cheese-cake

這是一個被稱為「class」的 CSS 屬性,你可以先把它理解成標籤的作用,所以說我們,對這個標題貼上了一個叫做cheese-cake的標籤,等等會用到。

2020 05 27 16 19 39

接著回到網站前台,點選 WordPress 最上方黑框框處的自訂選項,進入自訂模式。

2020 05 27 16 19 17

找到最下方的附加的 CSS欄位。

2020 05 31 15 52 06

將以下代碼複製貼上至空白處,並按下發佈

.cheese-cake{
    background-color: #f7f7f7;
    padding: 16px 0 16px 24px;
    border-left: 8px solid #e85a5a;
    color: #333 !important;
}
2020 05 27 22 00 29

完成之後,你應該就會得到這樣子樣式的標題了!

2020 05 31 15 47 29

如果你之後想要製作出一樣的樣式標題,那你只要在想要的標題中再寫上一樣的 CSS 類別,即可完成!

2020 05 31 16 01 16

剛剛發生了什麼事?

剛剛我們做了一個複製貼上程式碼的動作,就造成了這個結果,是為什麼呢?

.cheese-cake{
    background-color: #f7f7f7; /* 告訴電腦背景顏色 */
    padding: 16px 0 16px 24px; /* 告訴電腦內距要多大 */
    border-left: 8px solid #e85a5a; /* 告訴電腦左邊框要多寬、跟顏色 */
    color: #333 !important; /* 告訴電腦文字顏色 */
}

剛剛貼上的這段 CSS 程式碼的意思,是只要有 cheese-cake 這個 class 的內容,都會受到這段程式碼影響。

而為什麼你會有cheese-cake這個 class 呢?那是因為我們在 Step 1 的時候,有自己定義class

而如果想要在自訂 CSS 的欄位中選擇到這個class的話,我們必須要在程式碼前面加上一個.,這個的話只能請你背起來,因為是固定用法。

至於程式碼的內容,其實就算你不懂 CSS,多少也能猜出在講什麼,因為上面都是寫英文,不過我還是稍微講解一下:

  • background-color: #f7f7f7; -> 代表背景顏色是 #f7f7f7 這個顏色
  • padding: 16px 0 16px 24px; -> 分別代表內距上、右、下、左各項的數值
  • border-left: 8px solid #e85a5a; -> 代表左邊線的粗細以及顏色
  • color: #333 !important; -> 代表字體顏色是 #333 這個顏色,!important 代表它的優先等級是最高的

如何修改成自己的 Style?

當然,我也不希望我這篇文貼出之後,所有人的標題都長得跟教學文章一樣,相信你最終的目的,還是想要自己設計專屬的標題樣式對吧?

Vue
Vue.js 的 LOGO,配色非常舒服

舉例來說,我拿一個我平常寫網站用到的 JavaScript 框架 Vue.js 的 LOGO 做為例子,如果我想要做出一個符合它色系的標題樣式,這該如何做到呢?

稍微分析一下,你會發現其實我只需要把最左邊的邊框調成綠色 ( #41B883 ),並且把背景調成深灰色 ( #34495E ),然後把文字調成白色 ( #fff ),這樣就完成了!

2020 05 28 15 49 27

在這邊我先公佈解答,其實你拿來跟原本的例子比較,就會發現 CSS 的邏輯其實很簡單:就是很單純的用英文告訴電腦,你想要怎麼樣的樣式。

.cheese-cake{
    background-color: #34495E; /* 告訴電腦背景顏色 */
    padding: 16px 0 16px 24px; /* 告訴電腦內距要多大 */
    border-left: 8px solid #41B883; /* 告訴電腦左邊框要多寬、跟顏色 */
    color: #ffffff !important; /* 告訴電腦文字顏色 */
}

換你自己做做看!

WordPress LOGO

最後我準備了一個例題給你,請用 WordPress LOGO 的色系,製作出 WordPress 專屬的標題樣式,完成的結果應該要長得像這樣:

2020 05 28 16 05 37

WordPress LOGO 的色號分別為:

  • 藍色#00749C
  • 白色#fff
  • 深灰色#444140

提示:如果你發現字體顏色沒辦法變更的話,請在後面加上 !important

結語

其實 CSS 的盒模型 ( Box-Model ) 可以應用在很多地方上,不過以 WordPress 來說,最常用到的還是在文章中製作專屬的標題樣式,你也可以看到我的文章中,充斥著許多我的專屬樣式。

相信經過這篇教學文章,你應該有能力做出專屬的標題樣式了,如此一來,便能幫助讀者以更清楚的方式理解你的文章,進而提升網站的使用者體驗。

最後,如果你想要進一步把標題變得更好看的話,可以參考下面這篇,將預設的中文字字體換掉:

延伸閱讀:如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

額外資訊

獲得更多 WordPress 最新資訊

我目前正在製作一部 WordPress 網站的線上課程,主要內容會是教你如何從完全不懂程式碼的新手,透過學習架設 WordPress 網站與 SEO,打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話,歡迎填寫下方的訂閱表單,我將會告訴你最新的開課資訊。

加入 FB 討論社團

另外,我最近 ( 2020/06/14 ) 開設了一個 Facebook 社團,叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」,社團中討論的主題主要會是關於 WordPress 網站架設部落格經營、以及網路賺錢

如果你也對這些內容有興趣的話,歡迎你點擊下方的連結進行加入,我將會在那邊發佈一些這些主題的相關議題與討論,當然,對於 WordPress 有問題的話也可以直接在裡面詢問我唷!

你可能會想看

網路賺錢
部落格經營
基礎教學
站長必學
網站行銷
疑難雜症
進階技巧
Elementor
Woocommerce
學習資源

這篇文章有 11 則留言:

  1. wilson wang

    謝謝分享~請問再附加的ccs裡面本身已經有設定”微軟正黑體”的程式碼….請問這個標題的程式碼是直接加在下面嗎~~不好意思麻煩您了

      1. wilson wang

        抱歉~我沒有說清楚!應該是說我有看了您說明的更改字體的文章,裡面也是在”附加的 CSS”增加程式碼…我的意思是說假如我原本已經加了更改字體的程式碼在附加的 CSS……我現在另外要另外建立一個的標題時 ( Heading ),您所提供的程式碼一樣是在”附加的 CSS”加入…那請問這個加入是要加在原本的下面嗎~~不好意思麻煩您了

        1. body {
          font-family: Helvetica, ‘PingFang TC’, “微軟正黑體”, “Microsoft JhengHei”, sans-serif !important;
          }

          h1,h2,h3,h4,h5,h6{
          font-family: Helvetica, ‘PingFang TC’, “微軟正黑體”, “Microsoft JhengHei”, sans-serif !important;
          }

          .cheese-cake{
          background-color: #f7f7f7;
          padding: 16px 0 16px 24px;
          border-left: 8px solid #e85a5a;
          color: #333 !important;
          }

          CSS 直接這樣子排序下去就可以了,放上面的會先載入

  2. 写的很好,刚好需要这个,却发现其他地方讲的都是在主题编辑器那里修改整个标题的样式,帮大忙了。

  3. 你好,請問我是想修改編輯文章時的「區塊」選項裡面的「引文」,這樣可以直接去引文的CSS裡面做跟H1-6同樣的事情嗎?因為我照著你的做,結果不太成功。

    我原本的問題是我的佈景主題好像會把左邊那條線消失掉(編輯文章的時候會看到黑線,發布後黑線會不見,本來想說是不是佈景不相容,所以需要自定CSS。但都不成功。

    1. 佈景主題通常都會有預設的引言效果,所以如果你要改引言的外觀,你必須要對 CSS 有基本的了解,並且知道有那些屬性可以選擇,才能再透過 Class 去覆蓋過它原本的效果。

      所以如果妳改了沒有成功,就是妳撰寫的 CSS 權限沒有大過於原本佈景主題的權限,可以試著在每條 CSS 後方加入 !important,去獲得最高權限。

留言回應

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top