[CSS] 美化 Blogger 官方標籤雲

最近朋友買了一個漂亮的 Blogger 範本，除了配色一定比官方範本好看之外，也會有一些 jQuery 特效。不過非官方範本想要自己修改版面，就不是那麼容易了，同時也會有一些相容性問題，例如本文的主題 "標籤雲"，不巧執行就遇上版面破裂的情形。

Blogger 官方的標籤雲功能其實已經做的不錯，有多種選項可以自訂，就只差在版面沒那麼美觀。如果自己改造一下 CSS，那麼就能做出不錯的效果。以下分享這次調整標籤雲的筆記，想先看效果可點這個網頁：

點此看範例網頁

一、官方標籤小工具

不使用官方標籤小工具的話，網路上有不少標籤雲的外掛。如果不在意網頁多執行額外的 js，那麼可使用炫目的 3D 標籤雲效果，標籤會在一棵類似地球儀的圓球上不斷旋轉。安裝教學可參考這篇「HTML5 標籤雲 - TAGCLOUD」

使用官方工具自然是單調了一些，不過至少不影響網頁效能，適合簡潔的版面使用。安裝步驟為：

後台 → 版面配置 → 新增小工具 → 選擇「標籤」工具



如上圖紅框，選擇「標籤雲」即可。其他的各種選項，請依照自己的需求調整。




官方預設的效果不怎麼樣，可以用 "簡陋" 來形容，大概就像上圖這樣。




經過修改後，上圖是不是整齊、美觀、色彩有層次多了呢？

二、修改 CSS 樣式

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：


<style>
/* 標籤雲 start*/
.label-size a {
background: #000; /* 底色 */
padding: 8px; /* 內櫬距離 */
display: inline-block;
margin: 0 2px 6px 0;
color: #fff; /* 文字顏色 */
text-decoration: none;
transition: background 0.5s; /* 動畫效果及時間 */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
}
.label-size a:hover {
background: #aaa; /* 滑鼠經過的顏色 */
}
.label-size span { /* 標籤頁面的 CSS */
display: inline-block;
background: #aaa; /* 底色 */
color: #fff;
padding: 8px;
}
/* 標籤雲 end*/
</style>


CSS 的修改說明請參照綠字即可。很不錯的是，官方預設 CSS 就已經針對使用頻率較低的標籤，讓其顏色變淡。我們用了深色當底色後，變淡的程度就能很明顯看得出來。

以上的修改包含了簡單的動畫效果，滑鼠經過按鈕時，顏色的變換會有過場的效果。

其中 /* 標籤頁面的 CSS */ 這一段，代表按下某個標籤、進入該標籤的頁面後，這個標籤會使用不同的 CSS 及顏色來區別。

如果字面說明不瞭解，可前往範例網頁，按下側邊欄標籤雲的其中一個標籤，便可看到效果了：

點此看範例網頁

更多 Blogger 官方工具修改技巧：