fbpx

【網站架設】如何用CSS語法來美化文章標題外觀

by | 網站架設 | 4 comments

【網站架設】如何用CSS語法來美化文章標題外觀_

在開始接觸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
  • 內容(Content):指在網頁上使用的物件所佔的區域。
  • 內距(Padding):指內容至邊線的區域。
  • 邊框(Border):指內距至邊框的區域。
  • 外距(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教學範例,你也可以完成屬於自己專屬的標題或外觀模式。如果你有任何問題,你也可以到下方留言給我。讓我們一起來努力提高網站的瀏灠體驗吧!

如果對於這篇文章,有任何問題或建議,歡迎在下方留言處留下你的建議與問題。你的留言將會幫助到和你一樣有相同問題的人喔。

I’m Joyy

網路行銷玩家,對行銷、產品策略規畫、數位廣告投放均有涉獵。喜好分享網路行銷相關知識與內容,致力推廣網行銷相關資訊,期待透過自身行銷技能為客戶建立價值,創造不同的行銷模式。

Udemy線上課程

聯盟行銷-部落格行銷術

介紹台灣2個聯盟行銷平台。通路王與聯盟網。透過實際操作步驟,一步步教會你,如何使用部落的方式,來替你有興趣的市場,建立屬於你的行銷聯盟收入。讓你每天用你的空閒時間,來為自己建立額外收入來源。並學習到基礎的網路行銷技術與觀念。

4 Comments

  1. 陳威存

    不確定為何… 好像是因為版本的關係
    我進入「自訂」到 「附加的CSS」卻沒有地方可以Key-in

    Reply
    • Joyy志強

      哈囉,正常都是在這個位置中會有的。

      試試在WP後台的 外觀→自訂→附加的CSS 找找吧。

      或是截圖拍照Mail給我看看 [email protected]

      希望可以幫助到你。

      Reply
  2. 陳威存

    Hi Joey,

    後來回去再次嘗試,
    發現還是無法正常輸入。

    稍早已經有發信給你了… 再麻煩您的協助。

    Reply
    • Joyy志強

      Hi derrek
      我是Joyy,有收到您的來信了。看了一下,可能是您的編緝器讓這個項目名稱不太一樣,您試試找一下 Custom CSS 這個選項試試。

      Reply

留言回應

%d 位部落客按了讚: