CLEVER BBSのスキン改良＜投稿及び検索フォームの表示／非表示ボタン設置＞ yozoの気が向いたと記2.0

2006年08月12日

CLEVER BBSのスキン改良＜投稿及び検索フォームの表示／非表示ボタン設置＞

CLEVER BBSに『投稿及び検索フォームの表示／非表示ボタン』を設置しました。その手順を備忘録として記事にします。この記事はusamoスキンを使用した場合の設置法となっていますが、たいていのスキンでも同様に設定できます。
　また、このスキンカスタマイズに先立ちまして、usamoスキン用のファイルcleverskin.html及びresskin.htmlの修正をしてあります。　詳細はコチラ　お手数かけますが、usamoスキン使用のみなさんは修正くださいますようにお願いします。
　なお、この記事のソースをそのまま使用して、必要な修正をしてくださっても構いません。ご使用に際しては、この記事にコメントくださるか、トラックバックしていただけますようにお願いします。
　これは、不具合があったときに、yozoから連絡できるようにさせていただくためですので、ご協力お願いします。m(_ _)m

このCLEVER BBSのスキン改造は、お友達のKOROPPYの本棚のKOROPPYさんの記事CLEVER BBSの投稿フォームをデフォルトで非表示に変更を参考にさせていただきました。
　また、使用したJavaScriptのコードはたつをの ChangeLogのたつをさんの記事Show/Hide Detailで紹介されています。
　KOROPPYさん、たつをさん、本当にありがとーございまっす　m(_ _)m

投稿及び検索フォームの表示／非表示ボタン設置のしかた

cleverskin.htmlのみを変更します。まずcleverskin.htmlをファイルごとコピーして、バックアップしておきましょう。それから、エディタでcleverskin.htmlを開いて、下記のようにコードを追加して、上書きアップロードすれば完了です。詳しくはKOROPPYさんの記事CLEVER BBSの投稿フォームをデフォルトで非表示に変更を見てくださいね。記事はコチラ

作業のポイント

JavaScriptのコードを、<head>?</head>に追加します。

表示／非表示となる<form>?</form>部分を<div id="◎☆△□▽" style="display:none">?</div>で囲みます。

ボタンとなるリンクを、使いやすい場所に作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BBS</title>
<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">
<script type="text/javascript">

</script>
</head>
<body text="#666666" link="#666666" vlink="#666666" alink="#666666">
<div align="center"><h4><font color="#007495">yozo＆usamo BBS</font></h4>
《<a href="javascript:show_hide('searchform')">検索</a>》《<a href="./clever.cgi" onClick=window.open("./clever.cgi","_self")>リセット</a>》《<a href="javascript:show_hide('postform')">書込</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">
<table border="0" cellpadding="2" cellspacing="0" width="140">
<tbody>
<tr>
<td colspan="2" align="right" height="20" valign="top">お気軽にどうぞ♪｜ <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');">別窓</a></td>
</tr>
<tr>
<td colspan="2" align="right">Name <input type="text" name="name" size="21"></td>
</tr>
<tr>
<td colspan="2" align="right">Url <input type="text" name="url" size="23"></td>
</tr>
<tr>
<td colspan="2" align="right">File <input type="file" name="upfile" size="15"></td>
</tr>
<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" cols="23" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked style="border-style : none ;"><font color="#999999" size="2">+</font><input type="radio" name="color" value="#8cc68c" style="border-style : none ;"><font color="#8cc68c" size="2">+</font><input type="radio" name="color" value="#7da2b7" style="border-style : none ;"><font color="#7da2b7" size="2">+</font><input type="radio" name="color" value="#ffa851" style="border-style : none ;"><font color="#ffa851" size="2">+</font></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;"><font color="#ffb5b5" size="2">+</font><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;"><font color="#cd5c5c" size="2">+</font><input type="radio" name="color" value="#916F6F" style="border-style : none ;"><font color="#916F6F" size="2">+</font><input type="radio" name="color" value="#EAAF00" style="border-style : none ;"><font color="#EAAF00" size="2">+</font></td>
</tr>
<tr>
<td align="right" colspan="2">　 Pass <input type="password" name="pwd" size="8" maxlength="8"> <input type="submit" value="Send"></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">
<table border="0" cellpadding="2" cellspacing="0" width="140"><tbody>
<tr>
<td colspan="2"><font color="#FFFFFF" size="1">検索</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font size="1">Search </font> <input type=text name="word" size="17"></td>
</tr>
<tr>
<td colspan="2" align="right"><input type=submit value="検索する"> <input type=button value="リセット" onClick=window.open("./clever.cgi","_self")></td>
</tr>
<tr>
<td colspan="2" align="right"><input type=radio name="cond" value="and">
<font size="1">AND</font>
<input type=radio name="cond" value="or">
<font size="1">OR</font></td>
</tr></tbody></table></form></div>
<br>

<table border="0" cellpadding="2" width="140" cellspacing="0" style="border : 1px solid #666666;">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="2" border="0" width="100%">
<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"><font color="color">comment</font></td>
</tr>
<tr>
<td colspan="2" align="right">No.no date</td>
</tr>
</tbody>
</table>

<hr size="1" width="100%" color="#666666">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tbody>
<tr>
<td colspan="2">resname resurl</td>
</tr>
<tr>
<td colspan="2" align="center">resimg</td>
</tr>
<tr>
<td colspan="2"><font color="rescolor">rescomment</font></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno resdate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>

<table border="0" width="140">
<tbody>
<tr>
<td align="center">
<br><div align="center"><font size="1">footmsg<br>
<b>back</b></a>　<a href="clever.cgi?mode=admin" title="MASTER ONLY">**</a>　<b>next</b></a><br><br>
以下のフォームから自分の投稿記事を削除することができます<br></div>
<form action="clever.cgi" method="POST"><input type="hidden" name="mode" value="usr_del">No. <input type="text" name="no" size="3">　Pass <input type="password" name="pwd" size="4" maxlength="8"><br><input type="submit" value="OK"></form>
</font>
<a href="http://solodesign.jp/" target="_blank" title="CGI">clever bbs</a>
<br>designed by <a href="http://usamo.seesaa.net/" target="_blank" title="DESIGN">usamo</a>
<br>Customized by <a href="http://yozoblog.exblog.jp/" target="_blank" title="DESIGN">yozo</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

<yozoからのお願い>

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

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

スポンサーサイト

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

メイン

≪New BlogPet「うさも」の背景紹介　夏休み | Top | 8月中のみ高速道路のガソリン給油がお得？ Old≫

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ miniBBSの投稿及び検索窓を隠しました from ととろのおもちゃ箱
先日、悪戦苦闘のうえでお友だちの手助けのもと、やっとで設置をしました「BlogPetBSS [Read More]

ご紹介ありがとうございました。
まゆびさんとととろさんが解説記事を待っていらっしゃったので、
きっと喜ばれると思います(*^m^*)

Posted by KOROPPY at 2006.08.12 16:19 | edit

yozoさん、こんにちは♪(*ﾟ▽ﾟ)ﾉ
おぉぉ。実は昨日まゆびもやろうとして失敗したのですー。。。ｏｒｚ
yozoさんの記事アップされてて嬉しいですー。
ありがとうございます。＜(＿＿)＞
後ほどこちらを参考にして挑戦させていただきます♪(o^-^o) ｳﾌｯ

Posted by まゆび at 2006.08.12 16:38 | edit

＞KOROPPYさん、こんにちはー♪
トラバ返してくださってありがとーございまっす♪m(_ _)m
とても役に立ちました。おかげ様でスキンの修正とカスタマイズがさっとできましたよ。こちらこそ大感謝ですよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

＞まゆびさんとととろさんが解説記事を待っていらっしゃったので、
＞きっと喜ばれると思います(*^m^*)
あはは・・・間に合いましたでしょうか？
フォローよろしくお願いしまっすm(_ _)m

Posted by KOROPPYさんへ at 2006.08.12 16:43 | edit

おおっ！早い！
実はまゆびさま同様昨夜と今日のお昼間挑戦していたのですが、どうにもこうにも思うように行かなかったのです。
何度書き換え、思いっきりあそこやここに突っ込んだことか！＞爆
すごい有様の表示の列挙でしたわ。
あそこかも、ここかも、この辺を囲って・・・ヽ(*´▽)ノオテアゲー♪
今夜にでも再挑戦、っていうか、こちらをコピペさせていただきます(笑)

yozoさま、ありがとうございました。KOROPPYさま、心のつぶやきを拾ってくださってありがとう(*^^*)

Posted by ととろ at 2006.08.12 16:51 | edit

＞まゆびさん、こんにちはー♪

＞おぉぉ。実は昨日まゆびもやろうとして失敗したのですー。。。ｏｒｚ
あららら・・・そうだったのですか？もしかしたらusamoスキンが対応してなかったのかもしれませんね。修正してありますので、お手数ですが改正してくださいませ。m(_ _)m

＞後ほどこちらを参考にして挑戦させていただきます♪(o^-^o) ｳﾌｯ
是非どうぞ。とても簡単ですよ。三色の色の部分だけをさわればいいのですからね。ただ、ご存知だと思いますが、レイアウトや見栄えについては、yozoは全然やってませんから、ご自由にカスタマイズしてくださいね。m(_ _)m

Posted by まゆびさんへ at 2006.08.12 16:51 | edit

＞ととろさん、こんにちはー♪
お知らせよりも早くコメントありがとーございまっす♪m(_ _)m
(ﾟｰﾟ;Aｱｾｱｾです。KOROPPYさんのカスタマイズは、divタグで区切りをつけるものですから、usamoスキンでは、はじめの２つのformをまとめて、区切らないと真っ白になったりするはずです。修正版なら、バッチリ対応できていますので、
そちらに変更するか、仰るとおりコピペで、yozo＆usamoの部分だけ変更してくださったら、上書きしてアップロードでケリですよ。後は好きなときにご自由にいじれば、HTMLやCSSの勉強になると思います。簡単なソースですからね。
遊んでみてくださいね。がんばってくださいね。d(@^∇ﾟ)/ﾌｧｲﾄｯ♪

Posted by ととろさんへ at 2006.08.12 16:59 | edit

yozoさん(｡･ω･｡)ﾉｺﾝﾁｬ☆･ﾟ:*:ﾟ
おぉぉ・・・・すごい・・・
先日KOROPPYさんのところに画像付き掲示板があったのは
これだったのですねー。
こういうのもいいなぁなんて眺めておりました（笑
それにしても、毎度ながらすごいですよね。
カスタマイズが自分でできちゃうって尊敬です。敬礼(｡･ω･｡)ゞピッ♪
このページをブックマークしておこう～っと（笑

Posted by モンビッケ at 2006.08.12 18:12 | edit

＞モンビッケさん、こんばんはー♪

＞おぉぉ・・・・すごい・・・先日KOROPPYさんのところに
＞画像付き掲示板があったのはこれだったのですねー。
そうですよ。ここの右サイドにあるのと同じですね。KOROPPYさんのは
とてもおしゃれですけど・・・ここは・・・シンプルでしょ(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
なんせusamoスキンですからねΨ(｀∀´)Ψヶヶヶ

＞カスタマイズが自分でできちゃうって尊敬です。敬礼(｡･ω･｡)ゞピッ♪
＞このページをブックマークしておこう～っと（笑
ありがとーございまっす♪たくさん、みなさんからお借りしてますからね。yozoオリジナルというものでもないかもしれませんが、yozoができたことは、他の方でもできるようにと記事に残すようにしたいと思ってます。(^○^)

Posted by モンビッケさん at 2006.08.12 19:09 | edit

yozoさま、いろいろ頑張ってみましたが、どうも元を変更するのはよく分からなかったので、お言葉通り、コピペで変更しました。やはり自分にはちょっと難しいです。
おかげさまで画像がたっぷり楽しめるようになりました。どうもありがとうございました。これからもどうぞよろしく。
変更のお知らせにこちらへのリンクをさせて頂きました。トラバも入れさせていただきましたのでどうぞよろしくお願いします。

Posted by ととろ at 2006.08.12 22:14 | edit

＞ととろさん、こんばんはー♪
トラバありがとーございまっす♪こちらからも
返しトラバさせていただきました。m(_ _)m

＞yozoさま、いろいろ頑張ってみましたが、どうも元を変更するのは
＞よく分からなかったので、お言葉通り、コピペで変更しました。
（￣ﾍ￣）ｳｰﾝ修正はyozoのミスのようなものですからね。お気になさらなくてもいいのですが、どうしてそのように直しているのか、という説明くらいはできますので、お暇なときにでも聞いてくださいませ　m(_ _)m

＞やはり自分にはちょっと難しいです。
あはは・・・ソースを見るのは、うっとおしいですけど、すぐに見慣れてきますよ。
あるきっかけで、わかりだしたらバラバラって感じで理解できるようになるものかもしれませんね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

＞おかげさまで画像がたっぷり楽しめるようになりました。
お役に立ててなによりです。こちらこそよろしくお願いしますね　m(_ _)m

Posted by ととろさんへ at 2006.08.12 23:49 | edit

yozoさん、こんばんは！
お知らせメッセージ、ありがとうございました♪
こちらの記事を参考に早速変更いたしましたよ☆
別窓リンクが書込みページに行ってしまったので、そのあたりちょぴっと加筆させていただきました。
ものすごく使い勝手がさらによくなりましたよねっ

本当にいつも大変お世話になってます･･･大感謝♪

Posted by mio at 2006.08.13 00:10 | edit

mioさん、おはよーございまっす♪

＞お知らせメッセージ、ありがとうございました♪
＞こちらの記事を参考に早速変更いたしましたよ☆
こちらこそ、お手数かけました。m(_ _)m
うまく変更できたようですね。(*^-ﾟ)vｨｪｨ♪

＞別窓リンクが書込みページに行ってしまったので、
＞そのあたりちょぴっと加筆させていただきました。
お気づきになってくれましたか？usamoスキンはrss.htmlにも一箇所だけ、
リンク先をclever.cgiに変更していただかないと、新しくindexが生成されないうちは、旧のスキンを表示してしまうのですよ。次のカキコがあればだいじょうぶなのですが・・・(^○^)

＞本当にいつも大変お世話になってます･･･大感謝♪
とんでもありませんよ。こちらこそ、いつもフォローしてくださって
ありがとーございまっす♪今後ともよろしくお願いしまっす　m(_ _)m

Posted by mioさんへ at 2006.08.13 07:29 | edit

ｙｏｚｏさんこんにちは～
･･･(*￣-￣)ん～～～・・・ずぅーっと悩んでいるんですが・・・
やっぱり導入してみようかな～～～・・・
ちょっとトライしてみますぅ

Posted by ウッキ at 2006.08.13 13:34 | edit

＞ウッキさん、こんばんはー♪

＞･･･(*￣-￣)ん～～～・・・ずぅーっと悩んでいるんですが・・・
＞やっぱり導入してみようかな～～～・・・ちょっとトライしてみますぅ
やっちゃいますか？広告なしのCGIＯＫのスペースさえあれば、意外と簡単ですよ。もうご存知かと思いますが、コチラの記事を参考にしてくださいね。
及ばずながら応援しますよー♪d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
遠慮なく記事のコメントに質問してくださいね。
過去記事のコメントも随時チェックしてますから、ご安心を！
(もしも忘れたら、掲示板で(;｀O´)oｺﾗｰ! っていってください(^○^) )
http://yozoblog2.blog63.fc2.com/blog-entry-29.html

Posted by ウッキさんへ at 2006.08.13 21:06 | edit

yozoちゃん。こんにちはー。
これってもしかして・・・。掲示板に使っているもののことかしら???（ごめんねー。違っていたら許してねー）全然分からなかったんだけど・・・。読んでみたら・・・。もしかして・・・？って思ったの♪
この掲示板いいよねー♪便利♪
私も新しく、ＦＣ２にしたから、またyozoちゃんの記事で参考にして進めていけるのでとっても安心♪うふふ☆
色々お世話になるかも知れないけど、わかんなくなったら、また質問に来るからねー・・・。
さー、何からはじめよっかなぁー☆
まず、応援クリックだねー♪うふふ☆

Posted by enu at 2006.08.15 09:22 | edit

＞enuちゃん、こんにちはー♪

＞これってもしかして・・・。掲示板に使っているもののことかしら???
正解ですよー♪もっとわかりやすく書かなきゃいけませんね。反省m(_ _)m

＞この掲示板いいよねー♪便利♪
そうでしょ。mini掲示板はブログのアクセサリーにもなるし、
yozoたちが使用しているCLEVER BBSは、画像もUPできますからね。
BlogPet友達同士の交流がますます深まりますよね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
もちろん、他の画像をUPしても全然ＯＫですからね。
ただし、サイズが大きすぎると、全体の表示が崩れちゃうんで
それは困っちゃうかな？　Ψ(｀∀´)Ψヶヶヶ

＞わかんなくなったら、また質問に来るからねー・・・。
いつでもどうぞ。遠慮なく質問してくださいね。d(@^∇ﾟ)/ﾌｧｲﾄｯ♪

Posted by enuちゃん at 2006.08.15 12:28 | edit

yozoの気が向いたと記2.0

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