很多時候我們寫文章時可以利用不同的CSS格式，幫自己的文章作點不同變化，常見的就是引用(blockquote)及程式碼區的(Code)設計，另外很多人也有使用在文章下方加註重點畫記，今天綸太郎則是要分享自己用筆記本或是大型圖示，標記文章重點的方式，當然粗體及下橫線及顏色標記也是最基本的一種。
這個方式很簡單，你也可以試著自己做看看，利用不同的背景圖來當作重點標記的變化。
應該有些人在上篇文章就有看到這個效果了，原理也和以前談過的一樣，先下一個css定義，然後將要使用的文字用div或是span將他圈起來即可。
div和span的不同在哪裡?
div是針對整個區塊的設定，而span則是針對一段文字的設定，兩者是不同的，大家可以試看看，就知道效果是怎樣。
首先當然要先給的定義名稱，例如.post-note，我們把它放到後台版面配置的修改Html裡，放在 ]]></b:skin>之前適當的位置即可。
.post-note {
width: 500px; /*重點筆記的寬度*/
border-right:1px solid #D1D3FF;
margin-left: 30px; /*文字距離左邊的寬度*/
padding: 5px 0px 5px 30px;
background: url(背景圖網址) repeat-y;
}這裡的圖案我是用長條圖，如下
所以repeat-y要垂直重複，你的文章有多長，背景就會帶到多長，如果想要用固定的長度，加上height: 300px；長度可自定，及overflow: auto;的敘述即可。
然後在編輯文章時，將要顯示在重點筆記區的文字，使用修改Html模式，然後在內容前後用div或是span圍起來即可，如下顯示
<div class="post-note">
重點筆記內容....
</div>這樣顯示的樣子，就如下面這樣子，我要推薦去年的精選文章，
2009年推薦文章精選：
‧喚回童心的日本超可愛卡通桌布
‧新增Plurk、Twitter及Facebook推文按鈕
‧一分鐘讓你的部落格也有數字分頁效果
‧加強blogger作者留言和一般留言的區分
‧在部落格名稱下方放個水平連結導覽列
‧兩欄式簡潔的模板Flashyweb ---改版分享
‧Blogger Templates│2009年最新模板資源
‧如何利用捲軸讓邊欄（Sidebar）元件縮短
‧將繼續閱讀(Readmore)更改位置或外觀
‧設定留言回應編號，讓部落格互動更活潑
‧喚回童心的日本超可愛卡通桌布
‧新增Plurk、Twitter及Facebook推文按鈕
‧一分鐘讓你的部落格也有數字分頁效果
‧加強blogger作者留言和一般留言的區分
‧在部落格名稱下方放個水平連結導覽列
‧兩欄式簡潔的模板Flashyweb ---改版分享
‧Blogger Templates│2009年最新模板資源
‧如何利用捲軸讓邊欄（Sidebar）元件縮短
‧將繼續閱讀(Readmore)更改位置或外觀
‧設定留言回應編號，讓部落格互動更活潑
另外一種如果你是要使用一大片的圖案當做重點筆記的背景圖，那相對的寬度及長度就要設定出來，還有捲軸也要設定，所以再來一個新的定義
.post-note2 {
display : block;
padding-top: 50px;
padding-left: 70px;
width: 500px; /*重點筆記的寬度*/
height: 351px; /*重點筆記的高度*/
background: url(http://sites.google.com/site/lunfiles/box/flower.jpg) no-repeat;
overflow: auto:
}這裡不同的是，要用display:block;的敘述，這樣才能夠設定padding與左右上下的距離。
要顯示的文字內容，一樣
<div class="post-note2">
重點筆記內容....
</div>顯示如下，
秋吱吱的Facebook粉絲專頁
剛踏入Google Blogger部落格的朋友否有很多的不確定，
來到這裡可以提供你最新關於Google Blogger的訊息
加入這個園地讓你對blogger的操作更快進入狀況
提供修改模版(Blogger templates)教學與小技巧
也歡迎大家分享討論關於blogger的一切
其他的文章區的變化，可以參考以下的文章，
[筆記]在文章裡顯示優質的程式碼區
就是要不一樣! 幫文字段落加上獨樹一格的底線 underline
都是類似的作法，大家可以參考看看。
加入書籤 :
0 意見:
張貼留言