最後更新日期:2019 年 7 月 26 日
本篇文章要教你如何透過CSS語法,更改WordPress標題樣式。
最近有很多人問我,我的標題樣式是怎麼做的、有沒有推薦什麼外掛,我發現有很多人有這個疑問。
我沒有用任何CSS外掛,我只靠CSS語法!

目錄
CSS介紹
CSS(Cascading Style Sheets)中文為層疊樣式表,這是一種用來為結構化文件(HTML、XML),增加樣式的程式語言。
簡單來說就是你在網頁上看到的顏色、字型、背景、動畫等等,都是CSS做的。
但是CSS不能單獨存在,他本身並不會產生文字,如果只有CSS就什麼都沒有。
講這麼多,我們來舉一個範例比較快!
以下是一個簡單的HTML,可以新增一個文件,取名為 index.html。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to Johntool-工具王阿璋!</h1> This is my CSS example </body> </html>
然後打開 index.html ,網頁的內容就會就會長成下面這樣:

接著在新增一個新文字文件,加上下面的CSS語法,把他改名成 style.css。
h1 { color: lightblue; background-color: gray; border: 1px solid black; } p { color: red; }
這時候再開啟一次網頁,就會看到網頁變成下面這個樣子:

這樣大家應該稍微了解 CSS的作用了吧!
接著要進入我們文章的重點了。
如何更改標題的CSS?
WordPress是一套很友善的系統,為什麼這樣說呢?因為他不用去主機內改程式碼,只需要透過後台就可以了。
我們先進入後台,選擇 外觀,然後點選 編輯CSS。
如果在這裡找不到的話,可以參考這篇文章。

然後就會看到下面的畫面,在左邊就可以新增CSS語法。

那大家剛進來的時候,這裡肯定是空的畫面。
然後就會問,我該在裡面打什麼?我想要的樣式怎麼做出來?
所以接下來我會提供三個範例CSS給大家模仿使用。
範例一
首先,教大家改h1,h1比較特別,他在HTML語法中,通常會被視為標題,也就是你文章內的標題。
那我們要如何達成以下的樣式呢?

在WordPress的設計中,標題會有一個class,叫做 entry-title ,那如果要改class,就要加一個 . ,加起來就是 .entry-title 。
程式碼如下:
.entry-title { /* 左邊界間隔5px ridge代表凸線 rgba代表顏色以及透明度 */ border-left: 5px ridge rgba(147,10,164,0.37); /*邊界的角度,越大代表越圓*/ border-radius: 31px; /*文字與文字的間距*/ padding:5px; /*文字的顏色*/ color:red; }
其中, 顏色或是寬度等等都可以自行調整,在編輯CSS這邊,可以馬上看到你的樣式改變的樣子。
範例二
接著我們示範 h2 ,h2~h6 的class都是一樣的,叫做 entry-content ,所以我們在使用的時候要用 .entry-content 。
但是光憑上面那樣,我們沒辦法去區分到底要改哪一個部分。
所以要打 .entry-content h2 ,如果是別的標題,就把h2改掉。
那我們這裡要達到的效果如下:

詳細的CSS語法如下:
.entry-content h2 { /* 背景顏色 #eeeeee */ background-color:#eeeeee; /*左側框線寬度(5px)、solid(實線)、顏色(orange)*/ border-left:5px solid orange; /*行內文字間距(5px)*/ padding:5px; /*垂直置中*/ }
顏色的部分,有幾種方式可以打,直接打英文(orange)、#色號(#eeeeee)、RGB(rgb(255, 0, 0)),然後實線的部分可以參考這個網站改成你要的線條。
範例三
範例三我一樣拿h2來示範,但這個例子就比較炫砲一點,參考參考就好。

程式碼如下:
.entry-content h2 { box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); font-weight:bold; color:red; }
如果這三個例子都不喜歡怎麼辦,繼續看下面的章節吧!
CSS語法產生器
我自己本身也不是一個太擅長CSS的人,所以我都是想到要什麼樣子才去查語法。
但是我也不是一個很有靈感的人,所以我就會去看CSS產生器有什麼有趣的樣式。
我推薦這個網站: HTML CSS JS generator

這個網站沒有什麼難度,就是進來之後,看到你想要的樣式,點進去就對了。
我舉一個例子,我先選擇 TEXT SHADOW,選好一個字型後,往下滑,按下藍色的Use This,就會產生語法。

再來複製這段CSS的內容,記得複製 { } 裡面的內容就好,外面的demotext不要複製到。
然後將他複製進去 .entry-content h2 ,就可以看到這樣的效果,不過有時候還是會因為主題有點不太一樣,還有會多產生重複的字,看到驚嘆號把他刪掉就好。
貼過去的效果如下:

當然,如果缺少什麼可以在自己客製化就好。
結論
我不知道這樣的教學,對大家有沒有實質幫助,我盡可能的寫出讓不懂程式也能懂得圖文範例。
為什麼我不用外掛呢?
- 因為我找不到我喜歡的外掛呀!
- 外掛太多會造成網站的速度慢
- 外掛不見得有我要的樣式
如果CSS產生器都沒有我要的樣式,我該怎麼辦?
- 學習! 可以自己學習有哪些CSS語法可以用,甚至是更進階的動畫。
因為現在的主流是CSS3,所以我推薦一本書可以有完整的語法教學:CSS大全 。

正如我在上一篇文章說到,學習程式語言的最好方式就是 讀一本完整架構的書籍。
現在網路上雖然很多資源,但是大多都是沒有結構化的文章。
當然,如果只是要特定功能,去網路查查就好,但是如果要學習好一個程式語言,書是絕對少不了的。
WordPress 線上課程推薦
阿璋正在籌備 WordPress 線上課程,如果有興趣的人,歡迎點擊下方連結。
從 0 開始建立部落格
站長之路手把手教你如何透過部落格開始賺錢,內容包含 WordPress、部落格經營、網路行銷,帶你成為一個成功的部落格站長!
WordPress 架站推薦
新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!
新手必看: WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!
學習更多:查看我是如何透過 WordPress 架設部落格,賺取人生第一桶金!
WordPress 學習書籍推薦
WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

書籍介紹
這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。推薦原因
這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!購買 WordPress 無敵架站手冊
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹
這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。推薦原因
這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。購買 WordPress Plugins 百大外掛精選(火力加強版)
支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦
推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢:站長之路
更多相關社群連結:工具王阿璋社群列表
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。
文章引用請來信索取授權,否則將保留法律追訴權。
by Johntool-工具王阿璋
感謝版主阿璋的教學,讓程式語言完全不懂的我,也能按照你的教學,一步一步的跟著圖解來編輯css成功運用在我的部落格,超級感恩~
能幫助新手學習程式語言,不要害怕程式語言,這樣是最好的!
超清楚的說明,讓我一下就懂該如何編輯,非常謝謝版主!!!
如果喜歡的話,記得幫我分享哦!
請問最一開始的地方,外觀下面的”編輯CSS”,我沒有這個選項耶
是要先下載什麼別的外掛嗎?
這個跟主題有關,可以參考這個網站
之前一直在頭疼著究竟可以怎樣在不靠外掛的情況下修飾標題.. 謝謝版主提供了那麼詳細的教學說明!照著你的教學終於都修飾到了!真的很謝謝你!
能不用外掛的東西真的少用,外掛裝的越多,對網站速度還是會有影響
很棒的分享,我是100%的新手,只是跟着做和copy and paste就弄好了。谢谢!
我的文章就是專門寫給100%新手看的,幸好妳看的懂XDD
超清楚的說明!
讓完全不懂的我完全看得懂 哈哈
謝謝版主
如果對你有幫助的話,記得幫我分享哦~~ 也可以關注粉絲專頁!
阿璋如果CSS裡面原本就有程式碼,可以直接在下面打嗎?
你說的是style.css嗎? 如果是的話我不建議。
我建議參考我這篇文章:【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學
哈囉阿璋!想請問我已經成功更改文章的標題了,但是「頁面」部分的標題沒有一起更動,請問是CSS部分哪邊要修改嗎?期待你的回覆,謝謝!
可能要麻煩你給我看你的頁面跟程式語法
阿章你好!
我想請問一下CSS是否可以只修改部分段落的文字?
我想修改的是段落裡的文字,不是標題上的
當然可以,但是不太方便應用,如果只是顏色的話,編輯器應該就夠用了
段落裡的文字可以參考step的那種做法
都沒注意到step這個的應用
試過之後可以,感謝你哦!!
太好了~
嗨阿璋!你的教學超管用,想再請教如果是要讓標題的底色上下高度加寬,且標題文字還是上下置中的,要加入什麼語法呢?謝謝!
上下高度加寬
這個語法本身就是置中的。
你好
關於WordPress 的繼續閱讀功能會將文章跳到我們加入【】的符號下面開始顯示,請問要如何讓文章按了繼續閱讀後跳到文章的開頭?
我沒有很清楚你的意思,可以給我看看你的網站嗎?
我覺得跟主題的設定比較有關係。
阿璋你好
如果要讓段落中的重點文字有底色效果或著是部分文字顏色變紅 請問這有什麼辦法!? 因為我的編輯器都是讓整個區塊變色 沒辦法單獨編輯。
你們說的STEP是怎麼用呢? 謝謝指教
還有你的網站的字體風格 間格看起來都好舒服~
我還是超級新手XD
1. 重點文字有底色的效果我不建議啦,我覺得有點醜!
2. 部分文字變紅這個功能,可以使用傳統編輯器,但是你就需要捨棄區塊變色。
3. step 的用法是在文章中加入這個格式 [step]1[/step]
瞭解了,謝謝阿璋
不客氣
我用好標題樣式了,我的文章的閱讀體驗瞬間好很多,big thanks!
不客氣,記得幫我多分享~
非常感謝板主的教學,我完全就是有看沒有懂!!!哈哈哈!!!我還是乖乖的用外掛吧!!!
不客氣哦~ 用外掛就好了
謝謝工具王阿璋~~我的標題終於活起來了!!
不客氣~ 記得幫我多分享
請問如果h2想要有兩種顏色~要怎麼設定CSS?
若幫h4再設計一個,然後把副標改成h4對seo會有影響嗎
謝謝…
結構明確最重要哦 CSS 怎麼改都沒差
謝謝工具王阿璋的文章
但我遇上問題
我下載好外掛,但還是沒有出現
以下是我的步驟,想請阿璋幫忙看看問題出在哪裡
打開外掛裡的CSS 程式碼片段範例
新增ccs 新增程式碼片段
複製您的語法貼上
前面有出現紅色叉叉符號
按〝儲存設定〞
沒看見文章有出現
請問是哪個步驟出了問題呢?
謝謝幫忙~~~
可能是主題的設定不太一樣哦,如果有需要可以私訊粉專,付費諮詢客製化
建議可以製成影片看得更清楚
像我看這些語法整個腦經空白哈哈
未來比較有空再補上囉,我的線上課程都會有的
WP全方位架站攻略
阿璋講解的很詳細,馬上就能學會,還提供HTML CSS JS generator這個網站,非常實用,最近要編輯table剛好可以來測試看看
這些網站真的超好用!
请问如果有些文章不想用css 要怎样呢?
請參考 WordPress 官方的開發文件,用程式碼片段排除部分文章編號
謝謝版主阿璋的教學!這邊也想請教,如果是想要文章h2有css樣式,但頁面不要有的話該怎麼用呢?謝謝
那就要指定.post