在版面格式中放入小圖示

在 Hack Blogger 的過程中，改版型和調整範本的時候發現，原來放圖片貼圖示也是很有技巧的。舉例來說，文章裡面我們想貼圖，大多直接用標準的 HTML 語法，像是這樣的標籤： <img src="網址">，最多加一些參數調整。可是呢，很多的項目在 Blogger 裡面被模組化，定義在特定的 Class 或 ID 裡面，就不能用 <img> 這個標籤了。後來研究偷看到 Blogger 的系統圖示在 CSS 裡的定義方式，喔～原來是這樣，他用背景圖和 no-repeat 參數來貼圖示，而且還可以微調圖片的位置，CSS 還有模組化的好處（而且也沒辦法另存新檔偷你的圖示），實在是學到了啊！利用上述技巧替 Blog 版面格式的一些項目加些圖示吧！（整理如下，每個人的版型不同，以下程式並不一定都適用）

首先，在每篇文章的發表日期前面加上小圖示：

h2.date-header {
  margin: 0;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Date.gif") no-repeat 1px 2px; 
}

Sidebar 上不是會有一些條列式的項目嗎？在這些項目前面加上一個小圖示，條列起來更整齊更一目了然：

.sidebar li {
  margin:0;
  line-height:1.5em;
  background:url("http://abinlee.link.googlepages.com/Icon-Bullet.gif") no-repeat 3px .45em;
  padding:0 0 5px 15px;
}

個人 Profile 的連結一樣可以動手腳，在連結前面加一個圖示：

.profile-link {
  font: normal normal 82% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Profile.gif") no-repeat 0 0;
}

以上整理，如果要放到 CSS 的版面圖示，要用類似上面的方法來做才有彈性。好，那如果文章裡面的貼圖也想搞花樣呢？那還是要搞 <img> 標籤了。我舉自己的例子，像我想在文章的貼圖裡自動加線框，並保留一點點文繞圖的空間，範例如下：

.post-body img {
  padding:4px;
  border:1px solid #333333;
}