修改部落格標題 - 將文字替換成圖片

2009050711:53

 

前一篇 Ajax 的文章好像寫的太難又太長了,小正正可不想部落格才剛開張就一堆人昏倒睡死在鍵盤上... 。既然這樣小正正就來教你如何惡搞部落格吧!哦... 不是,是教你如何將部落格改的美美的~

將文字替換成圖片?!有沒有搞錯,這個還需要講嗎?連幼稚園小朋友都會,只要將文字刪掉,插入一張圖片就好啦!挖哩咧@#$%...... 如果真的是這麼簡單的話當然就不用講啦!小正正在這裡要說的是:完全不變動HTML的情況下,利用CSS將文字替換成為圖片。

為什麼要這樣做呢?

用CSS將文字替換成為圖片感覺像是多此一舉,那可不!

例如你可能想要在部落格標題那邊插入一張圖片,但是部落格標題是不可以輸入HTML語法的,當然也就不能輸入 < img> 來插入圖片,只能有文字而已。但利用自訂CSS的功能,可以將醜醜的文字替換成為美美的圖片,就像小正正教室部落格左上角那個可愛的大頭一樣。如何?是不是很想知道怎麼做啊?稍後就會教你。

除此之外,這類用CSS替換上去的圖片是屬於CSS的功能,如果瀏覽器不支援CSS,或者將CSS關閉時,仍舊可以看到正常的文字。這對於無障礙網頁來說是非常重要的!因為螢幕閱讀軟體無法將圖片的意思 "念" 出來,但卻可以將網頁中的文字正確念出。因此這些用CSS替換上去的圖並不會影響到正常網頁的瀏覽,也能符合無障礙網頁的需求。

再繼續想想,如果文章中東插一張圖、西插一張圖,隨便亂插都是圖,而且這些圖可能只是用來美化網頁用的小圖示或照片,並不具有任何意義(例如在討論貓咪的網站放了一張 Keroro 的圖片,只是因為站長很喜歡 Keroro)。這些修飾性的圖的確會讓網站看起來比較漂亮,但東一個 < img> 西一個 < img> 插入在文章中,很可能會破壞掉 HTML 檔案的結構性,沒錯!就是結構性!修飾性的圖片有或沒有都沒關係,只是稍微醜了一點,但破壞了檔案的結構性,整份檔案可能就不成 "人" 形了。尤其是對於 Web 2.0 來說,具有語意和結構的標籤檔案(LSM)是十分重要的,以後有機會在慢慢來聊這個。

基於以上這三個理由,利用CSS將文字替換為修飾性的圖片,而不要直接插入 < img> ,這是有必要的!

動動手來修改部落格標題

1. 首先你想要替換掉的文字必須用某個 HTML 標籤括起來,例如 < div>、< span>、< a>、< h1> 都可以。例如部落格標題的那段 HTML 原始碼為:

< a href="http://tw.myblog.yahoo.com/class2u-com/">< h1>小正正教室< /h1>< /a> 

2. 找出能夠代表這段文字的CSS選擇器(selector),以部落格標題為例就是 #yblogtitle h1

3. 對這段文字加入背景圖的CSS樣式定義,並且指定寬度和高度,至少要跟背景圖一樣大,不然背景圖可能無法完全顯示出來,會被切掉。若所在的標籤不是區塊元素(例如 div),最好再加上 display:block 和 float:left 樣式,所指定的高度才會有效果。

#yblogtitle h1 {
    display:block;
    float:left;
    background:url(
http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;
    width:136px;
    height:126px;
}

這時圖片就會出現了!但原本的文字還在,和圖片重疊在一起有點奇怪,讓我們繼續把文字消失。

4. 針對剛剛的部落格標題再加上這些樣式,文字就會不見了!因為我們將它變成 0 的大小,又將它縮排 -5000px 排到很遠很遠的地方去。再加上 overflow:hidden,超出區塊範圍以外的東西就看不見了:

font-size:0;
line-height:0;
text-indent:-5000px;
overflow:hidden;

5. 效果還不錯吧?如果原本的文字是超連結,你可能會希望圖片也能夠超連結,滑鼠滑過去會變為手指。那麼就再加上:

cursor:pointer;
cursor:hand;

將文字替換成為圖片,完整的CSS語法為:

#yblogtitle h1 {
    display:block;
    float:left;
    background:url(
http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;
    width:136px;
    height:126px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
}

將這段語法貼在 Yahoo! 部落格的自訂CSS的地方,將圖片檔案路徑更換為你自己的圖片,就可以將部落格標題換成美美的圖片囉!相同的技巧,也可以用在其他很多地方哦~