NP_chat｜背景色を交互に変化させる

僕が初めて作った人様のサイト「animation soup」では、ミニ掲示板に「NP_Chat」を使用させていただいています。この頃は今以上にphpを知らなかったのですが、知らないものの強さといいますか、その割にはガンガンにソースをいじくっていました。おかげでプチプラグインもつくれるようになったのですが、このプラグインの改造がそのきっかけになったので、記念にメモしておきます。

とはいっても、実際に作業したのは1年ほど前なので、詳細は覚えていないのですが、まずはXHTMLに準拠させる形に出力されるソースを改変していったと思います。で、それをCSSでデザインしていったのですが、書き込みと書き込みの間に罫線を引いただけではちょっとわかりづらいということで、背景色を変更することに挑戦しました。

前述のとおり、吐き出すXHTMLソースを書き換えているので、そこら辺は読み替えてください。

交互に背景色を変更するということは、その書き込みが奇数か偶数で判断できるということなので、ソースを覗いてみると219行目あたりから実際に出力されるXHTMLソースを生成していることがわかります。235行目あたりに

/* no EMAIL or http, so just show userNAME in bold */

このようなコメントがありますので、それ以前に書き込みの奇数偶数を判別するifを記述しました。

if($msg['UID'] % 2 == 1) { // 2で割り切れない。つまり奇数
	echo "\n<div class=\"chatIdOdd\">\n<p class=\"chatAuthor\">".$msg['NAME']."</p>\n<p class=\"chatTime\">[".$msg['DATE']."]</p>\n<p class=\"chatText\">".$msg['MESSAGE']."</p>\n</div>\n";
	} else {
echo "\n<div class=\"chatIdEven\">\n<p class=\"chatAuthor\">".$msg['NAME']."</p>\n<p class=\"chatTime\">[".$msg['DATE']."]</p>\n<p class=\"chatText\">".$msg['MESSAGE']."</p>\n</div>\n";
}

こんなかんじです。「$msg['UID']」というのはその書き込みのIDです。そのIDを割ったときの余りが1の場合*1、classを「chatIdOdd」にして、そうでない場合はclassを「chatIdEven」にしています。で、CSSで、

.chatIdOdd {/*ログIDが奇数の場合*/
	padding:0 5px 0.5em 5px;
	background-color:#ffffff;
}

.chatIdEven {/*ログIDが偶数の場合*/
	padding:0 5px 0.5em 5px;
	background-color:#dddddd;
}

としています。

今から思うとかなり無理やりな判別方法だと思いますし、あまりにも手を入れて、おまけにコメントでオリジナルのソースを残していなかったりで、なんとむちゃな…と自分でも思いますが、自分の思い通りに表示させることができたことは、なかなか感動しましたね。

今回の記事を書くためにソースを見直したのですが、このNP_chatは他にもいろいろ手を入れていることを今思い出しましたので、忘れないうちにメモしておきます。

1. *1 - 整数を2で割るので、あまりは絶対に1だから、と思ったようですが、なんか不自然だと今は思います。余りが出たら、にすべきなんでしょうね。

Keyword: NP_chat

Search

Keyword » 182