Bloggerカスタム

【Vaster2】Bloggerのラベルを見やすくカスタマイズ！

この乱雑に並んだラベルのリストを、

こんな感じに縦に並べて見やすくします。

コピペ一発で出来るラベルの改良

現在、テンプレートは「Vaster2」を使用していますが、リスト型でもラベルがガチャ

ガチャ並んでしまいます。

一行ずつ並んだら見やすいと思いませんか？

ちなみにこの方法はこちらのサイトを参考にさせていただきました。


それにはまず「テーマ」の「html編集」より、ラベルのコード全体を、

以下のように書き換えるだけです。

該当する箇所は編集画面で「Ctrl+Fキー」で検索窓を出し、

.list-label-widget-content ul li a {

で検索してください。



※コピペ用コード※

.list-label-widget-content ul li a {
   font-size: 13px;
       color:$(label.color);
   transition:0.4s;  /* 徐々に変化させる */
padding: 6px 10px;
    border: 1px solid $(label.border);
   background-color:$(label.background);
   width: 100%;
   max-width: 278px;
   display: inline-block;
   float: left;
   clear: both;
   margin-bottom: -1px;
}
.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;
   margin-top: -4px;
   line-height: 1.4em;
}

終わったら「テーマを保存する」を押してからトップに戻ってみると、

ラベルが縦に並んで見やすくなっていると思います。


あまりにラベル数が多くなり過ぎなければ、十分きれいに見えます。


本当は

　　趣味
　　　ゲーム（７）
　　　ダーツ（４）
　　　ビリヤード（４）

のように見出しまで付けたかったのですが、知識＆技術不足のため一端断念しました。

もしそこまで出来るようになったら、この記事に追記するかもしれません。

スポンサーリンク

　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事