Blogger Labo：【Vaster2】ラベルウィジェット（カテゴリ）のカスタマイズ

このページでは、Vaster2のラベルウィジェットのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


ラベルウィジェットのカスタマイズ


ラベルウィジェット

ラベルウィジェットのCSS


 ラベルボタンの設定 

.list-label-widget-content ul li a {
   font-size: 13px;　文字サイズ（13px）
   color:$(label.color);　文字色（テーマデザイナー設定）
   transition:0.4s;  時間的変化（0.4s）
   padding: 6px 10px;　上下・左右の余白（ラベルボタンの幅）
   border: 1px solid $(label.border);　ラベルの枠線
   border-radius: 2px;　ラベルの丸み
   background-color:$(label.background);　背景色（テーマデザイナー設定）
}

 カーソル通過時のラベルボタンの設定 

.list-label-widget-content ul li a:hover{
   color:$(label.color.hover);　文字色（テーマデザイナー設定）
   background-color:$(label.background.hover);　背景色（テーマデザイナー設定）
   text-decoration:none;　文字の装飾（なし）
}

 ラベルウィジェットの箇条書きリストの設定 

.list-label-widget-content ul{
   list-style-type: none;
   padding:0;
   line-height:initial;
}

 ラベルウィジェットのリスト内の設定 

.list-label-widget-content ul li{
   margin: 5px 2px;　上下・左右の余白（ラベルボタンの間隔）
   display:inline-block;
}

※（）内は初期値

上記が Vaster2のラベルウィジェットのCSSに説明を加えたもの。

「/*   ラベル」で検索して中身を書き変えていけば、好みに合わせて変更できる。

横一列に並べて表示する


横一列に並べて表示する方法は、既に詳しく説明しているサイトがある。

下記リンクのサイトが分かりやすいと思うので、そちらで参照してほしい。

・KaKuKaKu

ラベルの色を互い違いにする


ラベルの色を互い違いにするには、まず「/*   ラベル」で検索してCSSの下辺りに以下のCSSを貼り付ける。

そして、以下のCSSの「任意の色」を自分の指定したい色に書き換えればよい。

/*　偶数番のラベルボタンの設定　*/

 .list-label-widget-content ul li:nth-child(even) a {
background-color:任意の色;　/* 背景色 */
}

 /*　カーソル通過時の偶数番のラベルボタンの設定　*/

 .list-label-widget-content ul li:nth-child(even) a:hover {
background-color:任意の色;　/* 背景色 */
}

備考：カラーコード

別の方法でカテゴリーリストをつくる


リンクリストウィジェットを使う


Bloggerのリンクリストウィジェットを使えば、箇条書きリストでカテゴリーリストを作ることができる。

ただし、個別にリンクを設定していかなければならないので作業が面倒。

HTML/JavaScriptウィジェットを使う


BloggerのHTML/JavaScriptウィジェットを使えば、CSSに影響されない自由なカテゴリーリストを作ることができる。

デザインは適当な記事内で作ったHTMLを貼り付ければよい。

ただし、こちらも個別にリンクを設定していかなければならないので作業が面倒。