708
WordPress預設的區塊編輯器,只能改變整段文字的字體顏色和背景顏色,沒有辦法針對某字串修改樣式。所以,今天這篇文章就要來教大家如何做到「螢光筆劃重點」的效果,來強調文章中的某些字句。
帶路姬錄製了一個影片來詳細說明,其中分享了三種方式:
一、使用 Advanced Editor Tools外掛
只要安裝 Advanced Editor Tools外掛後,在後台編輯文章時,就可以選取你想用螢光筆強調、畫重點的字串,在右邊設定區中找到「文字色彩」的設定,指定想要的文字色彩與文字背景色彩。
二、寫 CSS來改全站通用的螢光筆
安裝好 Advanced Editor Tools後,如果不希望每次在不同的文章,想加螢光筆時還要個別選色,還擔心選到不同的顏色,讓網站變得很凌亂,這時,就可以考慮用這個做法,來設定一組全站通用的螢光筆效果,可以參考最上方的影片說明,會更加清楚喔!
- 選取你想畫重點的字串。
- 在段落上的快捷工具裡,選擇「資料標示」。
- 再到外觀 >自訂,加入以下 CSS語法,語法所代表的意思,在影片中有詳細說明喔!
mark{background-color:#fbe0ff;color:#000000}
三、寫 CSS來自訂多個全站通用的螢光筆
如果你想自訂多個全站通用的螢光筆樣式,那就得再更複雜一點了,透過下面的 CSS語法可以達成喔,一樣的,記得參考最上方的影片,有更詳細的說明與示範喔!
- 先將整個文字段落以「編輯 HTML程式碼」的方式編輯
- 在想畫重點的字串前後,分別加入下方第一個框框裡的 HTML程式碼
- 最後,到外觀 > 自訂,加入下方第二個框框裡的 CSS語法,就可以了喔!語法所代表的意思,在影片中有詳細說明喔!
/*以下是 HTML程式碼,記得把中文字換成你要的字串*/
<span class="my_highlighter1">你想畫重點的字串</span>
<span class="my_highlighter2">你想畫重點的字串</span>
/*把下面兩行貼到外觀自訂裡*/
.my_highlighter1{background-color:#a4f3ff;color:#222222;padding:3px}
.my_highlighter2{background-color:#f0cdff;color:#222222;padding:3px}
以上就是三個簡單的網頁螢光筆特效,如果你覺得這些效果仍不夠好看的話,可以參考帶路姬介紹過的 YellowPencil外掛,就可以更全面的掌控樣式囉!