WordPress 如何自訂 CSS
首先要知道怎麼在 WordPress 網站找到你要修改的地方。
▼假設我要修改這個 WordPress 網站的 logo ,我想要用 CSS 去自定他的屬性讓他變成圓形。
▼我用 Chrome 瀏覽器在網頁上的任何一個地方按右鍵 > 檢查
▼右上角這個區塊是整個頁面的程式碼,我們在上面滑動,左邊會閃藍色的區塊範圍,以這個例子來說,我們滑鼠移到 <header> 區塊時,左邊頁面上半部整個區塊反藍,而我們要修改的 logo 就位在這個區塊裡面,但他還不是很準確,因為現在反藍的範圍比我們的 Logo 大多了,所以我們要在網這個區塊的「內部」去找,好像一個大盒子裡面,又有小盒子,小盒子裡面又有小小盒子的概念。
▼我們按 <header> 前面的三角形,可以展開裡面的項目
▼一直往下找,一邊注意左邊藍色的區塊。最後找到這個區塊是屬於 Logo 的區塊,這個區塊是從 <p class=”site-title”> 開始。如果我們看到 class=”XXX” 意思就是這個區塊要套用名為 XXX 的CSS 屬性。這個區塊顯然是套用名為 site-title 的 CSS 屬性。
而我們看到 <p class=”site-title”> 下面還有一個 <a ….. 的標籤,以及一個 <img src ….. 的標籤,裡面才是我們 Logo 的圖片。
所以我們現在知道我們要改的圖片是位在 site-title CSS屬性下的 a 標籤,再下面的 img 標籤( html 標籤看藍色的字就好)。
*通常我會建議找到那個要修改的元素後,如果它本身沒有套用 CSS 樣式,那就往上層找到最近的 div 或 p 標籤,看看有沒有套用 CSS 樣式,如果有就從那個 CSS 選擇器開始下手。但這不鐵律,也有可能可以從像是 li 標籤上的 CSS 樣式去修改,反正都可以嘗試看看,只是自訂CSS不會把網站搞壞的,不用擔心。
▼現在我們要寫入自訂的CSS,從「外觀 > 自訂 > 進階 > 附加的CSS」進入(不一樣的佈景主題,選項用詞可能會略有不同)。
進去之後我們先寫一個點,因為我們在宣告 class 選擇器名稱時會先打一個點。接在後面的是一個空格然後「a」在空一格然後「img」,這個意思就是我們要控制的項目是位在「site-title」CSS選擇器下面的 a 標籤下面的 img 標籤。然後我們打兩個大括弧 { } ,這兩個大括弧裡面我們就可以設定屬性。(關於CSS選擇器的類型可以參考這篇:class 與 id 選擇器)
用這種方式我們就可以找到 WordPress 裡面的每個元素的位置,並且找到控制它的CSS 去修改他的屬性,來達成各種效果。
▼比如說如果這一段我們要讓 Logo 變圓形,我們就會設一個倒圓角的屬性,並且把值設為 50%,這樣 Logo 就變成圓形了。
如果還是不太清楚怎麼找到元素所屬 CSS 的位置,可以參考這一篇:自訂CSS 調整 WordPress 文字、顏色、背景、寬度等
以下就列出幾個常用的屬性,就算還不懂 CSS 也可以直接套用。
常用 CSS 語法
border:5px solid #fff; | 邊框的粗細、樣式(虛線貨實線)、邊框顏色 |
border-radius:15px; | 倒圓角,可以用 px (pixel)表示,也可以用百分比表示。如果想要四個角分開設定,可以寫 border-radius:15px 50px 0px 5px; 這4個值由前到後分別用來設定「左上角」「右上角」「右下角」「左下角」*要設定圓角前,要先定義 border 屬性。 如:border: solid 1px #555; |
width: 50%;
height: 500px; |
width 屬性用來設定寬、height 用來設定高,值可以是百分比(以父元素為基準),也可以用 px 來表示。 |
color: #ffffff; | color 用來設定「文字」的顏色,用16進位法表示,如果想要查詢色碼的話,可以用 Google 搜尋「color picker」 |
background-color:red; | 設定背景顏色,和上一個屬性一樣,可以用16進位色碼,也可以直接寫入色彩名稱。 |
display: none; | 直接讓那個元素不顯示 |
opacity: 0.5; | 透明度 值:0~1 |
padding: 30px; | 區塊內元素距離區塊邊緣的距離 |
line-height:30px; | 行距 |
box-shadow: 3px 3px 5px #eee; | 區塊陰影,四個值分別為「水平位置」「垂直位置」「模糊程度」「陰影顏色」 |
text-shadow: 0.2em 0.5em 0.1em #600 | 文字陰影:和區塊陰影一樣,只是是設定文字陰影。 |
font-size: 18px; | 文字尺寸 |
font-weight:600; | 文字粗細,值越大越粗 |
XXX:hover{… } | 滑鼠滑上去時:XXX 這個CSS 樣式滑鼠滑上去時的變化樣式寫在{…}裡面。 |
.XXX:hover img{ animation: mymove 1s infinite; } @keyframes mymove { 50% {transform: rotate(20deg);} } |
滑鼠移上去後讓圖片旋轉:其中「XXX」要改成 CSS 選擇器的名字,而這個區塊下面的圖片會套用這個 CSS 屬性。
其中「1s」這個值是表示一次動作的時間,時間設越短動作越快。 而「20deg」是代表旋轉的角度。 這兩個值可以自己修改看看變化會怎樣。 |
.blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } |
呼吸閃爍 |
transform 變形效果 | 參考:CSS: transform:旋轉 rotate、縮放 scale、平移 translate、歪斜 skew、3D 透視 perspective |
animation 動畫效果 | 參考:CSS animation 動畫效果 |
a:link { color: green; }a:visited { color: green; }a:hover { color: red; }a:active { color: yellow; } |
a:link 連結的樣式
a:visited 連結訪問過的樣式 a:hover 滑鼠移上去時的樣式 a:active 點擊時的樣式 |
.abc { position: relative; top: -10px; } |
position: relative 宣告元件的相對位置,後面可以接 top, left, bottom, right 的值。意思是元件往上移、往左移、往下移、往右移多少,可以是負值。 |
如果想了解更多 CSS 屬性,可以參考:CSS 課程