用蠟筆畫重點,讓 WordPress 的文字活起來!

不曉得各位有沒有注意到,在我的sidebar 那邊,所有的大標題下面,都有一條藍藍的效果,看起來點像是用蠟筆畫重點呢?說道蠟筆畫重點,那可是國高中最痛苦又美好的回憶啊,雖然畫筆的長短,不等於分數的高低,但講義上面五顏六色蠟筆重點痕跡,看起來就有種成就感,對吧?

回歸正題,其實製作這種效果並不困難,只要有這種蠟筆的圖檔,就可以輕輕鬆鬆地在文字底下畫上生動的圖案。幾年前,這種圖檔還算好找,也許那時候剛好正流行這個吧?但現在,網路上完全找不到有人提供這個檔案,雖然在我上個Wordpress 備份檔裡面,是還留有各種圖檔,但那畢竟是別人的。既然這樣,那我們乾脆自己做吧

這次呢,我們需要兩個好用的軟體,一個是上次有介紹過的 Photocap,另外一個則是編輯程式碼非常強大的軟體 Notepad++ ,所以趕快先下載好這兩個軟體吧。


1.先開啟Photocap,因為我們是要把它當成底線來使用,所以必須讓圖片盡量縮小,選擇影像→版面大小

2.我建議可以使用118*8 pixel

3.把倍率調成500%,等下比較好操作

4.選擇蠟筆這種筆刷

5.在右方可以調整筆刷的一些數值,這是我的建議,可以自己再斟酌調整

6.接下來就是看個人的本領囉,畫完後,選擇檔案→另存影像

7.和浮水印一樣,也記得要選擇32位元格式(含透明資訊)

8.製作完了檔案後,接下來就是要做最後的步驟囉,首先,先把我們Wordpress 主題裡的Style.css 下載下來,並用我們剛剛安裝的Notepad++ 來開啟

9.在這裡有很多種方法都可以使用,我自己選擇的方法如下 (其中,括號裡的就是我們剛剛做好影像的檔案名稱(我有修改過副檔名)

.BLUE_UNDER {
background:url(“image/Blue.gif”) repeat-x scroll 100% 100% transparent;
font-size:24px;
font-family: Helvetica, Arial, sans-serif;


10.把圖檔上傳到你指定的位置,並把修改好的style.css也上傳回主機。

11.最後在你要加入蠟筆底線的文字加上語法,即可完成啦!

<span class=”BLUE_UNDER”></span>

很簡單吧,其實最困難的兩個部分就是在CSS那裏要下對正確的語法,以及真的要有點藝術天分才能製作出來好的蠟筆檔案,只要能克服這兩個難題,其實這個是很簡單的。

相關文章

進來坐坐,說說最近的事情:

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料