首頁 Uncategorized 如何讓WordPress文章標題增加色彩和框線?只要使用自訂CSS就好

如何讓WordPress文章標題增加色彩和框線?只要使用自訂CSS就好

weijun
0 評論

使用模板預設的樣式,通常標題不會有太多的變化,包含大標和小標都是。不過如果多看看別人的網站,就可以發現有些人的網站文章有各種變化,最常見的就是每個標題的顏色樣貌和框線設計。

這裡就來講看看要怎麼自訂這種框線和顏色,不需要使用外掛喔。

文章的標題可以有哪些變化?

針對不同的標題用不同的顏色區隔

一篇文章往往會有多層的標題,從整篇文章的大標題開始,裡面還有各個段落的小標題,然後還有更小的標題。你現在看到的這個段落上方正是有兩種不同大小的標題是吧。

這些標題是可以做造型的,舉例來說,這是我網站之前的設計。

這是各段落的大標題的樣貌。

每個大段落上方我都會這樣輸入標題,同時用灰色底和框線來凸顯。而更小的標題沒有放這種設計,就像下圖這樣。

這是小段落的標題樣式。

我們今天就來看看要怎麼自訂這些標題吧。

要怎麼修改標題的樣式?

所有的標題都有自己的標籤,透過CSS就可以修改

而這些標題由大而小分別稱為h1-h6,每一個都可以獨立設定樣式。不過要用什麼東西控制樣式呢?這個就稱作CSS。

CSS的功能就是幫網頁做美化,告訴瀏覽器網頁的文章該怎麼排版。

透過網頁原始碼參考別人的設定

CSS 是什麼?該怎麼使用?聽起來好像很複雜,不過不用怕,我們先來參考看看別人的網頁都怎麼做的,就可以知道CSS究竟有什麼用途。

首先按下F12,然後切換到 Elements,並且點下旁邊的游標符號,如下圖。

然後我們去點一下文章中的任意一個標題看看,這時候應該標題會被框選起來。

這是一個h3的標題。

這時候上方的框框告訴我們這是一個h3的標題,這時候右邊的框框就可以看到CSS程式碼了。

下面那個Styles就是CSS的設定了。

CSS 要設在哪裡?

要更改文章的CSS有很多種方式,不過最好是設在模板裡面。首先可以從後台點開外觀-自訂,進到模板的調整地方。這時候找一下就可以看到自訂CSS的地方,每個模板會不太一樣,不過只要看到CSS應該就是。

點下Custom CSS。

修改各個標題的樣式

首先從h2開始

點進去之後就可以看到自訂CSS的欄位了。

如果你在這邊輸入CSS,右邊會及時出現變化。這裡來看看我h2的設定吧。

.entry-content h2  {background-color:#eeeeee;
border-left:5px solid blue;
border-right:5px solid blue;
color:blue ; 
text-align: center; 
padding:7px;}

首先是第一行的.entry-content ,由於從h1-h6都是在.entry-content裡面,因此我們先指定這個要修改的地方,然後輸入h2,表示作用在h2之上。

然後就輸入你需要的設定,其中border-left代表的是標題左方的那條藍色線,當然,border-right則是右邊的線。而color則是文字顏色,text-align: center 代表文字置中,

接著設定h3

一樣的方式設定,這裡提供我的設定給大家參考。

.entry-content h3  {background-color:#eeeeee;
border-left:5px solid orange;
color:#dd4b0c;
padding:10px;}

自己想設的樣式不知道該怎麼樣設定嗎?

沒關係,其實網路上早就有許多CSS的語法資料,基本上只要把你想做的事情加上CSS當作關鍵字去搜尋就找的到了。

發表評論

本網站使用cookie來改善您的體驗。 我們假設您對此表示同意,但您可以選擇退出。 接受 閱讀更多