圖文並茂板：http://ajuju630.pixnet.net/blog/post/31637244 今天要教大家怎麼把繼續閱讀的文字用圖片替代 此段教學只適用痞客邦喔 因為我不想教無名的 XD 首先 請先進到部落格的後台 1.先按左下角的樣式設計精靈 2.選擇 CSS原始碼編輯 3.按鍵盤的 Ctrl + F 鍵 會出現快速搜尋列 打上 .more a 即可找到 繼續閱讀的語法標籤 .more a { } 4.如果你的CSS 裡面找不到也沒關係！自己加上去就好 自己在CSS的最下面 打上 .more a { } 就可以了 5.編輯用圖片代替文字 .more a{ display: block; text-indent:-100000px;background:url( 圖片網址 ) no-repeat ;width:100px;height:50px;float:right ;margin-right:5%; } 說明： .more a { } 繼續閱讀的標籤 display:block ; 宣告變成區塊～原本只能點文字,加了這個一整塊都可以點的到了 text-indent:-10000px ; 文字縮排,讓原本的繼續閱讀四個字移出畫面外 backgroung:url( 圖片網址 ) no-repeat ; 貼上背景圖片 而且圖片不重複出現 width:80px ; 寬度 數字可依你圖片大小宣告 height:80px ; 高度 數字可依你圖片大小宣告 float:right ; 區塊向右邊對齊 如要向左邊請改成 left margin-right:5% ; 為調整避免圖片太靠邊邊 用這個控制預留量 5% 可自己斟酌 舉一反三 其實痞客邦裡面很多地方的文字區塊都可以用圖片來代替 譬如 部落格名稱 相簿、留言板跟名片等按鈕 甚至側欄的名稱也可以唷^^ CSS很好玩吧 那今天就下課啦^^ 還有其他的教學喔： 『css語法教學』更改痞客邦css樣式的橫幅圖片教學 『css語法教學』痞客邦css 樣式的字體大小顏色厚度教學 圖文並茂板：http://ajuju630.pixnet.net/blog/post/31637244 --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 115.82.75.202