fbpx
首頁 » 程式語言 » CSS » 【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學

【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學

CSS, WordPress, 程式語言 /

最後更新日期：2019 年 7 月 26 日

本篇文章要教你如何透過CSS語法，更改WordPress標題樣式。

最近有很多人問我，我的標題樣式是怎麼做的、有沒有推薦什麼外掛，我發現有很多人有這個疑問。

我沒有用任何CSS外掛，我只靠CSS語法！

【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學
【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學

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 ，網頁的內容就會就會長成下面這樣：

html example
HTML 範例

 

 

接著在新增一個新文字文件，加上下面的CSS語法，把他改名成 style.css。


h1 {
color: lightblue;
background-color: gray;
border: 1px solid black;
}

p {
color: red;
}

這時候再開啟一次網頁，就會看到網頁變成下面這個樣子：

html+css
HTML+CSS 範例

 

這樣大家應該稍微了解 CSS的作用了吧！

接著要進入我們文章的重點了。

 

如何更改標題的CSS？

WordPress是一套很友善的系統，為什麼這樣說呢？因為他不用去主機內改程式碼，只需要透過後台就可以了。

我們先進入後台，選擇 外觀，然後點選 編輯CSS。

如果在這裡找不到的話，可以參考這篇文章。

編輯CSS
編輯CSS

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

CSS 編輯畫面
CSS 編輯畫面

那大家剛進來的時候，這裡肯定是空的畫面。

然後就會問，我該在裡面打什麼？我想要的樣式怎麼做出來？

補充

在這裡編輯CSS是為了方面立即查看，但不是最好的方式！

正確的擺放位置請參考這篇文章：【WordPress教學】如何自訂WordPress語法？6個程式碼片段範例教學

所以接下來我會提供三個範例CSS給大家模仿使用。

範例一

首先，教大家改h1，h1比較特別，他在HTML語法中，通常會被視為標題，也就是你文章內的標題。

那我們要如何達成以下的樣式呢？

example1
範例一

在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

CSS語法產生器
CSS語法產生器

這個網站沒有什麼難度，就是進來之後，看到你想要的樣式，點進去就對了。

我舉一個例子，我先選擇 TEXT SHADOW，選好一個字型後，往下滑，按下藍色的Use This，就會產生語法。

Text Shadow
點選 Text Shadow，然後選一個你想要的字型，按下Use This

再來複製這段CSS的內容，記得複製 { } 裡面的內容就好，外面的demotext不要複製到。

然後將他複製進去 .entry-content h2 ，就可以看到這樣的效果，不過有時候還是會因為主題有點不太一樣，還有會多產生重複的字，看到驚嘆號把他刪掉就好。

貼過去的效果如下：

CSS 產生器範例
CSS 產生器範例

當然，如果缺少什麼可以在自己客製化就好。

 

結論

我不知道這樣的教學，對大家有沒有實質幫助，我盡可能的寫出讓不懂程式也能懂得圖文範例。

為什麼我不用外掛呢？

  • 因為我找不到我喜歡的外掛呀！
  • 外掛太多會造成網站的速度慢
  • 外掛不見得有我要的樣式

如果CSS產生器都沒有我要的樣式，我該怎麼辦？

  • 學習！ 可以自己學習有哪些CSS語法可以用，甚至是更進階的動畫。

因為現在的主流是CSS3，所以我推薦一本書可以有完整的語法教學：CSS大全 。

CSS大全
CSS大全

正如我在上一篇文章說到，學習程式語言的最好方式就是 讀一本完整架構的書籍。

現在網路上雖然很多資源，但是大多都是沒有結構化的文章。

當然，如果只是要特定功能，去網路查查就好，但是如果要學習好一個程式語言，書是絕對少不了的。



WordPress 線上課程推薦

阿璋正在籌備 WordPress 線上課程，如果有興趣的人，歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

站長之路手把手教你如何透過部落格開始賺錢，內容包含 WordPress、部落格經營、網路行銷，帶你成為一個成功的部落格站長！

查看站長之路

WordPress 架站推薦

新手架站：【架站教學】專門為WordPress打造的主機？WPWebHost 完整教學！

高流量網站：【架站教學】新手快速架站教學，使用Cloudways架設WordPress網站！

新手必看： WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整！

學習更多：查看我是如何透過 WordPress 架設部落格，賺取人生第一桶金！



WordPress 學習書籍推薦

WordPress 無敵架站手冊：架站新手都想擁有:教你打造個人專屬網站

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站，從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具，從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人，原文是英文，後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少，這本不僅是中文書，內容又非常完整，絕對是學習WordPress的首選書籍！

購買 WordPress 無敵架站手冊

WordPress Plugins百大外掛精選(火力加強版)

WordPress Plugins百大外掛精選(火力加強版)
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題，讓你想裝什麼就裝什麼，建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹，只要你想的到的功能幾乎都在裡面，匯集了讀者們一直喜愛的外掛程式介紹，並且添加了最新的外掛程式，更貼近現在的讀者需求。

推薦原因

這本書作者是免費資源網路社群的作者 Pseric，他的網站知名度非常的高，也是透過 WordPress 架設而成，因此對於外掛的理解，絕對是數一數二。

購買 WordPress Plugins 百大外掛精選(火力加強版)

支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。

打開網路就有錢 呂明璋（工具王阿璋）


 如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦

推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢：站長之路

更多相關社群連結：工具王阿璋社群列表

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

如果我的文章對你有幫助，歡迎贊助我一杯咖啡！

本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。

贊助我一杯咖啡

文章引用請來信索取授權，否則將保留法律追訴權。

by Johntool-工具王阿璋

你可能會喜歡...

在〈【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學〉中有 47 則留言

  1. Monica

    感謝版主阿璋的教學，讓程式語言完全不懂的我，也能按照你的教學，一步一步的跟著圖解來編輯css成功運用在我的部落格，超級感恩～

    回覆
  4. Mavis

    之前一直在頭疼著究竟可以怎樣在不靠外掛的情況下修飾標題.. 謝謝版主提供了那麼詳細的教學說明！照著你的教學終於都修飾到了！真的很謝謝你！

    回覆
  8. 張宇辰

    哈囉阿璋！想請問我已經成功更改文章的標題了，但是「頁面」部分的標題沒有一起更動，請問是CSS部分哪邊要修改嗎？期待你的回覆，謝謝！

    回覆
  11. 小瑜

    你好
    關於WordPress 的繼續閱讀功能會將文章跳到我們加入【】的符號下面開始顯示，請問要如何讓文章按了繼續閱讀後跳到文章的開頭?

    回覆
  12. 阿信

    阿璋你好
    如果要讓段落中的重點文字有底色效果或著是部分文字顏色變紅 請問這有什麼辦法!? 因為我的編輯器都是讓整個區塊變色 沒辦法單獨編輯。
    你們說的STEP是怎麼用呢? 謝謝指教

    還有你的網站的字體風格 間格看起來都好舒服~
    我還是超級新手XD

    回覆
    1. John

      1. 重點文字有底色的效果我不建議啦，我覺得有點醜！
      2. 部分文字變紅這個功能，可以使用傳統編輯器，但是你就需要捨棄區塊變色。
      3. step 的用法是在文章中加入這個格式 [step]1[/step]

      回覆
  17. missananastw

    請問如果h2想要有兩種顏色～要怎麼設定CSS?
    若幫h4再設計一個，然後把副標改成h4對seo會有影響嗎
    謝謝…

    回覆
  18. wendy

    謝謝工具王阿璋的文章
    但我遇上問題
    我下載好外掛，但還是沒有出現
    以下是我的步驟，想請阿璋幫忙看看問題出在哪裡

    打開外掛裡的CSS 程式碼片段範例
    新增ccs 新增程式碼片段
    複製您的語法貼上
    前面有出現紅色叉叉符號
    按〝儲存設定〞

    沒看見文章有出現
    請問是哪個步驟出了問題呢?
    謝謝幫忙~~~

    回覆
  20. 享購站

    阿璋講解的很詳細，馬上就能學會，還提供HTML CSS JS generator這個網站，非常實用，最近要編輯table剛好可以來測試看看

    回覆

發表迴響

Scroll to Top