首頁 WordPress 教學 Advanced Editor Tools:如何在網頁裡加螢光筆畫重點的效果?

Advanced Editor Tools:如何在網頁裡加螢光筆畫重點的效果?

0 留言 708 次瀏覽

WordPress預設的區塊編輯器,只能改變整段文字的字體顏色和背景顏色,沒有辦法針對某字串修改樣式。所以,今天這篇文章就要來教大家如何做到「螢光筆劃重點」的效果,來強調文章中的某些字句。

帶路姬錄製了一個影片來詳細說明,其中分享了三種方式:

一、使用 Advanced Editor Tools外掛

只要安裝 Advanced Editor Tools外掛後,在後台編輯文章時,就可以選取你想用螢光筆強調、畫重點的字串,在右邊設定區中找到「文字色彩」的設定,指定想要的文字色彩與文字背景色彩。

Advanced Editor Tools

二、寫 CSS來改全站通用的螢光筆

安裝好 Advanced Editor Tools後,如果不希望每次在不同的文章,想加螢光筆時還要個別選色,還擔心選到不同的顏色,讓網站變得很凌亂,這時,就可以考慮用這個做法,來設定一組全站通用的螢光筆效果,可以參考最上方的影片說明,會更加清楚喔!

  1. 選取你想畫重點的字串。
  2. 在段落上的快捷工具裡,選擇「資料標示」。
  3. 再到外觀 >自訂,加入以下 CSS語法,語法所代表的意思,在影片中有詳細說明喔!
mark{background-color:#fbe0ff;color:#000000}

三、寫 CSS來自訂多個全站通用的螢光筆

如果你想自訂多個全站通用的螢光筆樣式,那就得再更複雜一點了,透過下面的 CSS語法可以達成喔,一樣的,記得參考最上方的影片,有更詳細的說明與示範喔!

  1. 先將整個文字段落以「編輯 HTML程式碼」的方式編輯
  2. 在想畫重點的字串前後,分別加入下方第一個框框裡的 HTML程式碼
  3. 最後,到外觀 > 自訂,加入下方第二個框框裡的 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外掛,就可以更全面的掌控樣式囉!

留言給帶路姬吧!

* By using this form you agree with the storage and handling of your data by this website.

訂閱電子報 (週四寄)
帶路姬的文章重質不重量,所以請訂閱我的電子報,以確保會收到更多優質教學好文喔!
聯盟分潤聲明

此站內容為Erin的真實架站經驗分享,部分推薦的商品有參加 聯盟計畫,您若點選文中的連結而購買商品,Erin可以從中獲取一點分潤。不過Erin 100%保證,只誠懇推薦自己親身試用過的好東西。(什麼是聯盟計畫?)

支持帶路姬

假如你很喜歡帶路姬的文章,希望鼓勵帶路姬繼續寫作,幫助WordPress新手,與推廣WordPress,不如贊助一下帶路姬吧!

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,614,479(2024/2/2)
總訪客量:626,454 (2024/2/2)

© WordPress 網站帶路姬 2018~2024 版權所有 |  本站使用 Soledad主題 + Elementor Pro 編輯器   | 推薦使用 Cloudways主機

★ 完全免費的影音+圖文教學 ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link