Bloggerのラベルを階層化を導入したのに階層化されない時の対応

このブログで一番反応があるBloggerのラベルをカテゴリ別に整理する(ラベルの階層化)で、導入したのに階層化されない場合は、こちらを試して下さい。

階層化が上手くいかない理由は、適用しているテーマでul要素、li要素などのパディングが変更されているからなのですが、適用テーマのその部分を直してしてしまうと他の部分が崩れてしまうので、階層化用のスタイルを導入した上に書き換えてしまう事で対応させます。

テーマの編集画面を開いて、CSSの定義の部分を探します。
以下、このブログのテーマ編集画面をサンプル画像として載せますので参考にして下さい。

スタイルが定義されているところに、以下のスタイルをペタっと貼り付け。

.widget2{line-height:1.4}
.widget2{margin:30px 0;_margin:0 0 10px}
div.widget2 > h2, div.widget2 h2.title {
  margin: 0 0 1em 0;
  font: normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
  color: #000000;
}
 
.section:first-child .widget2:first-child {margin-top: 0;}
.widget2 ul {
  padding: 0 0 0 1.25em;
  margin: 0;
  line-height: 1.2;
}
 
.widget2 li {
  padding: .25em 0;
  margin: 0;
  text-indent: 0;
}

修正前

修正後

次の階層化のソースに、以下のコードをペタっと貼り付け。

$("#Label1").removeClass('widget');
$("#Label1").addClass('widget2');

修正前

修正後