魔法のｉ−らんどの掲示板用サンプル７
TOP
<![CDATA[
//////////////////////////////////////////////////////////////////////////
/**********************************************************/
/* */
/* JavaScript External file ----- Reconstruction Script */
/* */
/**********************************************************/
//タイトル部分の変更
document.title="Bisoy\'s Room BBS";
//フレームの時に使用
//document.write('<base target="_top">');
/***************************** Beginning of Stylesheet ************************************/
document.write('<style type="text/css">',
//body は記述が多いので３段
'body {scrollbar-base-color:#048;scrollbar-face-color:#048;scrollbar-track-color:#048;scrollbar-arrow-color:#90F;scrollbar-face-color:#048;scrollbar-highlight-color:#048;scrollbar-3dlight-color:#90F;scrollbar-shadow-color:#048;scrollbar-darkshadow-color:#90F;}',
'body {overflow-y:hidden;background-color:#000000;color:#DDD;border-width:3px 3px 3px 3px;border-style:solid solid solid solid;border-color:#777777;font-family:"FKシンボルゴシック","ＭＳ Ｐゴシック",Arial,sans-serif;margin:0;cursor:crosshair;}',
'body {background-image:url(img/wall-58.jpg);background-attachment:fixed;background-repeat:no-repeat;background-position:top;}',
//その他の指定
'hr {border:dotted #CFF;height:2px;}',//掲示板下部の広告部分の水平線（区切り線）の指定
'hr.underline {border:dotted #CCC;height:1px;}',//内側のTABLEの中にある水平線（区切り線）の指定
'input,option,select {background:#048;;color:#FFF;font-size:70%;font-family:Helvetica,Arial,sans-serif;border:dotted #EFF thin;}',
'img {border:0;}',//画像全体の border 無しの指定
//margin-top:4em;margin-bottom:4em;この数値変更で、掲示板のTABLEとTABLEの間の距離が変わります。
'.cen {text-align:center;margin-top:4em;margin-bottom:4em;cursor:url("img/curs.cur"),auto;}',
'.rig {text-align:right;margin-top:4em;margin-bottom:4em;cursor:url("img/curs.cur"),auto;}',
'.lef {text-align:left;margin-top:4em;margin-bottom:4em;cursor:url("img/curs.cur"),auto;}',
//TABLEの外枠の設定 注意：panelの名称は変えないほうがいいです。
//panelの名称を変えると Drag ＆ Drop の JavaScript の記述も変えないと Drag ＆ Drop の機能しません。
//画面の上からの距離top:50px; 画面の左側からの距離left:25px; TABLE枠の大きさ指定 width:70%;height:87%; この数値変更で、TABLEの場所や大きさが決まります。
'.panel {top:45;left:25px;width:70%;height:87%;position:absolute;visibility:visible;z-index:55; }',
// .overview は記述が多いので２段
//overflow-y:scroll;これで、内側のスクロールバーが表示されています。Border の設定
'.overview {overflow-y:scroll;width:100%;height:87%;border-width:15px 15px 15px 15px;border-style: inset inset inset;border-color:#CBF #048 #048 #CBF;}',
// .overview ここの部分は、内側の壁紙設定
'.overview {background-image:url(img/104.jpg);background-attachment:fixed;background-repeat:no-repeat;background-position:top;text-align:left;}',
//
'p.curset {background-color:#047;color:#DFF;border:dotted #90F thin;cursor:move;letter-spacing:.3em;font-weight:bold;font-family:Helvetica,"Times New Roman",Arial,sans-serif;}',
//内側のTABLEの書き込み部分の文字指定等
'td.maintd {width:300px;background-color:#90F;font-family:"Times New Roman",Helvetica,Arial,sans-serif;font-size:95%;font-weight:bold;}',
//通常のリンク指定
'a {font-size:85%;font-weight:bold;font-family:Helvetica,"Times New Roman",Arial,sans-serif;cursor:e-resize;/*cursor:url("curs.cur");*/}',
'a:link {background:transparent;color:#000;text-decoration:none;}',
'a:visited {background:transparent;color:#f60;text-decoration:none;}',
'a:active {background:transparent;color:#9f0;text-decoration:none;}',
'a:hover {background:transparent;color:#f50;text-decoration:none;position:relative;top:0px;left:4px;}',
//ページ上部のリンク部分
'.navitop {background-color:#004488;color:#FFF;top:0px;left:0px;position:absolute;z-index:2;}',
'.navitop ul {padding:0px;margin:0px;}',
'.navitop li {background:transparent;color:#9F0;display:inline;border:dotted #90F thin;}',
'.navitop a {width:155px;height:14px;text-align:center;font-family:Helvetica,"Times New Roman","FKシンボルゴシック","ＭＳ Ｐゴシック",Arial,sans-serif;font-weight:bold;font-size:70%;}',
'.navitop a:link {background-color:#000;color:#AAA;text-decoration:none;}',
'.navitop a:visited {background-color:#000;color:#AAA;text-decoration:none;}',
'.navitop a:active {background-color:#00C;color:#DF0;text-decoration:none;}',
'.navitop a:hover {background-color:#00C;color:#FE9;text-decoration:none;position:relative;top:0px;left:0px;}',
'<\/style>');
/******************************** End of Stylesheet ***************************************/
//ここからページ上部のリンク部分
document.write(
'<div class="navitop"><ul>',
'<li><a href="http://external-file.com/" target="_blank">JavaScript External File<\/a><\/li>',
'<li><a href="http://ww8.tiki.ne.jp/~bladerunner/RelaxationSpace/" target="_blank">RelaxationSpace<\/a><\/li>',
'<li><a href="http://bagongbayani.org/" target="_blank">Bagong Bayani<\/a><\/li>',
'<li><a href="http://ip.tosp.co.jp/i.asp?i=bisoy" target="_blank">Design by bisoy<\/a><\/li>',
'<\/ul><\/div>');
//ここまでページ上部のリンク部分
/*****************ここの部分から、分からない方は、いじらない方がいいです。*****************/
NN = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if (over) {
if (NN) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (NN) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (NN) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
document.write(
'<div id="panel" class="panel" onMouseover="over=true;" onMouseout="over=false;">',
/*****************ここの部分まで、分からない方は、いじらない方がいいです。*****************/
'<p class="curset" title="この BBS は drag \& drop が出来ます。\ マウスホイールボタン押せばくっついてきます。">',
'<strong>Drag \& Drop Custom BBS<\/strong>',
'<\/p>',
'<div class="overview">',
'<div style="margin:2em;" id="bbs">');
function bisoy(){
for(i=0;i<document.links.length;i++){
if(document.links[i].innerText=="[ｹｰﾀｲMode表示]"){
document.links[i].innerHTML="<div style=\"margin-top:5px;margin-right:7em;font-weight:bold\">phone</div>";
}
if(document.links[i].innerText=="My HomePage"){
document.links[i].innerHTML="HomePage";
}
if(document.links[i].innerText=="Delete"){
document.links[i].innerHTML=" <span style=\"color:#0000ff\">★ ★<\/span><br><hr class=\"underline\">";
}
if(document.links[i].innerText=="[0]戻る"){
document.links[i].innerHTML="<img src=\"img/bahay.gif\" width=\"38\" height=\"36\" alt=\"HPに戻る\">";
}
if(document.links[i].innerText=="[1]書く"){
document.links[i].innerHTML="<br><hr>カキコ";
}
if(document.links[i].innerText=="[4]私書箱IDで書く"){
document.links[i].innerHTML="IDでカキコ";
}
if(document.links[i].innerText=="[5]変換言葉にする"){
document.links[i].innerHTML="Change";
}
if(document.links[i].innerText=="[5]ﾉｰﾏﾙ言葉に戻す"){
document.links[i].innerHTML="Normal";
}
if(document.links[i].innerText=="[6]ﾛｸﾞを表示"){
document.links[i].innerHTML="ログ";
}
if(document.links[i].innerText=="[6]ﾛｸﾞを非表示"){
document.links[i].innerHTML="No Log";
}
if(document.links[i].innerText=="ipBookMark"){
document.links[i].innerHTML="ip-B";
}
if(document.links[i].innerText=="R"){
document.links[i].innerHTML="";
}
if(document.links[i].innerText=="次へ"){
document.links[i].innerHTML="NEXT";
}
}
Lucy=bbs.innerHTML;
Jyude=Lucy.replace(/■/g,"<span style=\"color:#0000ff\">■<\/span>");Lucy=Jyude;
//曜日の変更
Jyude=Lucy.replace(/\(+月+\)/g," <span style=\"color:#DFF\">Monday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+火+\)/g," <span style=\"color:#DFF\">Tuesday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+水+\)/g," <span style=\"color:#DFF\">Wednesday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+木+\)/g," <span style=\"color:#DFF\">Thursday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+金+\)/g," <span style=\"color:#DFF\">Friday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+土+\)/g," <span style=\"color:#00F\">Saturday<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/\(+日+\)/g," <span style=\"color:#F50\">Sunday<\/span> ");Lucy=Jyude;
//訪問者の接続機種の文字部分変更
Jyude=Lucy.replace(/Pc/g," <span style=\"color:#EEF;font-size:80%\"><br><hr class=\"underline\">「Computer」<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/i\*/g," <span style=\"color:#EEF;font-size:80%\"><br><hr class=\"underline\">「NTT DoCoMo」<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/j\*/g," <span style=\"color:#EEF;font-size:80%\"><br><hr class=\"underline\">「Vodafone」<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/J\*/g," <span style=\"color:#EEF;font-size:80%\"><br><hr class=\"underline\">「Vodafone」<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/ez/g," <span style=\"color:#EEF;font-size:80%\"><br><hr class=\"underline\">「EZweb」<\/span> ");Lucy=Jyude;
//表示回数部分の変更
//このサンプルの場合、「Write 〜件」っていうのが、表示されるまでは、TABLEに不具合が起きます。
//それが嫌な場合、<table><tr><td style=\"background-color:#048;color:#ffffff;border:dotted #DFF thin;padding:1em\"> この部分と、
//この部分を<\/td><\/tr><\/table> 削除して下さい。
Jyude=Lucy.replace(/Find/g,"<br><table><tr><td style=\"background-color:#048;color:#ffffff;border:dotted #DFF thin;padding:1em\"><span style=\"color:#FFFFCE;font-size:80%\">表\示<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/Write/g,"<span style=\"color:#FFC;font-size:80%\">カキコ数<\/span> ");Lucy=Jyude;
Jyude=Lucy.replace(/回/g," <span style=\"color:#FFC;font-size:80%\">回<\/span>");Lucy=Jyude;
Jyude=Lucy.replace(/\件/g," <span style=\"color:#FFC;font-size:80%\">\件<\/span><\/td><\/tr><\/table>");Lucy=Jyude;
// テスト書き込み数を多く書き込みすれば、
// 「Write 〜件」っていうのが、表示されるようになります。
// 掲示板に「Write 〜件」が、表示されると TABLE の不具合も直ります。
Bayani=Lucy.match(/<HR SIZE=1>/g);
Anna=2;
for(i=0;i<Bayani.length-2;i++){
yan=i%4;
if(i==0){
Jyude=Lucy.replace(/<HR SIZE=1>/,'<div class="cen">'
+'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>'
+'<td><img src="img/90F_ur.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_ul.gif" width="20" height="20"><\/td>'
+'<\/tr><tr>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<td class="maintd">');
Lucy=Jyude;
}
if(yan==1 && i!=(Bayani.length-3)){
Jyude=Lucy.replace(/<HR SIZE=1>/,'<\/td>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<\/tr><tr>'
+'<td><img src="img/90F_dr.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_dl.gif" width="20" height="20"><\/td>'
+'<\/tr><\/tbody><\/table>'
+'<\/div>'
+'<br><br>'
+'<div class="rig">'
+'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>'
+'<td><img src="img/90F_ur.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_ul.gif" width="20" height="20"><\/td>'
+'<\/tr><tr>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<td class="maintd">');
Lucy=Jyude;
}
if(i==Anna && i!=(Bayani.length-3)){
Jyude=Lucy.replace(/<HR SIZE=1>/,'<\/td>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<\/tr><tr>'
+'<td><img src="img/90F_dr.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_dl.gif" width="20" height="20"><\/td>'
+'<\/tr><\/tbody><\/table>'
+'<\/div>'
+'<br><br>'
+'<div class="cen">'
+'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>'
+'<td><img src="img/90F_ur.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_ul.gif" width="20" height="20"><\/td>'
+'<\/tr><tr>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<td class="maintd">');
Lucy=Jyude;
Anna+=2;
}
if(yan==3 && i!=(Bayani.length-3)){
Jyude=Lucy.replace(/<HR SIZE=1>/,'<\/td>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<\/tr><tr>'
+'<td><img src="img/90F_dr.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_dl.gif" width="20" height="20"><\/td>'
+'<\/tr><\/tbody><\/table>'
+'<\/div>'
+'<br><br>'
+'<div class="lef">'
+'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>'
+'<td><img src="img/90F_ur.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_ul.gif" width="20" height="20"><\/td>'
+'<\/tr><tr>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<td class="maintd">');
Lucy=Jyude;
}
}
bbs.innerHTML=Lucy+'<\/td>'
+'<td style="background:#90F" width="20"><img src="img/90F.gif"><\/td>'
+'<\/tr><tr>'
+'<td><img src="img/90F_dr.gif" width="20" height="20"><\/td>'
+'<td style="background:#90F" width="300" height="20"><img src="img/90F.gif"><\/td>'
+'<td><img src="img/90F_dl.gif" width="20" height="20"><\/td>'
+'<\/tr><\/tbody><\/table>'
+'<\/div>'
+'<\/div>';
}
window.onload=bisoy;
//通常のMIDI使用する時
//document.write('<bgsound src="hogehoge_music.mid" loop="infinite">');
//注意：画像やMIDIを魔法のｉ−らんどの掲示板に呼び出す時は、フルパスで記述します。
/*********************************************************************************************
*
* 掲示板の注意書きの見本（配布される方）
*
* このサンプルの掲示板をご利用場合、 掲示板下部に表示される「Write 〜件」っていうのが、
* 表示されるまでは、TABLEに不具合が起きます。
*
* この原因は、JavaScriptで「Find」という文字があった場合、
* JavaScriptで新しく「TABLEを作成し、Findから表示」という記述に変更されるようなっております。
*
* 「Write〜件」という文字があった場合、JavaScriptで、件という文字の後に、
* さきほどの「TABLEを終了する」という記述が挿入されるように、 JavaScriptで改造されています。
*
* 「Write 〜件」っていうのが、表示されませんと、 JavaScriptで、新しくTABLEを作成し、
* そして「TABLEの終了タグ」記述が作成されておらずに、 TABLEデザインが崩れる結果になります。
*
* テスト書き込み数を多く書き込みすれば、
* 「Write 〜件」っていうのが表示されて、TABLE の不具合も直ります。
*
*********************************************************************************************/
]]>
素材（画像等）は、ご利用される素材屋さんより、許可を頂いて下さい。
当サイトから画像等の、素材の持ち帰りは禁止です。
| Contact us at Feedback |
Last Update: 6 / 25 / 2008 17:52:08 JST