[痞客] 把繼續閱讀改成美美的圖片DIY教學

看板Blog (部落格)作者ajuju630 (阿啾啾)時間15年前 (2010/07/23 15:24)推噓2(2推 0噓 0→)

留言2則, 2人參與討論串1/1

圖文並茂板：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