BBSNote 配布元 : WonderCatStudio
スキン : KURAGEYA
2006.5.5 サポート終了・説明書更新
ダウンロードしていただきありがとうございます。
この Readme_7.html は、BBS Note 7.31版 対応スキン共通の説明書です。
よく読んでスキンをご利用ください。
全体的にシンプル系のデザインです。
文字のみの投稿・写真投稿・お絵描き投稿が混在していてもすっきりです。
普通の掲示板と併用できそうなデザインを目指しています。
またとにかく設定項目が多いので配色やデザインを細かくカスタマイズできます。
さまざまな追加項目があります。
アイコン掲示板は、機能的には普通の掲示板用と同じですが、アイコン選択式機能が追加されています。
親記事とレス記事にそれぞれアイコンをつけることができます。
「Mini+icon」と「Simple+icon」は、画像アップやお絵描き投稿親のとき、アイコンが表示されません。
この場合、アイコンを選択しても無視されます。
アイコン掲示板はＳＩＮさんのコードを参考にしております。
全体的にシンプル系のデザインで、文字のみの投稿・写真投稿・お絵描き投稿が混在していてもすっきりです。
文字色選択機能がついています。
日記用なので後から編集できる編集機能があります。
さまざまな追加項目があります。
はじめて日記用を設置する方は、本家の日記用でできるかどうか設置確認を必ずお願いします。
本家の日記用で正常なのに当サイトのスキンで問題が起きた場合、報告してください。
アプレットフィットができない、リンク先が一部おかしい、などのバグがあります。
日時の変更を可能とするために、曜日の表示は仕様で不可能のようです。
あらかじめご承知ください。
問題の原因は、スキンとして使っている3つのHTMLファイルにも広告が挿入されてしまうことのようです。
そこで、スキンファイルの拡張子をhtmlからtxtに変更してあげます。
次に、skin.cgiファイルを開いて、108，109，110行目にあるそれぞれのスキンファイルの名前の拡張子を、先ほどの変更にあわせてhtmlからtxtに変えてあげます。
これらは、ご自分のパソコン内にあるファイルを変更してください。
そして、変更が済んだらファイルをアップロードし、これらのファイルのパーミッションを設定し直します。
アップロードはアスキーモードで行ってください。
サーバに残っている拡張子がhtmlのスキンファイルは削除してしまってもかまいません。
「variation」フォルダや「variation.txt」は、カスタマイズの一例です。
「○○.txt」は、カスタマイズ済み設定項目（この場合まるごと設定項目をコピペしてください）や変更箇所などが記載されています。
そのままカスタマイズ例を利用したり、自分カスタマイズの下地にしたりするなどに、ご利用ください。
レイアウト切り替え機能がある一部のスキンではこの段階でどのレイアウトか決定しておきます。
#37■親記事タイトルの前の飾り（スペースや画像など）
$MESGTITLE1 = '<IMG src="'.$img_dir.'/画像ファイル名" alt="" width="横幅" height="高さ">';
あとはとことん自分好みにBODY配色やスタイルシートなどの他項目を設定してってください♪
色などのデザイン関係は表示形式が決定してからいじるとやりやすいです。
スキンによって設定項目が違うこともありますが、それぞれに説明がついているので参考にしてください。
少ないですが、いずれも基本的なこと（特にレスのこと・大きすぎる画像の処理法など）ばかりです。
デザインに関してはスタイルシートおよび main.html をいじってください。
説明がしにくいので、自分でいろいろやってください。
わからない人は、色指定のみ変更するようにすれば、特に失敗なくデザインイメージを変えられると思います。
テーブルの横幅を変更したい場合は main.html のどこかにその記述があるのでそこを変更します。
スレッドフォームを使用している場合、テーブルの横幅を変更したら
#●スレッドフォーム使用時のコメント欄のサイズ 〜 も変更してちょうどいい長さにしてください。
最後に必ず著作権表示が正しくなっているかを確認してください。
#■[***] 著作権表示追記
$Tyosaku = '';
#■[***] 著作権表示追記
$Tyosaku = 'graphics by <A href="素材屋URL" target="_blank">素材サイト名</A>';
#■[***] 著作権表示追記
$Tyosaku = 'skin edit by 改造者の名前やサイト名など graphics by <A href="素材屋URL" target="_blank">素材サイト名</A>';
スタイルシートで行間を指定することにより文章を読みやすくしているため、このような現象が起きます。
スタイルシートを次のどちらかに修正してください。
なお FONTタグなどを使用する場合、 <FONT color=" "> 〜 </FONT> のように記述します。
"" をつけることを忘れないで下さい。
「## アプレット選択フォームの表示」という文字列を検索してください。 （800行目前後あたり？）
ここから5行目にあるFORMタグに target="_blank" の指定を追加します。
$APPLET_TAG='<FORM name="applet" METHOD=POST ACTION="'.$BBSNoteCGI.'" target="_blank">
はっきりとした絵がとても汚い感じになってしまうのは JPEG で保存されてしまうからです。
絵の保存形式は、config.cgi の「# ★圧縮/減色を開始するサイズ」で設定します。
鉛筆ペン描きのはっきりとした絵はPNGで、水彩ペンを使った絵はJPEGで保存したいのなら、
config.cgi の設定を $sii_image_size = 60; # 圧縮開始サイズ に変更するのがおすすめです。
また、スキンの「#20■画像保存モード」をONにすると、ユーザーが保存形式を選択できます。
動画が保存されていないPNG画像は、BBS Noteの仕様上「続きから描く」ができません。
PNG保存で続きから描くには、動画を保存しなければなりません。
つねに JPEG保存にするか、次のように動画保存を強制してしまうことなどの予防策が考えられます。
#19■アニメーションを記録する[強制記録=true,ユーザー選択=user,しない=false]
$sii_animation_save = 'true';
なお日記用では「続きから描く」機能は管理画面を探してもないです。
それぞれの編集画面に「続きから描く」ボタンがありますのでそちらに行ってください。
Clear などのスキンではPictureBBS、BBSPainterのお絵描き画面にまで背景画像があるのをうっとおしく思うかもしれません。
また、お絵描き画面は比較的シンプルにしたほうがお絵描きしやすいです。
そういうかたは次のカスタマイズをしてください。
しぃちゃんお絵かきページについては、設定項目の下のほうに「お絵描き画面設定」があります。
#1■PictureBBS、BBSPainterのBODY配色
$BODY = 'bgcolor="#FFFFFF" text="#666666" link="#b3cce6" vlink="#8099b3" alink="#4d6680"';
#追加項目 メインページのBODY配色
$MAINBODY = 'bgcolor="#FFFFFF" text="#666666" link="#b3cce6" vlink="#8099b3" alink="#4d6680"';
Simple・Line・Solid などのスキンは背景画像を指定していません。
背景画像を使用したいときには次のように指定するといいです。
#1■ページのBODY配色
$BODY = 'bgcolor="#FFFFFF" text="#666666" link="#b3cce6" vlink="#8099b3" alink="#4d6680" background="'.$img_dir.'/背景画像ファイル名"';
当サイトのサンプル掲示板のように注意事項などをつけくわえたい場合、
skin.cgiではなく config.cgiの設定をいじってください。
たとえば上部に注意事項を加えたい場合はここを変えればいいのです。
# BBS表示時のメッセージ表示する上部 *BBSの説明とか？ ___.62
$TXT_BBS_MSG = <<'_TXT_';
普通にタグをつかってここに説明をいれます。「荒らしはダメですよ」とか。
_TXT_
無料サーバーを使っていて広告を挿入する場合もこのように config.cgiの設定で指定するといいです。
日記用の場合はタイトル用に「BBS表示時のメッセージ表示する上部」を skin.cgiにコピーしています。
この場合、skin.cgiのほうが優先されます。
画像がきちんとアップされているかを確認します。
ときたま画像を正しく読み込まないことがあるので、更新ボタンを何度か押してみてください。
画像を入れ替えたときもブラウザで更新しないと変わりません。
マルチスキンのモジュールが本家で配られており、これを使うといくらでもスキンを設定できます。
（例：表示は掲示板でも自分は日記のように編集したいなど）
WonderCatStudio → ダウンロード → モジュール と進んでいくと
「Multi スキンを任意に切替可能に 〜」
というのが見つかりますのでダウンロードしてその説明どおりに設置してください。
いろんな記述がありますが、以下のふたつを紹介してみます。
掲示板へのリンクを次のようにはります。
width で横幅、height で高さを指定し、yes / no の値を切り替えることでスクロールバーの表示、リサイズ可など小窓の条件は変わります。
<a href="掲示板へのアドレス"
onkeypress="window.open(this.href, '_blank', 'width=600,height=450,
scrollbars=yes,status=no,resizable=no,toolbar=no,location=no,menubar=no');
return false;"
onclick="window.open(this.href, '_blank', 'width=600,height=450,
scrollbars=yes,status=no,resizable=no,toolbar=no,location=no,menubar=no');
return false">
小窓で開くリンク
</a>
<script type="text/javascript">
<!--
function i(){
window.open("掲示板へのアドレス","betu","width=600,height=450,scrollbars=yes,
status=no,resizable=no,toolbar=no,location=no,menubar=no");
}
-->
</script>
<a href="javascript:i()">小窓で開くリンク</a>
いつも画像に黒い枠をつけたいなどの、装飾をしたい場合、次のようにしてください。
ALT属性の内容を部分的に変更したいときは、skin.cgi にある次の部分をいじります。
# 軽量モードや画像表示限界を超えている場合の処理
$ALT = $LOG_FileSRC.' ( '.$LOG_FileSize.' KB )'.$LOG_Applet;
ここをいじれば部分的に削除ができます。
背景ランダムなどのJavaScriptを挿入することもできます。（ソースコードは自分でお探しください）
<HEAD> 〜 </HEAD> に挿入するタイプは、次のように
「スキンのヘッダ（スタイルシート指定など）」のところにそのまま入れられるので比較的簡単です。
（日記用スキンの場合は、記事表示HTMLの main.html に挿入してもよいです）
$TXT_HEADER = <<'_TXT_';
<Script Language="JavaScript">
<!--
スクリプト
-->
</Script>
<STYLE type="text/css">
<!--
スタイルシート
-->
</STYLE>
_TXT_
iconlist.dat を編集することによって、アイコンを追加したり変更したりできます。
iconlist.dat をメモ帳などで開き、左側に 画像ファイル名 、右側に 名前 を書いてください。
私が作ったアイコンはそのまま使用するなり加工するなり自由ですが、なるべくサイトのイメージにあったアイコンに変更することをオススメします。（たとえば写真素材系、あるいは好きなキャラなど）
アイコンはうんと大きくても大丈夫ですが、同じような大きさにそろえたほうがいいかもしれません。
また数もほどほどに。
アイコン掲示板でアイコンリストに「なし」の項目を加えたいときは、次のカスタマイズをしてください。
#-------------------------- ICON SELECT Module ------------------------------
open(IC, ($SKINDIR||'.')."/iconlist.dat");
$iconimglist = '';
#-------------------------- ICON SELECT Module ------------------------------
open(IC, ($SKINDIR||'.')."/iconlist.dat");
$iconlist = qq(<option value="">なし</option>\n);
$iconimglist = '';
まず、350行前後にある次の部分を探してください。
$ICONLIST_TAG = qq(<a href="$BBSNoteCGI?fc=iconlist" target="_blank">);
ここをたとえば小窓の項目を参考に、以下のように書き換えると横600縦450の小窓になります。
$ICONLIST_TAG = qq(
<script type="text/javascript">
<!--
function i(){
window.open("$BBSNoteCGI?fc=iconlist","betu","width=600,height=450,scrollbars=yes, status=no,resizable=no,toolbar=no,location=no,menubar=no");
}
-->
</script>
<A href="javascript:i()">
);
アイコンリストは縦並びになっていますが、アイコンの形状、数により横並びの方がよい場合は、次のようにカスタマイズしてください。
$iconimglist .= qq(<TR><TD><img src="$img_dir/$f">$s</TD></TR>\n);
<table border=1 cellspacing=0 cellpadding=6><TR>$iconimglist</TR></table>
デフォルトのアイコンリストはシンプルなテーブルで説明もないです。
自作したHTMLファイルを使用したい場合は、次のようにカスタマイズしてください。
350行前後にある次の部分を探し、青い文字を、自作したHTMLファイルへのリンクに変更してください。
$ICONLIST_TAG = qq(<a href="$BBSNoteCGI?fc=iconlist" target="_blank">);
main.html にある「$date」や「$title」の近く当たりを目安に次の変数をおきます。
スキンや状況に応じて適切な位置において、その前後を適当なタグではさむなどしてください。
スレッドフォームONの場合、レスに文字制限があります。
skin.cgi の 470行前後と670行前後あたりの２箇所に maxlength=80 というものがあるので、これを削除すればスレッドフォームレスの文字制限がなくなります。
縦幅を大きくしたい場合はINPUTタグをTEXTAREAタグに変更してください。
skin.cgi の 480行前後に次のような文があります。
# 返信可能であるかどうかの判定
if($RES_Enable && !$DiaryNoRes){
「!$DiaryNoRes」がスキン上部で設定したレスを禁止にするかしないかの切り替えです。
レス禁止ON/OFFにかかわらず管理モードのみレス可にするには、ここを次のように書き換えます。
# 返信可能であるかどうかの判定
if($RES_Enable && $adminMode == 1){
skin.cgi の 450行あたりに $tY\年$tM\月$tD日 という部分があります。
$tY が年、$tM が月、$tD が日にあたり、並び替えなどができます。
その間に何か入れるときは「\」が必要な場合がありますのでご注意ください。
たとえば $tM\/$tD\/$tY というかたちにすれば、「10/3/2003」となります。
また、そのちょっと上には $tY=$1;$tM= int $2;$tD=int $3; という部分があります。
ここを $tY=$1;$tM=$2;$tD=$3; に変更すれば、
月日の数字が一ケタの場合、「2003年1月3日」ではなく「2003年01月03日」と「0」が入るようになります。
レス記事の投稿日時は、skin.cgi の 630行あたりに s#\$date#$month/$day $hour:$min#ig; です。
$month が月、$day が日、$hour が時、$min が分にあたります。
$year（年）や、$week（曜日）を追加することもできます。
また、その上にある $year = $1;$month = $2;$day = $3;$week = $4;$hour = $5;$min = $6; を
$year = $1;$month = int $2;$day = int $3;$week = $4;$hour = int $5;$min = int $6; にすれば
「01/03...」とある「0」をなくし、「1/3...」となります。
日記用スキンの場合、親記事投稿者は自分の名前を表示しません。
それを利用して簡易的に親記事のみアイコンをくっつけられるカスタマイズです。
# 名前に項目を付けて表示する
my $m = ($LOG_name ne "") ? "$LOG_name" : "" ;
s/\$name/$m/ig;
例えば、Diary-Scroll だとこんな感じに main.html の 32行を書き換えするといいと思います。
<TR><td><DIV align="right" class="mini"><BR><!--SKIN:DELETE--> $date</DIV><IMG src="./images/$name">$title<DIV align="center"><!--SKIN:IMAGE--></DIV>
7.3x掲示板用は日記風の外見にすることはできますが、編集機能はありません。
どうしても編集機能が欲しい場合、日記スキンを改造してみてください。
（新規スキン作成のレベルですが...）
日記用スキンはほとんどmain.htmlでデザインされているため、比較的簡単に改造できます。
<!--SKIN_TXT_BBS_TOP-->
<table width="440" border="0" cellspacing="0" cellpadding="5">
<tr><td>
<!--SKIN_TXT_BBS_MSG-->
<!--SKIN:DEL_FORM-->
<!--SKIN:TOP_FORM-->
</td></tr>
</table>
<!--SKIN_MAIN:end-->
<!--SKIN_MSG:begin-->
<BR><table width="440" border="0" cellspacing="0" cellpadding="0" class="waku">
<TR>
<td><DIV class="title"><SPAN class="title2">TITLE</SPAN> $title</DIV>
<table width="100%" border="0" cellspacing="0" cellpadding="15">
<TR><td><DIV align="right" class="mini"><!--SKIN:DELETE--> $date</DIV><DIV align="center"><!--SKIN:IMAGE--></DIV>
<DIV class="lh"><BR>$message</DIV><DIV align="right">
<!--SKIN_RES:begin-->
<BR><TABLE width="350" border="0" cellspacing="1" cellpadding="12" bgcolor="#999999"><TR><TD bgcolor="#FFFFFF" class="lh"><!--SKIN:DELETE--><B>$name</B>$url <SPAN class="mini">$date</SPAN><BR><BR>$message</TD></TR></TABLE>
<!--SKIN_RES:end-->
</DIV></td>
</tr><!--SKIN:RES_FORM-->
</table>
</td>
</tr>
</table><BR><BR>
<!--SKIN_MSG:end-->
<!--SKIN_FOOTER:begin-->
<!--SKIN_TXT_BBS_MSGDOWN-->
<table width="440" border="0" cellspacing="0" cellpadding="5">
<TR><TD><div align="right" class="mini"><BR><a href="ADMIN">ADMIN</a> </div><BR>
<A NAME="pages"> </A><DIV ALIGN="RIGHT" class="mini">
<!--SKIN_PAGE:config-->
<!--SKIN_Version:begin-->
BBSNote 7.x Diary-Scroll
<!--SKIN_Version:end-->
</DIV>
</TD></TR></table>
<!--SKIN:DEL_FORM2-->
</DIV></BODY>
</HTML>
<!--SKIN_FOOTER:end-->
.waku {background-color:#FFFFFF;
border:1px solid #999999;}
.title {background-color:#99cccc;
padding-left:15px;
padding-top:10px;
padding-bottom:5px;}
.title2 {color:#FFFFFF;font-size:10px;}
これだけでもだいぶSimpleに外観が近づきます。
あとはご自分でいろいろいじってみてください。
## / カタログ表示 / から } （下から2行目の}）までの 約100行を削除してください。
デフォルトのカタログ表示の枠色などは config.cgi で設定します。
ついでに設定項目「#30」を削除すれば、横表示数・縦表示数・画像の表示幅も config.cgi の設定です。
660行前後あたりに次のような文があります。
if($FORM{'mode'} eq 'light'){
$s = $MODE_CATALOG; $m = ''.$t_cat.''; $t = 'カタログ表示にします'}
elsif($FORM{'mode'} eq 'catalog'){
$s = $MODE_NOIMAGE; $m = ''.$t_noi.''; $t = '画像を表示せず代替テキストにします'}
elsif($FORM{'mode'} eq 'noimage'){
$s = "$BBSNoteCGI?fc=page".$b; $m = ''.$t_nor.''; $t = '通常の表示にします'}
else{
$s = $MODE_THUMBNAIL; $m = ''.$t_thum.''; $t = '軽量のサムネイル画像を表示します'}
赤い部分 を削除すればカタログ表示が、
青い部分 を削除すれば画像なし表示へのリンクがなくなります。
当サイトのスキンは投稿日時を次のように切り替えることができます。
しかし、これ以外の表示にしたい方は次のようにカスタマイズしてください。
親記事の投稿日時の表示を変更する場合、400行前後にある次の文を探します。
# 時間が保存されていた場合表示する。
if($Oyakijitime == 0) {
$LOG_date="";
} elsif($Oyakijitime == 1 && $WEEK_DISPMODE == 0) {
$LOG_date="$year/$month/$day \($week\) ";
} elsif($Oyakijitime == 2 && $WEEK_DISPMODE == 0) {
$LOG_date="$year/$month/$day \($week\) $hour:$min";
} elsif($Oyakijitime == 1 && $WEEK_DISPMODE == 1) {
$LOG_date="$year年$month月$day日 \($weekj\) ";
} else {
$LOG_date="$year年$month月$day日 \($weekj\) $hour時$min分";
}
とりあえず、ここを次のようにしてください。
# 時間が保存されていた場合表示する。
$LOG_date="";
これで設定項目でどのように指定しても "" の間に並べられた変数が表示されます。
変数は以下のものがあるので好きなように並べてください。
たとえば、01月23日と表示したい場合はこうすればＯＫです。
# 時間が保存されていた場合表示する。
$LOG_date="$month月$day日";
ちなみに「(」など一部の文字を間にはさむとき、前に「\」を置かないとダメな場合があります。
レス記事の投稿日時の表示を変更するのは親記事と同じ手順です。
580行前後あたりに次の部分があります。
if($Reskijitime == 0) {
$RES_date="";
} elsif($Reskijitime == 1 && $WEEK_DISPMODE == 0) {
$RES_date="$year/$month/$day \($week\) ";
} elsif($Reskijitime == 2 && $WEEK_DISPMODE == 0) {
$RES_date="$year/$month/$day \($week\) $hour:$min";
} elsif($Reskijitime == 1 && $WEEK_DISPMODE == 1) {
$RES_date="$year年$month月$day日 \($weekj\) ";
} else {
$RES_date="$year年$month月$day日 \($weekj\) $hour時$min分";
}
これを次のように書き換えてあとは中に変数を好きなように入れればＯＫです。
$RES_date="";
デフォルトでは数字が一ケタの場合「2003年01月03日...」と「0」が入ります。
この「0」をなくし、「2003年1月3日...」とすることもできます。
検索で次のことばを探します。
$year = $1;$month = $2;$day = $3;$week = $4;$hour = $5;$min = $6;
400行前後と600行前後あたりの２箇所に見つかります。（上にある方が親記事、下がレス記事の表示）
これを次のように変更します。
$year = $1;$month = int $2;$day = int $3;$week = $4;$hour = int $5;$min = int $6;
Simple・Clear・Mini のスキンは、小さな画像を繰り返して、レスの区切り線にしています。
「#26■レスなどを区切る線」で使用するライン画像や高さを変更できます。
横長の大きな画像を使用することもできます。
#26■レスなどを区切る線
$Lineimg = 'line.png" style="background-position:center;background-repeat:no-repeat;';
$LineH = '10'; #線の高さ （TDの高さ）
Simple・Clear・Mini のスキンで、Paper のように、画像ではなくスタイルシートで枠線を指定したい場合、次のようにカスタマイズしてください。
$SKIN_RES_FORMAT=<<HTML;
<TR><TD background="$img_dir/$Lineimg" height="$LineH">$Toukaimg</TD></TR><TR><TD><TABLE border="0" cellspacing="0" cellpadding="20" width="100%"><TR><TD align="left"><DIV class="lh">$SKIN_DELETE
$RES_message</DIV><DIV align="right"> 〜 省略 〜 </DIV></DIV></TD></TR></TABLE></TD></TR>
HTML
$SKIN_RES_FORMAT=<<HTML;
<TR><TD><DIV class="reswaku"><DIV class="lh">$SKIN_DELETE
$RES_message</DIV><DIV align="right"> 〜 省略 〜 </DIV></DIV></DIV></TD></TR>
HTML
.reswaku {border-top:1px #999999 solid;
border-left:1px #999999 solid;
padding-top:20px;
padding-right:20px;
padding-bottom:15px;
padding-left:20px;
margin-left:50px;
margin-top:5px;}
Simple・Line・Mini・Solid・Clear・Color のスキンで、レスの文字を親記事と別にしたい場合、次のようにカスタマイズしてください。
Memo は .rescolor {} 、 Paper は .res {} という項目がすでにスタイルシート内にあります。
$SKIN_RES_FORMAT=<<HTML;
〜 省略 〜
$RES_message</DIV>
〜 省略 〜
HTML
$SKIN_RES_FORMAT=<<HTML;
〜 省略 〜
<DIV class="resfont">$RES_message</DIV></DIV>
〜 省略 〜
HTML
この近くにある $RES_name $RES_date $RES_browser $RES_IP_HOST も同じように前後をなんらかのタグではさんだりすれば色や大きさを変更できます。
透明度はスタイルシートで指定します。
filter:alpha(opacity=50); ・・・ IE向けの透過フィルタ（数値は100で不透明、0が透明）
-moz-opacity:0.5; ・・・ NN向けの透過フィルタ（数値は1で不透明、0が透明）
フィルタを使用しているテーブルの中にあるリンクの A:hover に 「text-decoration:〜;」 や 「font-weight:〜;」、「background:〜;」 などを使用しているとき、IEでなぜかそのようなことが起きます。
原因はよくわかりませんが、リロードすれば消えたところは戻ります。
なるべくリンク文字は A {text-decoration:none; 〜 } で共通に指定します。
A:hoverなど特定の条件の変化指定は color:〜; のみにするようにして、文字とそのまわりの形が変化しないようにしてください。
複雑に指定しているときに、正常に背景等が表示されなかったりするのもIEのバグのようです。
横幅をきっちりと指定すると起きないようです。
720行前後あたりに次のような部分があります。
「Diary-Cute」の場合、書き換える場所は post.html の 33〜39行あたりとなります。
色は色名で指定してもＯＫです。
各行の赤い文字（送信されるデータ）と青い文字（色サンプル）はそれぞれ同じ色を入れてください。
トップの入力フォームONの場合は、1090行あたりにある記述も同じように変更してください。
<INPUT TYPE="radio" name="title" value="#999999" checked><FONT color="#999999">■</FONT>
<INPUT TYPE="radio" name="title" value="#CC9999"><FONT color="#CC9999">■</FONT>
<INPUT TYPE="radio" name="title" value="#CCCC99"><FONT color="#CCCC99">■</FONT>
<INPUT TYPE="radio" name="title" value="#99CC99"><FONT color="#99CC99">■</FONT>
<INPUT TYPE="radio" name="title" value="#99CCCC"><FONT color="#99CCCC">■</FONT>
<INPUT TYPE="radio" name="title" value="#9999CC"><FONT color="#9999CC">■</FONT>
<INPUT TYPE="radio" name="title" value="#CC99CC"><FONT color="#CC99CC">■</FONT>
これに続けて <INPUT 〜 > を追加していけば選択できる色を増やせます。
■は色サンプルなので他のマークや色名に変更してもＯＫです。