ツリー表示用スキン

「Wing Multi BBS Professional (WMBP)」にはスキン機能が備わっており、スキンを書き換えることで自分の好きなように掲示板の外観を変えることが出来ます。

スクリプトをダウンロードすると圧縮ファイル内にスキンが同梱されているので、それを元にカスタマイズしていきましょう。

同梱のスキンファイル

WMBPは掲示板モードを切り替える事で4種類の掲示板(ツリー、トピック、スレッド、ノーマル)として機能します。
そのためスクリプトの圧縮ファイル内にはそれぞれに対応したスキンが同梱されています。

skin
システム系のスキンファイル一式
skin0
ツリー用のスキンファイル一式
skin1
トピック用のスキンファイル一式
skin2
スレッド用のスキンファイル一式
skin3
ノーマル用のスキンファイル一式

ツリー用のスキンファイル

ツリー用としては以下の25個のスキンファイルがあるはずです。

スキン名用途
admin.htmlメンテナンス画面
admin2.html確認用(メンテナンス画面で設定を変更後)
allthread.htmlスレッド一覧
del.html確認用(記事を削除後)
help.htmlヘルプ
htmldel.html確認用(記事を倉庫へ移動後)
insert.html確認用(記事を投稿後)
i-new.html新規投稿画面(携帯用)
i-res.html返信画面(携帯用)
i-update.html修正画面(携帯用)
new.html新規投稿画面
normal.html新着記事順表示
rankclr.html確認用(ランキングデータ削除後)
ranking.htmlランキング画面
res.html返信画面
search.html検索結果表示画面
skinadmin.html確認用(スキンファイル変更後)
souko.html過去ログ
stopper.html確認用(投稿制限 ON/OFF)
thread.html使用しない
topic.htmlトピック一覧(親記事だけ表示)
tree.htmlツリー一覧
treetop.htmlツリー内の全記事表示
update.html修正画面
update2.html確認用(記事修正後)

スキンファイルをカスタマイズする時は表左端の優先順位を目安にして下さい。
優先順位「高 ← ○ → 低」

特に を付けた物は掲示板の顔、そして使い勝手を大きく左右するので始めに取り掛かりましょう。
他のは後でかまいません(○ は変更する必要はない)。

★を付けた「insert.html」と「update.html」はメール通知や掲示板の設定にも関与してくる。

スキンファイルのカスタマイズ

まず同梱スキンのソースを見れば分かると思いますが、意味もなくテーブルが三重の入れ子になっています。
テーブルの中身というのは全て読み込んで初めて表示されるものなので、これでは WMBP の売りの1つである軽快な動作をさまだげるだけです。そこでテーブルレイアウトは全廃して、装飾に関わる部分は全てスタイルシートで指定しましょう。

スタイルシートは1つで済ます

「admin.html(メンテナンス画面)」は別としても、1つのスタイルシートで全スキンファイルの要素を指定しましょう。
なるべく要素のクラス名(class)やID名(id)は使いまわすようにします。
こうする事によって、あとでリニューアルしたいと思った時にスタイルシート1つをいじるだけで、外観をがらっと変えることが可能です。

テーブルは極力使用しない

テーブルを使用しないことによって、表示の高速化をはかるとともに、スキンファイルの、そして CGI で生成されるファイルサイズを軽減する事が出来ます。サーバーへの負荷を減らす事にもつながります。
僕の場合、テーブルレイアウトを廃止したらスキンファイルのサイズが半分以下になりました。

スタイルシートで指定するプロパティ

一応、これらのプロパティをおさえておけば大丈夫だと思います(「nJOY」の質問用掲示板はこれだけで出来たので)。


サイト作成のヒント集に戻る