Aspirant à la Liberté

Pixnet 的新功能，版主回覆可以加在原本留言處的下方了！

這個功能已經上線好幾天了，要不是在Rolla家發現我還後知後覺，這個功能很重要，過去每次回覆留言必須一直上上下下拉捲軸，拉的我眼花撩亂，訪客在回來看回覆也得上上下下尋找版主回覆的那一段，說實話這樣很麻煩，但這個功能上線之後，算是給大家一個操作上的便利，不過我還有一個建議，建議讓非會員也可以針對每個留言回覆在版主或是別人留言的下方，也就是說把回覆功能進一步開放給所有訪客，這樣相關的留言就會串在一起，閱讀起來就更有系統了！

不過新功能的新格式大家都一樣，我想做一些有個人風味的留言版面，該怎麼做呢？就讓懶骨頭再來班門弄斧一下，跟大家分享更改CSS的方法：

 

【圖一】系統提供的原始格式，有點單調；新的回覆連結在垃圾桶旁邊

在原始提供的格式中，有幾點讓我想要做改變

1. 回覆的邊框與訪客留言擠在一起，閱讀上顯的擁擠。
2. 底色還是原本的底色，分不清哪些是版主回覆的。
3. 文字的粗細、大小、顏色都與訪客留言相同，在整個視野上無法一目瞭然。

不喜歡怎麼辦呢？就改吧！

 

【圖二】懶骨頭更改後的第一版，經過客製化改變後，回覆區塊變的顯眼而清楚！

懶骨頭把字體加粗，底色更換之後，與訪可留言有了區隔，閱讀上可以明顯區分，這樣是不是明顯多了？


 

【圖三】紅圈部份是本次分享的可更改部份


那，要怎麼改呢？請看以下步驟：



【步驟一】叫出網頁程式碼：

在網誌任何地方按下滑鼠右鍵，再出現的選單中選擇 " View Source "，這是為了觀看網頁的 HTML 程式碼，找到格式名稱 (Class name)，才能繼續下一步驟喔！　


 

【步驟二】找到標示版主回覆區塊的格式名稱：

系統會打開一個筆記本程式並把網誌程式碼顯示出來，這時利用筆記本提供的搜尋功能，尋找關鍵字 " Reply "， 如上圖顯示，我們可以發現在程式碼中有一段叫做 ＜div class = " replyBox "＞，這個就是我們要的 class name！


 

【步驟三】進入後台，找到編輯 CSS

CSS 是管理網頁字型、表格等等的檔案，每個網頁都可以設定參考的 CSS 檔案，每一家 BSP 也都有提供讓會員編輯 CSS 的權限，我們手上已經有了 class name ，接下來就是找到註明的地方，加上自己的設定。

 部落格管理 >> 版面管理 >> 編輯CSS


 

【步驟四】尋找對應的 class name 程式碼

接下來再利用瀏覽器（IE, 火狐狸等）提供的搜尋工具，找到 " replyBox " 的位置以進行更改.........

找的到的人直接到下一步驟，找不到的人請繼續看這一段

咦？為什麼我的找不到這個 class 的對應程式碼呢？

這是因為，程式套用相同的模式，雖然針對每個內文表格、段落、邊欄選單、連結等設定固定的名子，但不同設計版面的 CSS 卻不盡相同，因此，才會找不到這一個對應程式碼。那找不到怎麼辦呢？

沒 關 係 ， 我 們 可 以 自 己 加


 
 


【步驟五】改喜歡的樣式

為了方便比較，我把圖片以及程式碼擺在一起對照，讓大家更容易找到對應的地方

Margin 指的是外框與回應區上下左右的間距：
Margin-top, Margin-left, Margin-bottom, Margin-right 分別代表 邊界的 上 左 下 右，可以分別獨立成行，
也可以將四個設定簡化成一行，如：Margin: 10px 10px 15px 32px （代表上 左 下 右）

同樣的，作為外框與框內文字距離設定的 Padding 也同理可證。

顏色的設定，點這裡，可以看到顏色與對應的色碼表，背景顏色設為 BACKGROUND: #124569
文字的顏色則可以設為 FONT-COLOR: #123456 
常用的文字樣式還有 FONT-WEGHT: bold (粗體) 或是 normal (一般) 等等。

以上每一行設定的結尾請加上"；" 作為每一行的結束



另外，除了replyBox 之外，各位還可以在程式碼中發現如下的段落：

<div class="replyContent">每次買紀念品我都挑很久...我是真的想把他們擺出來觀賞的</div>

"replyContent" 的範圍縮小到版主回應的文字內容，算是比較小的範圍，只對回應的內文有作用

<div class="replyInfo">lazyboneuk@27/04/2007 23:33:55</div>

"replyInfo" 的範圍僅止於回應人的名稱及時間

以上兩個算是子集合，" replyBox " 是母集合，顯示網頁時若是在CSS的檔案中找不到 "replyContent" 、 "replyInfo" 的對應程式碼，則系統會套用" replyBox " 的設定；若是連" replyBox " 都沒有，那就會在套用更大的集合 class 的設定（找阿媽的設定，再找不到就再往外找阿祖的設定），簡單來說就是一層包住一層，在 CSS 檔案中找到對應的class name設定就套用，找不到就往外找更大範圍的設定，這樣說明各位可以了解嗎？

相同的道理，網誌中每個細節都可以應用相同的模式去更改，大到Banner，小到連結設定都可以改成有個人風格的樣式，雖然聽起來有點複雜，如果花點時間研究一下，會發現其實一點都不難，還很容易改上癮喔！

如果玩 CSS 玩出興趣了，可以參考這裡，有更多的屬性名稱，不過最重要的一點，更改之前，先把原始的CSS copy 備分，免得到時候改壞了又不知壞在哪裡改不回來，這一點對初次嘗試更改設定的人格外重要喔！

無名、天空部落等等當然也提供更改CSS的權限，不論哪一家都可以嘗試！