今日は主にCSS

最新のコメント・トラックバックの表示がおかしかったので、CSS改造しました。
途中どうもうまくいかなくてプラグインハックもしてみたけど、工夫すればCSSの定義の追加だけで済みました。

以下に、default_right.css と header.inc に追加した内容を表示しておく。(主に自分用)


default_right.cssの追加部分

/* NP_CommentTree */
/*normalize*/
.sidebardl dd.commenttree
{
background: transparent;
margin: 0;
padding: 0;
}
dd.commenttree a:link, dd.commenttree a:visited
{
background-image: none;
padding: 0;
}
ul.commenttree
{
list-style: none;
font-weight: normal;
}
ul.commenttree li
{
background-image: none;
}
/*normalize end*/
ul.commenttree li.item ul.commenttree li
{
margin: 0;
padding 0 0 0 10px;
}
ul.commenttree li.item
{
background-color: #EEEEEE;
background-image: url(images/arrow.gif);
background-position: 10px 6px;
background-repeat: no-repeat;
padding: 2px 0px 2px 20px;
margin: 1px 0 0 0;
}
ul.commenttree li.item:hover
{
background-color: #E7E7E7;
padding: 2px 0px 2px 20px;
margin: 1px 0 0 0;
}
ul.commenttree li.comment, ul.commenttree li.more
{
background-image: url(images/arrow.gif);
}
ul.commenttree li.trackback
{
background-image: url(images/arrow.gif);
}

(:hoverがIEブラウザだと機能してないみたいでちょっと悲しい)
sidebar.incの追加部分

<!-- latest comments and trackbacks -->
<div class="sidebar">
<dl class="sidebardl">
<dt>新着コメント・トラックバック</dt>
<dd class="commenttree">
<%CommentTree(5,5,both,current)%>
</dd>
</dl>
</div>


プラグインハックも一応メモ。
目的 : 1階層目の<ul class="commenttree">と2階層目の<ul…>のclass名を変えたかった。(元のままだとどちらもclass="commenttree"となって頭が混乱したため)
結果的には、必要なかったんだけど・・。
NP_CommentTreeの27行目付近に// hackで囲まれた部分を追加。

		$this->createOption('e_lists','List (close).','text','</ul>');
// hack
$this->createOption('s_lists2','following List.','text','<ul class="commenttree">');
$this->createOption('e_lists2','following List (close).','text','</ul>');
// hack

130行目付近にある、これ

		echo $this->getOption(s_lists)."n";

と、219行目付近にある、これ

		echo $this->getOption(e_lists);

が1階層目の ul なので、これらの間にある s_lists と e_lists を s_lists2 と e_lists2 に変えればいいみたい。
具体的には、142行目付近に

			echo $this->getOption(s_lists)."n";

と214行目付近の

			echo $this->getOption(e_lists)."n";

に、2を追加!

置換するのは一瞬だけど、説明するのは時間かかるな・・・w

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です