[分享] 自訂各篇文章獨立背景 - 部落格

首先要先感謝 huanson 大大給我關鍵性的觀念指導才得以讓我在此分享這篇心得。

<0>
---

先貼上完成後網站給各位參考：
http://virsitilityj.blogspot.com/

這篇文章要討論的是如何自訂自已喜歡的圖片在各篇獨立的文章，
我本來的想法是要給各篇文章評分，
讓我/來參觀的人可以篩選出一些比較有可看性的文章。

以下是基本做法教學：
登入後，在自已的首頁右上角按"自訂"->"修改HTML"，
在畫面中間有個 "口展開小裝置範本" 打勾，

搜尋 "/* Posts" 這段文字，
用以找出負責處理文章的程式碼，把下面的程式加進去，以後比較好整理。
這是我用的範本的情況，如果其他的範本寫法和我的不一樣，
請各位自已要記住把程式碼加到哪裡去了，以後要修改才不會搞半天。

找到之後就要來新增自訂的背景了。

--以下為程式碼--
.star1-body {
background:url("圖片網址") no-repeat 400px .5em;
}

--以上為程式碼--

.star1-body - "." 在 html 語法裡面是新增一個 class 的意思，後面就是你要創建的
class 的名稱，可以自已訂。

background:url("圖片網址") - 填入自已的圖片網址。

no-repeat - 設定圖片不重複貼在背景上。

400px - 因為我的 blog 寬度是 1000px，所以我把自訂的背景圖貼在左邊文章列的
400px 處，這邊多試幾次就可得到最佳位置。

.5em - ...這邊我是照程式碼內建的抄下來的，所以不太清楚，只知道砍掉圖片就顯示不
出來了，麻煩知道的大大指點了。

最後要記得加上 ";"。

如果你有三張圖，就得加入三組上面的程式，所以加完就會有
star1-body, star2-body, star3-body 三組 class(以我的三組名稱為例)，
接著，在編輯新文章時，切換到 "修改html" 模式，
在本文的最前面和最後面用 div 包住，
例：

未更改的本文:
今天天氣好
好得不得了
可以去郊遊

加入背景圖的程式碼:
<div class='star1-body'>
今天天氣好
好得不得了
可以去郊遊
</div>

完成貌:
http://virsitilityj.blogspot.com/

---
其實這不只可以用來做文章評等，還能改成這篇文章的心情(喜怒哀樂的圖)，
圖示化標籤(Label)...等，
相信這只是基礎的土法練鋼技，還有大大有更簡便的方法，
只是提供個簡單的修改讓不會程式的大家能美化自已的部落格，
如果有什麼問題也可以提出來一起討論。
謝謝(鞠躬~

--
***大金剛***
三支女大十一金三支女大十一金三支女大十一金三支女大十一金三支女大十一金

金一十大女支三金一十大女支三金一十大女支三金一十大女支三金一十大女支三

三支女大十一金三支女大十一金三支女大十一金三支女大十一金三支女大十一金

--