味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法

おすすめ記事ピックアップ

Bloggerのラベル（Label）を四角いラベルに、CSSでカスタマイズする方法を紹介します。ブロガーのラベルは、リストっぽくてイマイチだと思っていましたら試してみてください。

下記で紹介するCSSコードをHTMLテンプレートに張り付ければOKです！と言いたいところですが、在来のCSS等のデザインありますとうまく行かないかもしれません。参考として利用ください。

こんな風に分かりやすくなります。

サイドバーのラベルを想定して記事を作成しています。例えばフッターやヘッダーで使いたい場合は、合わせてCSSを調整してください。

Labelの設定がクラウドだと、このように表示されません。後の設定は自由です。

Bloggerのラベルを四角いラベルにするCSSコード

.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}

.sidebar .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;
background-color: #FFFFFF;
position: relative;
}

.Label li {
padding: 5px 5px;
float: left;
margin: 0px 3px 3px 0px;
background-color: #0077B9;
color: #B8B8B8;
font: 12px'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

.Label li a {
color:#FFFFFF;
text-decoration:none;
}

.Label li:hover {
background-color:#2E2E2E;
}

簡単にCSSを説明します。色やマージンは好みで設定ください。

サイドバーのulのラベルに付く「・」をlist-style: noneで消します。 listは余白が設定されていますので マージンやスペースもゼロにします。

.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}

次にsidebar（ブログの右側部分）のwidgetを線で囲む設定と、隙間を調整します。ウィジェットを線で囲み見たくなければ、ボーダーの設定を消してください。

.sidebar .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;
background-color: #FFFFFF;
position: relative;
}

ラベルの設定がこの部分です。パディングでラベルの大きさを調整できます。フォントサイトはfontで調整してください。フォントの指定は下記のように設定できます。不要であれば削除。floatを消せば横まで伸びます。

.Label li {
padding: 5px 5px;
float: left;
margin: 0px 3px 3px 0px;
background-color: #0077B9;
color: #B8B8B8;
font: 12px'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

リンクのカラー等をここで設定しています。下線を付けたい場合はtext-decorationを削除してください。

.Label li a {
color:#FFFFFF;
text-decoration:none;
}

.Label li:hover {
background-color:#2E2E2E;
}

HTMLの編集で、任意のCSSコード部分に張り付ければ完成です。

補足としてテキスト部分にしか、リンクの判定がありません。例えば投稿数やラベルの端は、クリックしてもリンク先へ飛びません。ラベルをテキストサイズに合わせたり、テキストを大きくすれば、違和感が無くなります。