【WordPress】修改文章內文連結CSS

最後更新於 2021 年 9 月 15 日

近期魔改主題中,所以會將一些CSS小技巧做個筆記順便分享出來。

llgGfhL 【WordPress】修改文章內文連結CSS

自訂CSS

點擊「Admin bar – 自訂 – 附加的CSS」。

【WordPress】修改文章內文連結CSS
0W2nEFy 【WordPress】修改文章內文連結CSS

你可以隨意輸入CSS語法來修改、美化主題。

B1KGDvh 【WordPress】修改文章內文連結CSS

尋找要修改的目標 Class

  我的習慣是會使用Google Chrome的開發人員工具(F12 或 Ctrl + Shift + I),選擇「選取工具(Ctrl + Shift + C)」點選文章內的隨意一個連結來獲取Class。

點選連結後,右側Styles就會顯示該Class或標籤的CSS語法。

【WordPress】修改文章內文連結CSS

說到這,就必須要提一個CSS的基礎。

id、Class的差異

當有一段html為 :

<div id="test">TEST</div>

那麼定義它的樣式CSS語法為 :

#test{
...
...
}

如果有一段html為 :

<span class="test">TEST</span>

那麼定義它的樣式CSS語法為:

.test{
…
…
}

有注意到這之中的差別嗎?沒錯,當要定義 id 的樣式時語法為 # 開頭,要定義 class 的樣式時語法為 . 開頭。

而普通的 a , h1 , h2 … 標籤 就不需要加任何東西,如:

h1{
  ...
}

修改CSS

  由上圖可知,我們選取的連結CSS語法為 a 標籤,並沒有發現class或者id的存在,那怎麼辦呢?如果你也遇到這樣的情況,可以在往它的更上層找,就能發現原來這個連結是包裹在class為entry-content的div區塊內。

因此你可以這麼去定義它的樣式:

.entry-content a {
  ....
}

這段語法代表你希望將div class=”entry-content” 內的 a 標籤 CSS語法 定義為 …。

  順帶一提,開發人員工具很棒的一個特點是你可以直接在旁邊修改它的樣式,以此來確定你有沒有找到對的class,也能確認你的語法是否可以達到你期望的效果。

CFS9tVm 【WordPress】修改文章內文連結CSS

那麼,在這裡提供一個CSS動態效果網站—CSSeffectsSnippets (現已失效,也可參考:Hover.css),這個網站提供CSS各種動態效果預覽,只要點擊你喜歡的動態效果就可以複製語法。

i3IA051 【WordPress】修改文章內文連結CSS

比如說我複製了移到連結上會出現底線的CSS語法:

.borderRightLeft {
    display: inline-block;
    color: #474E51;
    position: relative;
}
.borderRightLeft::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(1);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #5778F3;
     transform-origin: bottom left;
     transition: transform .3s ease-in-out;
 }
.borderRightLeft:hover::after {
     transform: scaleX(0);
     transform-origin: bottom right;
 }

將它改為:

.entry-content a {
    display: inline-block;
    color: #474E51;
    position: relative;
}
.entry-content a::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(1);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #5778F3;
     transform-origin: bottom left;
     transition: transform .3s ease-in-out;
}
.entry-content a:hover::after {
     transform: scaleX(0);
     transform-origin: bottom right;
}

最後貼到 附加的CSS 中按 發布 即可。

如果你對CSS語法一竅不通建議可以到 CSS語法教學 網站學習。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論