幾種用圖片代替文字的方法

設計部落格不像設計網站一般容易,我認為主要原因是部落格不會開放 source code (例如 HTML) 給使用者修改,所以要設計部落格,只能從官方發佈的模板下手,然後去更改 CSS。

通常設計部落格的第一步,一定都會想把自己的部落格標題用圖片裝飾的漂漂亮亮,而不是用部落格預設的制式文字。但如同前面所提到,一般要用圖片就是在 HTML 裡寫下插入圖片的語法,可是部落格不開放修改 HTML ,我們所能使用的方法是,隱藏這些制式文字,用自己做的圖片取代。那麼,要怎麼寫呢?我這邊整理了幾個例子跟寫法,提供給大家做參考。不過因為我沒針對任何 BSP 的 code 做研究,所以關於 css 對應的類別(id、class),請依照自己的部落格狀況做修改,謝謝。

把部落格標題改成圖片

假設現在的情況如下圖所示(左邊是文字,右邊是圖片):

我們無法修改的 HTML 語法如下:
<h1 class="title"><a href="http://blog.mukispace.com">MUKI space*</a></h1>

首先,先做好一張你要置換的圖片,請記好圖片的長、寬。在此假設圖片長 427px,寬 72px。
請寫入以下 css 語法:

h1.title a {
  background: url(images/title.jpg); /*請修改成你要替換的圖片*/
  display: block;
  font-size: 0;
  height: 72px;  /*該圖片的高度*/
  width: 427px; /*該圖片的寬度*/
  text-indent: -5000px;
}

接著存檔,就可以發現文字已經替換成圖片囉 :)

用兩張圖片做連結替換效果

第 1 點提到的方法,只是將文字換成圖片,但滑鼠移過他不會有任何的改變。如果我們希望滑鼠移過 A 圖片,會換成 B 圖片,可以參考以下語法(我們需要的素材有:兩張大小尺寸一樣的圖片,假設這兩張檔名為 a.jpg 以及 b.gif):

h1.title a {
  background: url(images/a.jpg); /*預設圖片*/
  display: block;
  font-size: 0;
  height: 72px;  /*該圖片的高度*/
  width: 427px; /*該圖片的寬度*/
  text-indent: -5000px;
}

h1.title a:hover {
  background: url(images/b.gif); /*滑鼠移過後會出現的圖片,兩張圖片的檔案類型(副檔名)可以不同*/
}

除了可以分成兩張圖片做替換之外,我們也可以將兩張圖片做成同一張。做成同一張的好處是,可以節省讀取你網站的時間,因為對瀏覽者而言,他只要「讀取一張圖片」,而非兩張。

這是把兩張圖片作成一張的樣子: 單張圖片尺寸是 長 300px,高 150px;兩張合起來就是 300×300(px)

要特別注意的是: 兩個單張圖片的尺寸要一樣,不能一張高 100px,另外一張高 200px 唷! 以下是語法:

h1.title a {
background: url(instead2.jpg); /*預設圖片*/
display: block;
font-size: 0;
height: 150px;  /*該圖片的高度*/
width: 300px; /*該圖片的寬度*/
text-indent: -5000px;
}
 
h1.title a:hover {
background: url(instead2.jpg) 0 150px; 
/*第一個0是X軸,第二個150px是Y軸*/
}

用圖片取代項目符號

部落格側邊欄,常常會需要作一些條列式的項目,像是「最新文章」。如果想要在這些文章前面加上可愛的圖案,應該怎麼設定呢?
在此假設 HTML 是這樣寫的:

<ul class="article">
   <li><a href="#">標題A</a></li>
   <li><a href="#">標題B</a></li>
   <li><a href="#">標題123456789</a></li>
</ul>
ul.article {list-style-type: none;}  /*先把原本的項目符號給隱藏*/
.article li {background: url(instead2.jpg) no-repeat;}
.article li a {padding-left: 5px;}  /*這邊的5px,建議可以設定為你的圖片寬度再多加5px*/

讓側邊攔的標題有美美的背景圖

側邊欄標題如果要有背景圖,寫法其實很簡單,假設 html 這樣寫:

<div class="sidebar">
   <h3>我是標題</h3>
</div>

css請這樣寫:.sidebar h3 {background:url(images/bg.jpg);}

以上是幾個簡單的圖片變換技巧,幾乎都是用 background 作設定,簡單好上手,提供給大家做參考 :)

You may also like...

6 Responses

  1. 沐詩,詩霖霖 說道:

    請問,如果要像你文章裡有上一篇下一篇這樣,是有哪個語法呢?

  2. 沐詩,詩霖霖 說道:

    但是我使用的是yam 天空 要自己+語法呢

    • muki 說道:

      抱歉,yam天空的使用方法我並不清楚唷。可能要請你去詢問其他有使用該部落格的朋友。

  3. Vic 說道:

    #replace
    {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }
    給您參考
    http://www.sitepoint.com/new-css-image-replacement-technique/

  4. 写得极度独到,把核心的头脑都抒发了进去!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>