--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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><!-- Copyright (c) usamo All rights reserved.//-->
<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">
<!--
function show_hide(id) {
if (! document.getElementById) return;
if (document.getElementById(id).style.display != "block")
document.getElementById(id).style.display = "block";
else
document.getElementById(id).style.display = "none";
}
// -->
</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>
<!--cut-->
<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>
<!--cut-->
<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<!--s--> url<!--s--></td>
<td class="a" align="right"><a href="resinput">RES</a></td>
</tr>
<tr>
<td align="center" colspan="2">img<!--s--></td>
</tr>
<tr>
<td colspan="2"><font color="color<!--s-->">comment<!--s--></font></td>
</tr>
<tr>
<td colspan="2" align="right">No.no<!--s--> date<!--s--></td>
</tr>
</tbody>
</table>
<!--cut-->
<hr size="1" width="100%" color="#666666">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tbody>
<tr>
<td colspan="2">resname<!--s--> resurl<!--s--></td>
</tr>
<tr>
<td colspan="2" align="center">resimg<!--s--></td>
</tr>
<tr>
<td colspan="2"><font color="rescolor<!--s-->">rescomment<!--s--></font></td>
</tr>
<tr>
<td colspan="2" align="right">No.resno<!--s--> resdate<!--s--></td>
</tr>
</tbody>
</table>
<!--cut--></td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<!--cut-->
<table border="0" width="140">
<tbody>
<tr>
<td align="center">
<br><div align="center"><font size="1">footmsg<!--s--><br>
<b>back<!--s--></b></a> <a href="clever.cgi?mode=admin" title="MASTER ONLY">**</a> <b>next<!--s--></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



人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m



スポンサーサイト

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

メイン

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

トラックバックURL


トラックバック

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

コメント

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

コメント

yozoさん、こんにちは♪(*゚▽゚)ノ
おぉぉ。実は昨日まゆびもやろうとして失敗したのですー。。。orz
yozoさんの記事アップされてて嬉しいですー。
ありがとうございます。<(_ _)>
後ほどこちらを参考にして挑戦させていただきます♪(o^-^o) ウフッ

コメント

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

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

コメント

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

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

コメント

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

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

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

コメント

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

コメント

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

コメント

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

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

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

コメント

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

コメント

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

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

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

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

コメント

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

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

コメント

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

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

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

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

コメント

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

コメント

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

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

コメント

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

コメント

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

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

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

>わかんなくなったら、また質問に来るからねー・・・。
いつでもどうぞ。遠慮なく質問してくださいね。d(@^∇゚)/ファイトッ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。