fbpx

文章最後更新於 2021 年 3 月 24 日

在開始接觸WordPress架設Blog寫文章初期,我常常在想,為什麼別人的標題,總是起來美觀很多。而自己不論是用什麼佈景主題,總是無法達到想要的形式。

雖然常聽到許多人說,內容才是王道,但說實在的,如果沒有在文章上的標題下點工夫,還真的吸引不到什麼注意力。畢竟人就是視覺的動物…

自已都覺得不好看,想必也是多數人覺得不好…所以在這接下來的內容,將和你分享,我如何使用CSS的語法來美化文章的外觀,如果你也正煩惱這個事情,那接下來給我5分鐘的時間,讓我來和你分享,什麼是CSS與我是怎麼調整與修改的吧!

我將盡可能使用簡易的圖文,讓你一次明白,跟著文章來試試吧!

CSS修改示範

就以這篇為例

  • 下圖就是沒有進行CSS外觀修正的樣式
如何用CSS語法美化文章標題外觀_教學01
  • 下圖就是有變更過CSS設定的文字標題
CSS語法美化文章標題外觀 教學02

依上方兩張圖片,可以看出同標題將會有不同的形式。而使用CSS就可以自由的修改成自已想要的形式。

CSS是什麼

CSS 英文全名是 Cascading Style Sheets,中文叫階層式樣表。是一種用來為結構化文件(Html或XML),設定樣式(字體、顏色、間距…等屬性)的電腦語言。

CSS的維基百科 Link

簡單來說,CSS就是用來控制網頁中所有內容的控制語法。

看到【語法】可能會有人覺得,是不是像程式語言一樣難懂,其實他的內容是很「直觀」的,只要能稍記一些常用的功能,你的網站也能做到和別人不一樣。

CSS的結構(盒模型Box-Model)

在開始之前,需要先了解一下CSS的結構模式,這樣你在進行語法設罝時,才不會亂了套。

下圖就是整個CSS的結構圖,又稱盒模型Box-Model,下圖即是他整體的示意圖

盒模型Box-Model

1.內容(Content)

指在網頁上使用的物件所佔的區域,例如 文字塊、圖片、多媒體…等等。

2.內距(Padding)

指內容至邊線的區域。

3.邊框(Border)

指內距至邊框的區域。

4.外距(Margin)

指邊框至外距的區域。

以此圖為例子的話

CSS語法美化文章標題外觀 教學08
  • 什麼是CSS:這文字的部分,就是內容。
  • 紅色箭頭:就是指內距。
  • 藍色箭頭:就是指邊框。
  • 橘色箭頭:就是指外距。

文字的部分,就是使用白色,並將【什麼是CSS】的文字內距左邊、上與下均設定距離,邊框大小進行設定,並設置為藍色,這範例是沒有設置外距的部分。

明白完CSS大致的概念後,接下來我們就進入製作的部份吧。

CSS修改標題教學

以下我將會用圖+文標示的方式,讓你可以一步步來進行了解,學會如何使用CSS修改標題。

如何用CSS語法美化文章標題外觀_教學03

文章編輯的畫面,插入文章題,右方會有出現區塊,在區塊中的進階設定裡。

如何用CSS語法美化文章標題外觀_教學04

在進階中的最下方,有個 【附加的CSS類別】,我在示範上是打上 “post-h2-title”,其實這並沒有限定,只要是英文+數字的組合即可。

先設置好名稱後,下方才開始進入CSS的正式修改。

CSS語法美化文章標題外觀 教學05

在WordPress的後台中的 外觀→自訂 裡,進行CSS的語法的新增。

CSS語法美化文章標題外觀 教學06

再找到附加的CSS

CSS語法美化文章標題外觀 教學07

請將下方CSS碼的代碼複製後貼上,並發佈即可

.post-h2-title {
     background-color:#444140;
     padding: 16px 0 16px 24px;
     border-left: 8px solid #00749C;
     color: #ffff !important;
}

發佈後,就會得到相同的樣式

CSS語法美化文章標題外觀 教學02

之後,如果你想在其他的標題,出現一樣的形式,只要在【區塊→進階→附加的CSS類別】打上相同的名稱 “post-h2-title” 即可。

CSS的語法說明

以上述的範例來看

.post-h2-title {
     background-color:#444140;
     padding: 16px 0 16px 24px;
     border-left: 8px solid #00749C;
     color: #ffff !important;
}
  • post-h2-title :這部分就是我們剛剛在CSS類別中,自訂的Class語法名稱,而在post前面的 “.” 就是在輸入程式碼時,固定的用法。
  • { … } :這是Class固定的用法,你可以想像它就是把想呈現的樣式,包在裡面。
  • background-color:是指設定這個背景的顏色,而顏色是使用【色碼】#444140,這裡也有色碼表可以進行參考。
  • padding:就是內距,你看到完成的樣式,是不是內容和內距上,都有一個一定的距離呢?而 16px 0 16px 24px,各是內距 “上 右 下 左” 的數值。
  • border-left:就是指邊框的左邊,設定有8px寬的實線(solid),顏色是 #00749C。
  • color:即是指文字的顏色,#ffff 就是白色囉。

CSS使用上的資源匯整

網頁設計CSS常用語法(點此開啟)

色碼表(點此開啟)

文章最後

在這裡是簡單將CSS的應用在標題的方式,讓你知道。其實在網站製作中,每個元件都有其CSS可以進行修改與調整。

也相信透過這個簡易的CSS教學範例,你也可以完成屬於自己專屬的標題或外觀模式。如果你有任何問題,你也可以到下方留言給我。讓我們一起來努力提高網站的瀏灠體驗吧!

其他資訊

目前我在Youtube上,有提供許多有關WordPress架站的相關教學,有興趣的你,可一步步來完成一個屬於自己的網站,可以參考我提供的教學內容,來幫助你建立好一個屬於自己的網站唷。

課程的內容,我也有用網頁來整理,你可以點擊下方圖片,或點此前往

WordPress架站教學
WordPress架站教學
joyymkt

Joyy志強

網路行銷 | 網站架設 | 技術教學 | 聯盟行銷 | 網路賺錢

網路行銷玩家,對行銷、產品策略規畫、數位廣告投放均有涉獵。喜好分享網路行銷相關知識與內容,致力推廣網行銷相關資訊,期待網路行銷這技能可以更加普及,並與國外執行水平可以更加接近。

Share This