CLEVER BBSの設置の仕方♪ yozoの気が向いたと記2.0

07/01/07 15：00追記

　残念ながらCLEVER BBSのサービス及び配布は終了しました。詳細はコチラ↓
yozoの気が向いたと記2.0 | 緊急！CLEVER BBS サービス停止と、usamoスキンの修正のお願い　usamoskin Ver.3.3.01と02

2007/02/14　cleverskin.html、resskin.htmlを修正しました。Ver.3.4.01と02
2006/11/21　cleverskin.html、resskin.html、st.cssを修正しました。Ver.3.3.01と02
2006/10/02　resskin.htmlの「RES」を「戻る」に修正しました。Ver.3.2.01と02
2006/09/15　cleverskin.html、resskin.html、st.cssをXHTML対応版に変更しました。
2006/08/12　cleverskin.html及びresskin.htmlの一部を修正しました。

CLEVER BBSの設置の方法を備忘録として記事にしました。参考になったら幸いです。

　CLEVER BBSのことは、お友達の**Silver Heart**のmayuさんとのあろぐ。ののあさん（※06/12/08　残念ながら諸事情のため『のあろぐ。』様は閉鎖されました。）のブログで見かけて知りました。
　また、設置に際して、無料でCGIが使えて広告が表示されないPF-X.NETのことは、お友達のROOM-Mのmioさんの記事模様替えついでにで紹介されていました。
　そして、CLEVER BBSがセキュリティ強化されたことは、お友達のまゆびのかわいいもの大好きのまゆびさんの記事掲示板のカキコを消してしまいました。＜(＿＿)＞から情報を得ました。
　mayuさん、のあさん、mioさん、まゆびさん、
本当にありがとーございまっす　m(_ _)m

まず、CLEVER BBSをブログに設置するには、CGIが使えるホームページスペースが必要です。iswebでは、掲示板の上下に広告が表示されてしまってとても不細工です。
それで、yozoは、お友達のROOM-Mのmioさんの記事模様替えついでにで紹介されている、PF-X.NETに申し込み(趣意文を書かされて簡単な審査をPASSする必要があります。)して、無料でCGIが使えて、その上広告が表示されないホームページスペースを確保しました。

solo.designの記事CLEVER BBSより、セキュリティが強化された、CLEVER BBS Ver 4.21 [Shift JIS Ver4.21]をダウンロードして、解凍してください。
解凍ツールはダウンロードしてご自分のパソコンにインストールしましょう。
無料圧縮･解凍ツール+Lhacaのダウンロードはコチラ→+Lhaca
解凍された[clever]フォルダの中のファイルの設定を下のように変更しました。
これはあくまでyozoの場合です。もちろん同じ設定をされても構いませんが自己責任でお願いします。詳しくは、マニュアルを見て確認してください。
デフォルトの[clever]フォルダの中身
bbsini.cgi -- スクリプト用設定ファイル
clever.cgi -- 掲示板用スクリプト
cgi-lib.pl -- CGIスクリプトライブラリ
clever.log -- データログファイル
jcode.pl -- 日本語コード変換ライブラリ
cleverskin.html -- CLEVERSKINファイル(通常表示部分)
resskin.html -- CLEVERSKINファイル(レス表示部分)
[img]フォルダ
[lock]フォルダ
- perlのpassの設定(clever.cgi）
  clever.cgiの一番上の行です。必要なら変更して上書き保存するだけです。
  PF-X.NETの場合は、
  #!/usr/local/bin/perl→#!/usr/bin/perl　としてください。
- bbsini.cgiの設定
  たくさん項目がありますが、下の設定だけ修正しました。
  # 管理者用マスタパスワード (英数字で８文字以内) ____.03
  $pass = '□△☆◎';
  # アップロードディレクトリ ____.07
  # → パスの最後は / で終わること
  # → フルパスだと / から記述する
  $ImgDir = "./up-img/";
  
  # アップロードディレクトリのＵＲＬパス ____.08
  # → パスの最後は / で終わること
  $ImgUrl = "http://～省略～/cgi-bin/clever/up-img/";
  
  # 名前の入力省略の可否（省略可は'0'、省略不可は'1'） ____.01
  $in_name = '1';
  
  # URL省略の可否（省略可は'0'、省略不可は'1'） ____.03
  $in_url = '1';
  
  # 画像ファイル省略の可否（省略可は'0'、省略不可は'1'） ____.04
  $in_img = '0';
  
  # コメント省略の可否（省略可は'0'、省略不可は'1'） ____.05
  $in_comment = '1';
  
  # URLのテキストの指定 ____.03
  $home_text = 'URL';
  
  # アップロードを許可するファイル形式 ____.02
  #（許可しない場合は0、許可する場合は1とする）
  $gif = 1; # GIFファイル
  $jpeg = 1; # JPEGファイル
- [up-img]フォルダを[clever]フォルダの中に作成してください
  (中身はからっぽですよ♪)
ブログに設置できるように、ブログ用スキンを変更しましょう。
　たくさんのサイトが、スキンを配布されていますので、色々さがしてみてくださいね。こちらを参考にしてください→スキン配布サイト
　下の２種類のusamoスキンのソース(それぞれcleverskin.htmlとresskin.htmlとst.css)をそのまま使用してくださって構いません。また、必要な修正をしてくださっても構いません。ただし、ご使用に際しては、この記事にコメントくださるか、トラックバックしていただけますようにお願いします。
　これは、不具合があったときに、yozoから連絡できるようにさせていただくためですので、ご協力お願いします。m(_ _)m
使用する場合は、新規テキストファイルを開いて、下のコードをコピペして、ファイル名をそれぞれ「cleverskin.html」「resskin.html」「st.css」として保存すれば出来上がりです。

table widthが140pxのもの(8色バージョン)
cleverskin.html

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>BBS</title>
<script type="text/javascript">

</script>
</head>
<body>
<div class="textcenter"><div class="tablecenter"><p><span style="color:#007495; font-size:15px; font-weight:bold;">yozo＆usamo BBS</span></p>
【<a href="javascript:show_hide('searchform')">検索</a>】【<a href="./clever.cgi" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")'>リセット</a>】【<a href="javascript:show_hide('postform')">書込</a>】【<a href="clever.cgi" title="大きいウィンドウを開いてページ全体を表示" onclick="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');" onkeypress="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');">別窓</a>】<br />

<div id="postform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="regist" accesskey="a" tabindex="1" />
<table cellpadding="2" cellspacing="0" style="width:140px; border-style:none;" summary="BBSの投稿欄です。">
<tbody>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="21" accesskey="b" tabindex="2" value="name" /></td>
</tr>
<tr>
<td colspan="2" align="right">Url　<input type="text" name="url" size="21" accesskey="c" tabindex="3" value="http://" /></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="15" accesskey="d" tabindex="4" /></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="23" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#EAAF00;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">　 Pass <input type="password" name="pwd" size="8" maxlength="8" accesskey="n" tabindex="14" /> <input type="submit" value="Send" accesskey="o" tabindex="15" /></td>
</tr>
</tbody></table></form></div>
<div id="searchform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="find" accesskey="p" tabindex="16" />
<table cellpadding="2" cellspacing="0" style="width:140px; border-style:none;" summary="BBSの検索欄です。"><tbody>
<tr>
<td colspan="2"><span style="color:#FFFFFF; font-size:10px;">検索</span></td>
</tr>
<tr>
<td colspan="2" align="right"><span style="font-size:10px;">Search </span> <input type="text" name="word" size="17" accesskey="q" tabindex="17" value="Keyword" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="検索する" accesskey="r" tabindex="18" /> <input type="button" value="リセット" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")' accesskey="s" tabindex="19" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="radio" name="cond" value="and" accesskey="t" tabindex="20" style="border-style:none;" />
<span style="font-size:10px;">AND</span>
<input type="radio" name="cond" value="or" accesskey="u" tabindex="21" style="border-style:none;" />
<span style="font-size:10px;">OR</span></td>
</tr></tbody></table></form></div>
<br />

<table cellpadding="2" cellspacing="0" style="width:140px; border : 1px solid #666666;" summary="BBSの表示部分です。">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSの親記事の表示部分です。">
<tbody>
<tr>
<td class="a">name url</td>
<td class="a" align="right"><a href="resinput">RES</a></td>
</tr>
<tr>
<td align="center" colspan="2">img</td>
</tr>
<tr>
<td colspan="2"><div style="color:color;">comment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr style="border: dotted 1 #666666; width:100%;" />
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSのレス記事の表示部分です。">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><div style="color:rescolor;">rescomment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />

<form action="clever.cgi" method="post">
<table style="width:140px; border-style:none;" summary="BBSの投稿削除欄です。">
<tbody>
<tr>
<td align="center"><br /><div style="text-align:center; font-size:10px;">footmsg<br />
<span style="font-weight:bold;">back</a></span>　<a href="clever.cgi?mode=admin" title="MASTER ONLY">**</a>　<span style="font-weight:bold;">next</a></span><br />
下のフォームから自分の投稿記事を削除することができます。</div></td>
</tr>
<tr>
<td align="center"><input type="hidden" name="mode" value="usr_del" accesskey="v" tabindex="22" />No. <input type="text" name="no" size="3" accesskey="w" tabindex="23" value="no" />Pass <input type="password" name="pwd" size="10" maxlength="8" accesskey="x" tabindex="24" />
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="OK" accesskey="y" tabindex="25" />
</td>
</tr>
<tr>
<td align="center"><a href="http://solodesign.jp/" title="cgi">clever bbs</a>
<br />designed by <a href="http://usamo.seesaa.net/" title="design">usamo</a>
<br />Customized by <a href="http://yozoblog2.blog63.fc2.com/" title="customize">yozo</a>
<br />usamoskin Ver.3.4.02</td>
</tr>
</tbody>
</table>
</form></div></div>
</body>
</html>
resskin.html

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>BBS</title>
</head>
<body>
<div class="textcenter"><div class="tablecenter">

<form action="clever.cgi" method="post"><input type="hidden" name="mode" value="regist" accesskey="5" tabindex="31" /><input type="hidden" name="reno" accesskey="6" tabindex="32" />
<table border="0" cellpadding="2" cellspacing="0" style="width:140px; border-style:none;" summary="レス投稿欄です。">
<tbody>
<tr>
<td colspan="2" align="right" valign="top" style="height:20px;"><a href="clever.cgi">トップ画面</a>｜レス画面</td>
</tr>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="21" accesskey="b" tabindex="2" value="name" /></td>
</tr>
<tr>
<td colspan="2" align="right">Url　<input type="text" name="url" size="21" accesskey="c" tabindex="3" value="url" /></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="15" accesskey="d" tabindex="4" /></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="23" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#EAAF00;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">　 Pass <input type="password" name="pwd" size="8" maxlength="8" accesskey="n" tabindex="14" /> <input type="submit" value="Send" accesskey="o" tabindex="15" /></td>
</tr>
</tbody></table></form>

<table cellpadding="2" cellspacing="0" style="width:140px; border : 1px solid #666666;" summary="BBSの表示部分です。">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSの親記事の表示部分です。">
<tbody>
<tr>
<td class="a">name url</td>
<td class="a" align="right"><a href="javascript:history.back();">戻る</a></td>
</tr>
<tr>
<td align="center" colspan="2">img</td>
</tr>
<tr>
<td colspan="2"><div style="color:color;">comment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr style="border: dotted 1 #666666; width:100%;" />
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSのレス記事の表示部分です。">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><div style="color:rescolor;">rescomment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="width:100%; border-style:none;" summary="BBSのフッター部分です。">
<tbody>
<tr>
<td align="center"><a href="http://solodesign.jp/" title="cgi">clever bbs</a>
<br />designed by <a href="http://usamo.seesaa.net/" title="design">usamo</a>
<br />Customized by <a href="http://yozoblog2.blog63.fc2.com/" title="customize">yozo</a>
<br />usamoskin Ver.3.4.02</td>
</tr>
</tbody>
</table>
</div></div>
</body></html>
st.css

body{
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #cccccc;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
font-size : 10px;
color :#666666;
}
table{
font-size : 10px;
font-family : verdana,"ｍｓゴシック";
text-align:left;
}
input,textarea{
border : solid 1 #666666;
background-color : #ffffff;
color : #9666666;
font-size : 10px;
}
/* リンク */
a:link { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover { color:#ffcccc; position:relative; top:1px; left:1px;}
a:active { color: #666666; text-decoration: none; }
.a{
line-height : 20px;
border-bottom : dotted 1 #666666;
}
.tablecenter {
margin-left: auto;
margin-right: auto;
width:140px;
}
.textcenter
{
text-align: center;
}

table widthが150pxのもの(10色バージョン)
cleverskin.html

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>BBS</title>
<script type="text/javascript">

</script>
</head>
<body>
<div class="textcenter"><div class="tablecenter"><p><span style="color:#007495; font-size:15px; font-weight:bold;">yozo＆usamo BBS</span></p>
【<a href="javascript:show_hide('searchform')">検索</a>】【<a href="./clever.cgi" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")'>リセット</a>】【<a href="javascript:show_hide('postform')">書込</a>】【<a href="clever.cgi" title="大きいウィンドウを開いてページ全体を表示" onclick="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');" onkeypress="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');">別窓</a>】<br />

<div id="postform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="regist" accesskey="a" tabindex="1" />
<table cellpadding="2" cellspacing="0" style="width:150px; border-style:none;" summary="BBSの投稿欄です。">
<tbody>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="25" accesskey="b" tabindex="2" value="name" /></td>
</tr>
<tr>
<td colspan="2" align="right">Url <input type="text" name="url" size="27" accesskey="c" tabindex="3" value="http://" /></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="17" accesskey="d" tabindex="4" /></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="25" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="n" tabindex="14" /><span style="color:#EAAF00;">+</span><input type="radio" name="color" value="#C5A850" style="border-style : none ;" accesskey="o" tabindex="15" /><span style="color:#C5A850;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">Pass <input type="password" name="pwd" size="17" maxlength="8" accesskey="p" tabindex="16" /> <input type="submit" value="Send" accesskey="q" tabindex="17" /></td>
</tr>
</tbody></table></form></div>
<div id="searchform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="find" accesskey="r" tabindex="18" />
<table cellpadding="2" cellspacing="0" style="width:150px; border-style:none;" summary="BBSの検索欄です。"><tbody>
<tr>
<td colspan="2"><span style="color:#FFFFFF; font-size:10px;">検索</span></td>
</tr>
<tr>
<td colspan="2" align="right"><span style="font-size:10px;">Search </span><input type="text" name="word" size="21" accesskey="s" tabindex="19" value="Keyword" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="検索する" accesskey="t" tabindex="20" /> <input type="button" value="リセット" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")' accesskey="u" tabindex="21" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="radio" name="cond" value="and" accesskey="v" tabindex="22" style="border-style:none;" />
<span style="font-size:10px;">AND</span>
<input type="radio" name="cond" value="or" accesskey="w" tabindex="23" style="border-style:none;" />
<span style="font-size:10px;">OR</span></td>
</tr></tbody></table></form></div>
<br />

<table cellpadding="2" cellspacing="0" style="width:150px; border : 1px solid #666666;" summary="BBSの表示部分です。">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSの親記事の表示部分です。">
<tbody>
<tr>
<td class="a">name url</td>
<td class="a" align="right"><a href="resinput">RES</a></td>
</tr>
<tr>
<td align="center" colspan="2">img</td>
</tr>
<tr>
<td colspan="2"><div style="color:color;">comment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr style="border: dotted 1 #666666; width:100%;" />
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSのレス記事の表示部分です。">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><div style="color:rescolor;">rescomment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />

<form action="clever.cgi" method="post">
<table style="width:150px; border-style:none;" summary="BBSの投稿削除欄です。">
<tbody>
<tr>
<td align="center"><br /><div style="text-align:center; font-size:10px;">footmsg<br />
<span style="font-weight:bold;">back</a></span>　<a href="clever.cgi?mode=admin" title="MASTER ONLY">**</a>　<span style="font-weight:bold;">next</a></span><br />
下のフォームから自分の投稿記事を削除することができます。</div></td>
</tr>
<tr>
<td align="center"><input type="hidden" name="mode" value="usr_del" accesskey="x" tabindex="24" />No. <input type="text" name="no" size="3" accesskey="y" tabindex="25" value="no" />Pass <input type="password" name="pwd" size="10" maxlength="8" accesskey="z" tabindex="26" />
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="OK" accesskey="1" tabindex="27" />
</td>
</tr>
<tr>
<td align="center"><a href="http://solodesign.jp/" title="cgi">clever bbs</a>
<br />designed by <a href="http://usamo.seesaa.net/" title="design">usamo</a>
<br />Customized by <a href="http://yozoblog2.blog63.fc2.com/" title="customize">yozo</a>
<br />usamoskin Ver.3.4.01</td>
</tr>
</tbody>
</table>
</form></div></div>
</body>
</html>
resskin.html

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>BBS</title>
</head>
<body>
<div class="textcenter"><div class="tablecenter">

<form action="clever.cgi" method="post"><input type="hidden" name="mode" value="regist" accesskey="5" tabindex="31" /><input type="hidden" name="reno" accesskey="6" tabindex="32" />
<table border="0" cellpadding="2" cellspacing="0" style="width:150px; border-style:none;" summary="レス投稿欄です。">
<tbody>
<tr>
<td colspan="2" align="right" valign="top" style="height:20px;"><a href="clever.cgi">トップ画面</a>｜レス画面</td>
</tr>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="25" accesskey="b" tabindex="2" value="name" /></td>
</tr>
<tr>
<td colspan="2" align="right">Url　<input type="text" name="url" size="27" accesskey="c" tabindex="3" value="url" /></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="17" accesskey="d" tabindex="4" /></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="25" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="n" tabindex="14" /><span style="color:#EAAF00;">+</span><input type="radio" name="color" value="#C5A850" style="border-style : none ;" accesskey="o" tabindex="15" /><span style="color:#C5A850;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">Pass <input type="password" name="pwd" size="17" maxlength="8" accesskey="p" tabindex="16" /> <input type="submit" value="Send" accesskey="q" tabindex="17" /></td>
</tr>
</tbody></table></form>

<table cellpadding="2" cellspacing="0" style="width:150px; border : 1px solid #666666;" summary="BBSの表示部分です。">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSの親記事の表示部分です。">
<tbody>
<tr>
<td class="a">name url</td>
<td class="a" align="right"><a href="javascript:history.back();">戻る</a></td>
</tr>
<tr>
<td align="center" colspan="2">img</td>
</tr>
<tr>
<td colspan="2"><div style="color:color;">comment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr style="border: dotted 1 #666666; width:100%;" />
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSのレス記事の表示部分です。">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><div style="color:rescolor;">rescomment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="width:100%; border-style:none;" summary="BBSのフッター部分です。">
<tbody>
<tr>
<td align="center"><a href="http://solodesign.jp/" title="cgi">clever bbs</a>
<br />designed by <a href="http://usamo.seesaa.net/" title="design">usamo</a>
<br />Customized by <a href="http://yozoblog2.blog63.fc2.com/" title="custmize">yozo</a>
<br />usamoskin Ver.3.4.01</td>
</tr>
</tbody>
</table>
</div></div>
</body></html>
st.css

body{
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #cccccc;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
font-size : 10px;
color :#666666;
}
table{
font-size : 10px;
font-family : verdana,"ｍｓゴシック";
text-align:left;
}
input,textarea{
border : solid 1 #666666;
background-color : #ffffff;
color : #9666666;
font-size : 10px;
}
/* リンク */
a:link { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover { color:#ffcccc; position:relative; top:1px; left:1px;}
a:active { color: #666666; text-decoration: none; }
.a{
line-height : 20px;
border-bottom : dotted 1 #666666;
}
.tablecenter {
margin-left: auto;
margin-right: auto;
width:150px;
}
.textcenter
{
text-align: center;
}
[cgi-bin]フォルダの中に[clever]フォルダをアップロードしましょう。
アップロード後、それぞれのファイル属性を下のように変更してください。
アップロードするときの[clever]フォルダの中身
bbsini.cgi -- スクリプト用設定ファイル
clever.cgi -- 掲示板用スクリプト
cgi-lib.pl -- CGIスクリプトライブラリ
clever.log -- データログファイル
jcode.pl -- 日本語コード変換ライブラリ
cleverskin.html -- CLEVERSKINファイル(通常表示部分)
resskin.html -- CLEVERSKINファイル(レス表示部分)
st.css -- CLEVERSKINのCSSファイル
[img]フォルダ
[lock]フォルダ
[up-img]フォルダ
- 『～.cgi』『～.pl』はプログラムですので
  [読取][実行]をOKするようにします→705
  bbsini.cgi
  clever.cgi
  cgi-lib.pl
  jcode.pl
- 掲示板ですから、カキコの記録(ログ)ファイルが必要です。
  [読込][書込]をOKするようにします→606
  clever.log
- 残りのファイルやフォルダはそのままでＯＫのはずです。
  念のため、属性は下の通りです。
  cleverskin.html→604
  resskin.html →604
  st.css→604
  [img]→705
  [lock] →705
  [up-img]→705
  フォルダ属性は、開くようにしないといけません。
  つまり[実行]できないといけないので[読込][実行]→705となります。
IEのアドレスバーに、掲示板のURLに「?mode=check」を追加したアドレス(例　http://～省略～/cgi-bin/clever/clever.cgi?mode=check　)を入力してチェックしてください。その後の動作確認もしておくほうがいいでしょう。
FC2ブログにログインして、FC2ブログ管理者ページの左サイドの「環境設定」の項目[プラグインの設定]をクリックします。
「プラグインの追加 [ 公式 / 共有 ]」をクリックします。
[フリーエリア]の [追加]をクリックします。
プラグインの[フリーエリア]に下のようにして、貼り付けましょう♪
<iframe name="minibbs" id="minibbs" title="CLEVER BBS" src="http://～省略～/cgi-bin/clever/clever.cgi" width="185" height="450" scrolling="auto" frameborder="0" style="border-width :1px;border-style :solid;border-color :#000000;">iframeでCLEVER BBSを設置しています。</iframe>
[プレビュー]をクリックして、確認してから[変更]をクリックしてください。

<yozoからのお願い>

ここで紹介している方法は、yozoが実際にやってみたことを書いているだけのものです。もっと簡単で、すばらしい方法もあると思います。参考にされるのでしたら、言うまでもありませんが、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょう。
　もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力お願いします。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓table widthが150pxのもの(10色バージョン)cleverski.htmlとresskin.htmlの修正箇所

table widthが150pxのもの(10色バージョン)cleverski.htmlとresskin.htmlの修正部分は以下の通りです。
cleverski.htmlは２箇所
resskin.htmlは４箇所

table widthが150pxのもの(10色バージョン)

cleverskin.html

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>BBS</title>
<script type="text/javascript">

</script>
</head>
<body>
<div class="textcenter"><div class="tablecenter"><p><span style="color:#007495; font-size:15px; font-weight:bold;">yozo＆usamo BBS</span></p>
【<a href="javascript:show_hide('searchform')">検索</a>】【<a href="./clever.cgi" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")'>リセット</a>】【<a href="javascript:show_hide('postform')">書込</a>】【<a href="clever.cgi" title="大きいウィンドウを開いてページ全体を表示" onclick="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');" onkeypress="window.open('clever.cgi', 'BBS','top=10,left=150,width=300,height=650, scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directions=no,status=yes');">別窓</a>】<br />

<div id="postform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="regist" accesskey="a" tabindex="1" />
<table cellpadding="2" cellspacing="0" style="width:150px; border-style:none;" summary="BBSの投稿欄です。">
<tbody>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="25" accesskey="b" tabindex="2" value="name" /></td>
</tr>
<tr>
<td colspan="2" align="right">Url <input type="text" name="url" size="27" accesskey="c" tabindex="3" value="http://" /></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="17" accesskey="d" tabindex="4" /></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="25" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="n" tabindex="14" /><span style="color:#EAAF00;">+</span><input type="radio" name="color" value="#C5A850" style="border-style : none ;" accesskey="o" tabindex="15" /><span style="color:#C5A850;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">Pass <input type="password" name="pwd" size="17" maxlength="8" accesskey="p" tabindex="16" /> <input type="submit" value="Send" accesskey="q" tabindex="17" /></td>
</tr>
</tbody></table></form></div>
<div id="searchform" style="display:none">
<form action="clever.cgi" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="find" accesskey="r" tabindex="18" />
<table cellpadding="2" cellspacing="0" style="width:150px; border-style:none;" summary="BBSの検索欄です。"><tbody>
<tr>
<td colspan="2"><span style="color:#FFFFFF; font-size:10px;">検索</span></td>
</tr>
<tr>
<td colspan="2" align="right"><span style="font-size:10px;">Search </span><input type="text" name="word" size="21" accesskey="s" tabindex="19" value="Keyword" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="検索する" accesskey="t" tabindex="20" /> <input type="button" value="リセット" onclick='window.open("./clever.cgi","_self")' onkeypress='window.open("./clever.cgi","_self")' accesskey="u" tabindex="21" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="radio" name="cond" value="and" accesskey="v" tabindex="22" style="border-style:none;" />
<span style="font-size:10px;">AND</span>
<input type="radio" name="cond" value="or" accesskey="w" tabindex="23" style="border-style:none;" />
<span style="font-size:10px;">OR</span></td>
</tr></tbody></table></form></div>
<br />

<table cellpadding="2" cellspacing="0" style="width:150px; border : 1px solid #666666;" summary="BBSの表示部分です。">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSの親記事の表示部分です。">
<tbody>
<tr>
<td class="a">name url</td>
<td class="a" align="right"><a href="resinput">RES</a></td>
</tr>
<tr>
<td align="center" colspan="2">img</td>
</tr>
<tr>
<td colspan="2"><div style="color:color;">comment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr style="border: dotted 1 #666666; width:100%;" />
<table cellspacing="0" cellpadding="2" style="width:100%; border-style:none;" summary="BBSのレス記事の表示部分です。">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><div style="color:rescolor;">rescomment</div></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />

<form action="clever.cgi" method="post">
<table style="width:150px; border-style:none;" summary="BBSの投稿削除欄です。">
<tbody>
<tr>
<td align="center"><br /><div style="text-align:center; font-size:10px;">footmsg<br />
<span style="font-weight:bold;">back</a></span>　<a href="clever.cgi?mode=admin" title="MASTER ONLY">**</a>　<span style="font-weight:bold;">next</a></span><br />
下のフォームから自分の投稿記事を削除することができます。</div></td>
</tr>
<tr>
<td align="center"><input type="hidden" name="mode" value="usr_del" accesskey="x" tabindex="24" />No. <input type="text" name="no" size="3" accesskey="y" tabindex="25" value="no" />Pass <input type="password" name="pwd" size="10" maxlength="8" accesskey="z" tabindex="26" />
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="OK" accesskey="1" tabindex="27" />
</td>
</tr>
<tr>
<td align="center"><a href="http://solodesign.jp/" title="cgi">clever bbs</a>
<br />designed by <a href="http://usamo.seesaa.net/" title="design">usamo</a>
<br />Customized by <a href="http://yozoblog2.blog63.fc2.com/" title="customize">yozo</a>
<br />usamoskin Ver.3.4.01</td>
</tr>
</tbody>
</table>
</form></div></div>
</body>
</html>

resskin.html

スレッドテーマ:ブログパーツ:ブログ

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

Ads by Google