再玩GHOST:大叔系女子也融化的內文蠟筆效果

1)蠟筆圖像 2)背景Code Injection設定3) 蠟筆code應用與呈現

很快來到GHOST架站的最後一篇...

咦,有這麼快嗎!

依我的功力(其實是我媽的出的力)技術研究先介紹到這邊,有新研究心得再來發文啊。

之前講GHOST的文章可以參考初步設定部落格加入GA分析、Facebook 留言和通知瀏覽器自訂個性icon都可以先玩。

本篇蠟筆效果會講到以下:

  1. 蠟筆圖像挑選與使用免費圖庫
  2. 背景Code Injection設定
  3. 發表文章蠟筆code應用與呈現

alt

找到蠟筆圖之後,先儲存到線上圖庫,可以得到每個圖片一個網址,進背景Code Injection 在 Blog Header下Code。
alt

在Blog Header尾端加入下好的圖庫網址和定義,例如選好藍色底線、下好藍色檔名:

<style type='text/css'>


blue1{


background: url(……) repeat-x bottom;


line-height: 22px;


}

下好Header就可以來文章內文使用了,<blue1>蠟筆效果</blue1>就可以顯示為蠟筆效果,後台顯示:

alt

前台就有美美的效果了!

alt

GHOST下次見!