WEBマスター

Awesome Inc.テンプレートでラベル一覧をメニューバーに持ってくるとき

この記事は約2分で読めます。

Bloggerで、Awesome Inc.のテンプレートを使うとき、ラベル一覧をメニューバーの位置にレイアウトすると、「MODx」「WordPress」など、主要なラベルを一覧で並べることが出来ます。
でも、ラベルの一つをクリックして、そのラベルの付いた投稿を表示させると、クリックしたカレントラベルの表示がしょぼくなってしまいます。

ということで、CSSを加工して対応してみました。
ソースを見ると、他のラベルとカレントラベルの差は、カレントラベルにはaがなくてspanがあります。
そこで、Bloggerの管理画面から、「テンプレート」-「カスタマイズ」-「アドバンス」-「CSSを追加」で、ソースを開いてぱちってきたaとa:hoverの設定を、以下のようにspanに適応させるように加えます。

.tabs-inner .widget li span {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #444444;
color: #ffffff;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
background: #63704b url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
}

これで、カレントラベルがメニューバーできれいに表示できました。