Blogger 內文加上漂亮底線 實作紀錄

如何讓文章的某些重點內容底下加上彩色底線標示？

有時候寫文章，需要某段文字或某幾個詞被特別標示，做為強調或是分隔用途。依舊在 WFU Blog 這邊，找到下列文章的解決方法：
[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)

本篇記錄的是加上漂亮底線的安裝和操作
首先，必須依照上面文章教學的內容，在HTML範本的 </head> 之前，安裝下列的程式碼：

點開取得程式碼

<!--文章文字加底線-->

<style type='text/css'>

b1{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczmv8puMcliXwyat6e69COIVvDQqpKgSlVAUNqyT4Bhc8wk9_sywqeD3T9bJOjsoQuFSZmeNuNZZ14IMHI2RAk74WsLQJ3JEey5E33z6SA-vZWjvUQeTusg7W4TC5p_427GeXLcBmkIot/s1600/blue.png) repeat no-repeat bottom;

line-height: 22px;

}

 

g{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjy4rAofjNcfrfG9-xYc5fGJ0yR3y5smf6D64j9oMpHhbJ3gxwPIsFuoOYxuAfJBQmIhzbAQrgejyTpJugoGj1iyLVO99cAdMwKHfany2Na-7oINPUwV9Z3jHMSDX4BhtyhpTt8cC218y_/s1600/green.png) repeat no-repeat bottom;

line-height: 22px;

}

 

r{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga004898U73IAtL3BeY_BGJNSpa-8CVk7XTiHUb4m-gjM-95T7zVpYzZNv_uRUqG5W5RwE-NJAn5zAzBKKJacs44OZt6HMgxjjuEKKt_mN8mLulZNdO7_WG2A7NAJYo5gAralA516lqU_3/s1600/red.png) repeat no-repeat bottom;

line-height: 22px;

}

      

pink{

background: url(https://filedn.com/l2Kq0amwwMuLL5h7z4tHcXk/Blogger%20pictures/Underline/pink1.png) repeat no-repeat bottom;

line-height: 22px;

}

            

yellow{

background: url(https://filedn.com/l2Kq0amwwMuLL5h7z4tHcXk/Blogger%20pictures/Underline/yellow1.png) repeat no-repeat bottom;

line-height: 22px;

}

</style>

 

<script type='text/javascript'>

document.createElement(&quot;b1&quot;)

document.createElement(&quot;g&quot;)

document.createElement(&quot;r&quot;)

document.createElement(&quot;pink&quot;)

document.createElement(&quot;yellow&quot;)

</script>

<!-- -->

撰寫文章需要呼叫此功能時，直接在HTML編輯模式下，在想標示底線的文字前後，夾上你設定的地線HTML標籤就好，例如 <r>紅色底線</r> 就會顯示出來了！

因為我的網誌沒有使用Google+的功能，所以綠色底線可以採用g就好不需要改成g1，這樣更直覺，至於黃色和粉紅色底線則是我自己挑選後加進來的，所以圖片是連結到我個人的pCloud空間上面。

目前唯一遇到的問題，就是我的網誌是走深底色，淺文字的風格，且字體尺寸偏小，所以某些蠟筆風格的底線，例如黃色底線，就會被嚴重遮蓋然後看不清楚，這是你安裝時必須要注意的地方，其他圖片的修改和注意事項，也請參照 WFU Blog 於上面文章的提醒！