之前看到有些部落格，在重點的地方都可以畫上漂亮的下底線，非常喜歡！可是剛開始Google找到的都是畫一些像是Word一樣的下底線字樣，覺得非常醜！經過一番搜尋以後，終於找到一個不錯的部落格教學！不過像我一樣的架站新手，可能有遇到很多跟我一樣的問題，這篇文章想要分享一下像我這樣的架站小白，怎麼樣為自己的部落格文章加上花樣下底線，也讓我自己筆記一下，一起來看看吧！

為什麼要加花樣下底線？

文章內容有時候光有圖片還不夠，寫完以後看到密密麻麻的文字，總覺得沒有辦法一目了然的知道重點是什麼，對於時間有限的朋友們，如果可以在一篇文章裡面為他標註下重點，可以節省掉閱讀者很多時間，就像是書摘的概念，閱讀起來也不會那麼昏昏欲睡。

可是傳統的那種下底線文字工具（像是你現在看到文字底下的這種），在部落格閱讀上，沒有那麼搶眼，很容易會被忽略了，於是我在跟著菜鳥人妻搬去匈牙利的網站裡面，看到了她所使用的花樣下底線，一眼愛上！就決定也想要學習這樣的方法去為自己的部落格增添一些色彩😘

怎麼添加花樣下底線

在找資料的時候，終於找到了這個看起來比較親切的教學網站WFU BLOG，因為我沒有寫過任何關於HTML或是CSS，所以有些網頁寫的內容我。完。全。看。不。懂😣

不過即使這個網站再怎麼淺顯易懂，我也沒有一看就完全明白怎麼添加，後來也是又找了其他的資訊，才知道要把程式碼放在哪裡，剛開始還傻傻的直接用傳統編輯工具加上程式碼，想說奇怪怎麼呼叫不出來我想要的程式🤣

讓我們一起看看我的步驟吧！我目前使用的是Soledad佈景主題。

1. 至WFU BLOG裡面去選擇想要的下底線樣式，並按下另存新檔，記得檔案格式是PNG

💡 為什麼會建議去WFU BLOG抓圖而不去原本的來源處「CSS語法之在文字加底線的效果」呢？

因為作者很貼心的幫忙把圖片樣式都改成透明的背景，透明的圖片才不會遮住原本文字的部分，或著是也可以將圖片設定為透明的，會有螢光筆畫重點的感覺；再來是我有嘗試著去GOOGLE圖片蒐尋找其他花樣下底線的樣式，可是都沒有遇到喜歡的，所以後來我從這個部落格裡去存我喜歡的圖片檔了

2.上傳下底線樣式到網路圖庫，或是任何一個雲端資料夾裡面（如果是雲端資料夾，要記得設定開放唷！）

我自己是選擇使用Imgur當作我的圖片圖庫，我覺得對於新手小白寫部落格來說蠻好用的，又不會占用到太多伺服器的資源，未來搬家的時候也都可以直接取用圖片。

3. 圖片檔都準備好以後，開始在筆記本裡面建立程式碼

修改程式碼這件事情，我的習慣是會先把整個程式碼在筆記本裡面先改好，確定基本架構沒有問題以後，才會複製/貼上到網站的後台去，避免不小心改到其他的部分。

基本的程式碼架構，是利用WFU BLOG的部落格裡面的程式碼去做修改，也就是置換圖片網址的部分（粗體字的部分），以下是修改後的程式碼👇

<style type='text/css'>
b1{
background: url(https://i.imgur.com/EFIxmko.png) repeat no-repeat bottom;
line-height: 22px;
}
 
g{
background: url(https://i.imgur.com/ZFhMU5R.png) repeat no-repeat bottom;
line-height: 22px;
}
 
r{
background: url(https://i.imgur.com/8zlsphY.png) repeat no-repeat bottom;
line-height: 22px;
}
</style>

<script type='text/javascript'>
document.createElement("b1")
document.createElement("g")
document.createElement("r")
</script>

💡 這邊是我對於這個程式的白話超簡易理解（非專業，太專業的我看不懂🤣）

意思就是說有b1、g、r三種變數，分別代表三種不同的下底線樣式，只要我在想要畫上重點的字體前後包上這三個變數，就可以幫文字畫重點囉！這邊還要注意，有些變數已經被內建在網頁的HTML裡面了，所以如果衝突到的話，可能會沒有辦法正常辨識是什麼樣的內容，像是〝b〞之所以取名叫做〝b1〞，就是因為如果只用b，會顯示粗體。

那我自己設定的b1、g、r分別是長這樣👇

b1的樣式在這裡

g的樣式在這裡

r的樣式在這裡

4. 將程式碼嵌入WordPress後台

我自己看不懂WFU BLOG裡面的安裝方式，但是有抓到一段關鍵字句是「把程式碼插入</head>的前面」，因為之前有設定過Google Analytics跟Google Ad，但因為不知道</head>要去哪裡找，所以有額外安裝一個外掛「Insert Headers and Footers」去滿足埋入一些資訊的需求。

於是看到這段關鍵字，也就自然的想到這個外掛。

👉 將剛剛放在記事本裡面的程式碼，貼到插入頁首的指令碼欄位中即可，然後記得拉到最下面去點選儲存。

5. 利用WordPress內建的Gutenberg 古騰堡編輯器去撰寫文章

原本是使用第三方的Elementor編輯器，可是一些設定都覺得非常難調整，後來爬文+WordPress不懂程式的新手站長 – 網站帶路姬學園裡面請教社友的時候，才發現大家都是推薦原本WordPress內建的Gutenberg 古騰堡文章編輯器去寫文章，剛開始不太習慣，用上手以後發現整個版面變的更整齊，靈活度也更高。

文章編輯器裡面預設的是「視覺化編輯」，平時我都是使用這個模式在寫文章，這樣可以很快速的簡單預覽文章內容，需要編輯加入花樣下底線的時候，才會切換至「編輯HTML程式碼」

切換過來編輯HTML程式碼以後，就可以在想要畫重點的文字前後去加上剛剛宣告的b1、g、r變數了。

程式碼會像以上這樣，這樣就大功告成囉！

恭喜自己又學會一項技能囉✌✌✌