壹壹零朵花開了

彩繪部落格 - 文字圖飾底圖分享

08.17.2009 · Channy發表於 Coool 玩意兒, 私房盒   點閱:2,102 次

lineq

一起來美化部落格吧!文字圖示進階版

說明:此篇較適合已使用過文字圖飾的人做進階的設定,若你是還沒使用過文字圖飾效果的朋友,請在閱讀完本篇文章後先行參考花水木SOHO玩樂誌這篇馬丁的映像攝區這篇來安裝效果。

文字圖飾不僅是自己看了開心、訪客也看的有趣。可以讓文章變的又生動又可愛,身為女生的我,理所當然成為了文字圖飾的愛用者,愛不釋手,嘻嘻!

今天在網路上逛呀逛,看到許多可愛的緞帶、膠帶、貼紙等商品,突然想到若這能放在文章裡應該也不錯,所以就設計了以下這款裝飾文字的文字圖飾,並有多種顏色:

01. 嬰兒粉
02. 天空藍
03. 柳橙橘
04. 水泥灰
05.青草綠
06.鵝黃色

(我終於體會到為手機顏色命名的樂趣了XD)

*使用效果就像這樣

可不可以不要做專題

媽媽說她要學著用電腦,才能跟我們聊天兒

今天遇到一位老朋友

哎呀呀,薪水怎麼都還不下來,我不想再吃泡麵啦~

*或是你想要有質感的感覺,可以拿來為文章內的「標題」使用,例如...

寫日記的時候: 2009.08.16 天氣:晴

有話想說的時候:  Channy Says

或是加點小符號: ✿ 壹壹零朵花開了 ✿

*也可以當分隔線

多功能隨意搭配~

自行發揮創意,喜歡的話請自取,並留個言兒唷!

01. 嬰兒粉 帶我回家
02. 天空藍 帶我回家
03. 柳橙橘 帶我回家
04. 水泥灰 帶我回家
05.青草綠 帶我回家
06.鵝黃色 帶我回家

關於style.css檔的修改,以嬰兒粉為例:

.post .pinkQ{
text-decoration: none;
background: url(你的路徑/underline_pinkQ.gif) repeat-x 120% 100%;
padding-bottom: 1px;
padding-top: 3px;

}

(畫線的地方要特別注意唷,若位置無法準確呈現再進行微調)

覺得不錯的話,按個推薦吧:)

Related Posts with Thumbnails

  分享此篇文章至我的Facebook   【訂閱】壹壹零朵花開了






  1. 這個效果簡單又漂亮! 真不錯!~ :)
    阿~原來是學妹(不過我不是資管系),好懷念斗六~ XD

    Channy Reply:
    原來有雲科人耶,開心開心!!
    可以找個假日回來斗六玩呀~反正這裡是名符其實的適合觀光嘛^^
    最近古坑有國際咖啡節的活動唷!!

  2. @mrmu
    其實之前每年都有回去,因為真的很懷念在那邊的生活。
    不過每次回去都覺得景物依舊,人事全非~ (面目也全非了XD)
    每次回去就逛逛設計學院、吃吃大頭、然後去街上晃晃~

    Channy Reply:
    嗯嗯,有些店面也換得很快阿~冏~
    還好始終有一些萬年不倒的店,讓校友能回憶回憶XD
    唉~什麼時候我也大四了.....

  3. 不好意思~語法上的那個"你的路徑"事什麼意思呢?

    Channy Reply:
    你好,意思就是看你把圖片放在主機下的哪個位置(簡單來說就是圖片的網址啦^^!!)

  4. 卸卸你的分享.帶走了^^

    Channy Reply:
    不客氣^O^ 有空常來走走唷!

  5. 一直無法成功!我使用的主題是g-white-2的
    也參考了花水木和馬丁的教學,一步一步修改
    就是無法顯示出來。

    關於style.css的修改,是把圖檔放於該主題的photos資料中
    所以
    .post .pinkQ{
    text-decoration:none;
    background:url(photos/underline_pinkQ.gif) repeat -x 120% 100%;
    padding-bottom:1px;
    padding-top:3px;
    }
    應該沒錯吧!

    至於
    .post.pinkQ 或是 .postarea.pinkQ 或是 .entry-content.pinkQ
    到底哪個才行?或是都可以?謝謝

    Channy Reply:
    哈囉! 你說的問題我也遇到過
    後來找出的原因,是因為每個佈景主題的css寫法可能會不太一樣
    要看該佈景對於"文章內容區塊"的標籤是定義為什麼
    你可以試看看在css中蒐尋一下#content
    看它後面接的標籤是什麼?
    例如我的佈景蒐尋到的是#content .post
    因此我是使用.post.pinkQ

  6. 上面補充說明,我是使用WordPress Mu 架設的

  7. 嗨您好:

    剛弄了一份教學,裡頭有介紹使用您這的圖檔和語法..所以,進來跟您說聲:「謝謝」。謝謝您整理的圖檔和語法。

    希望藉此,幫助更多有此需求的朋友們順利的套用這效果。

    Channy Reply:
    收到了,謝謝你的告知與分享^^

留下迴響

评论链接可以 移除 nofollow.