圖文並茂板：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
--
今天要教大家怎麼把繼續閱讀的文字用圖片替代
此段教學只適用痞客邦喔
因為我不想教無名的 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
--
All Comments