把繼續閱讀改成美美的圖片DIY教學 - 部落格

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

--