PR(記事内にアフィリエイト広告が含まれています)
スポンサーリンク
Nucleus

NP_ContentsList

当サイトやスト3サイトのサイドバーのカテゴリー表示はNP_ContentsListを以前から使わせていただいています。これが便利なところは、カテゴリー名が日本語であっても表示順を調整したり、表示したくないカテゴリーを設定したりできる点ですね。
IEでのみカテゴリリストの上部に変な余白が出来てるけど、とりあえず動いたからまぁいいやと放置してたんですが、遂にガマンできなくなってきたので修正してみました。


IEだとカテゴリーのところの上のほうだけ変な余白が出てて、これがどうにか直らないかとCSSだけ修正しててお手上げだったんですが、HMTLソースを確認したら一目瞭然でした。余分なULタグとLIタグが生成されてたからです。FireFoxで出ない不具合をWeb Developerに頼って探そうとしてたのは、今思えば余りにも滑稽すぎました。
その余分なタグがどうして発生していたかと言うと、プラグイン編集画面で中途半端な書き換えをしていたからでした。このプラグインではカテゴリーリストの上にブログ名も表示できるのですが、当サイトでは不要だったのでブログ名表示部分を削除してたのですがULとかLIは削除してなくて、それらが余分に表示されていてIEでのみ余白が出来ていた、といった具合です。
当サイトでの現時点でのプラグイン設定・CSSを書き記しておきます。
ブログリスト
・ブログリスト本体

<%categorylist%>

・のこりの項目は全て空白(これをしてなかったので、余分なULやLIが表示されていた)
カテゴリーリスト
・カテゴリーリストヘッダー

<ul class="contentlist">

・カテゴリーリスト本体

<li<%catflag%>><a href="<%catlink%>"><%catname%></a>(<%amount%>)<%subcategorylist%></li>

・カテゴリーリストフッター

</ul>

※スト3サイトでは最後の行に「キャラ別各種カラー一覧」を必ず表示させているので下記のようにしています。

<li><a href="index.php?itemid=616">キャラ別各種カラー一覧</a></li></ul>

・カレントカテゴリーのフラグ

 class="contentflag"

サブカテゴリーリスト
・サブカテゴリーリストヘッダー

<ul class="contentlist2">

・サブカテゴリーリスト本体

<li<%subflag%>><a href="<%sublink%>"><%subname%></a>(<%subamount%>)</li>

・サブカテゴリーリストフッター

</ul>

・カレントサブカテゴリーのフラグ

 class="contentflag"

該当するCSS

.contentlist {
list-style-type:circle;
padding:0px;
MARGIN: 0px 0px 0px 20px;
LINE-HEIGHT: 150%;
}
.contentlist2 {
list-style-type:circle;
padding:0px;
MARGIN: 5px 0px 10px 20px;
LINE-HEIGHT: 150%;
}
.contentflag {
list-style-type:square;
font-weight:bold;
MARGIN: 2px 0px 2px 0px;
}

参考になれば幸いです。

コメント

タイトルとURLをコピーしました