お知らせボード
アイデア次第お知らせボード
●アイデア次第と名を付けたのは、javaScriptで実現している部分は文字の入れ替えだけです
周りのテーブルは普通のタグつけで実現させました、と言う事は一行にも出来るし
複数行の文章も書けます、画像も自由に貼れますし、勿論LINKも設定できます☆
TOPページで簡易リンク集としても使えますし、一行広告を順番に出すって事も出来ます
まさに!!アイデア次第です。
●ページタグ構成
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<title>小技:hennge</title>
<script type="text/javascript">
<!--
syoki = 0;
var coment = new Array();
coment[0] = "<br><font size=2>小技_henngeです☆</font>";
<!--この行は↓改行なし!一行で表現して下さい-->
coment[1] = "<font size=2>誰でも解るHomePage作成講座<br>
<a href='http://www.j-ns.com/freehomepage/index.html'>http://www.j-ns.com/freehomepage/index.html</a><br>今時のHP作り!!<br><a
href='http://www.y-kazu.com/'>http://www.y-kazu.com/</a></font>";
<!--↑ここまで-->
coment[2] = "<br><font size=2>小技メールマガジン 第三段!!</font>";
coment[3] = "<br><font size=2>画像やリンクも貼れます</font><br><a
href='../../index.htm'><img src='../../img/imadoki.gif'></a>";
coment[4] = "<br><font size=2>勿論フォントサイズや色も自在</font>";
coment[5] = "<br><font color=#ff0000 size=2>勿論フォントサイズや色も自在</font>";
function hennge() {
kouka = document.all("go");
kouka.innerHTML = coment[syoki];
if(syoki < coment.length-1){
syoki++;
}else{
syoki = 0;
}
}
setInterval("hennge()",2000);
//-->
</SCRIPT>
</head>
<body>
<div align="center">
<center><table border="3"
bordercolorlight="#0000FF"
bordercolordark="#000080"><tr><td>
<p align="center"><font
size="2"
color="#000080">アイデア次第お知らせボード</font>
<table border="1"
width="200"
bordercolorlight="#000080"
bordercolordark="#000080"
height="100"
cellspacing="0">
<tr>
<td width="100%"
valign="middle">
<p align="center"><span
id="go"
style="width:230px;height:50px">
</span>
</p>
</td>
</tr>
</table></center></tr></table>
</div>
</body>
</html>
さて、今回のポイントは出現させるコメントは無限に増やす事が出来る点です!
基本的なメッセージ設定個所は以下のようになっています。/p>
coment[0] = "このダブルフォーテーションの間にメッセージを入れます";
この [0]の数字を増やしてメッセージを加えていけばOKです☆
メッセージには基本的なタグが使用できます、フォント・改行・リンク・画像等
使用できないのはテーブルや水平線等です。
setInterval("hennge()",2000); の2000の個所が切り替わる時間です、現在約2秒です 3000なら3秒
これでSCRIPT内の設定は終了です、後は表示部 body の個所です
メッセージを表示させる個所は<span
id="go"
style="width:230px;height:50px">
</span>この個所です、最も重要なのはid="go"です、これが無いとエラーになります
そして表示領域を style="width:230px;height:50px" ここで指定します
後にテーブルと組み合わせて表示させる場合はテーブルのサイズと同じサイズにすれば
綺麗に表示させる事が可能です。
●使用タグ説明
<table>〜</table> テーブル本体のタグです
<tr>〜</tr> 段落区切りのタグです、この中に書かれた物は全て一段落で処理
<td>〜</td> セル構築のタグです、この中が一セルとなります
<p> 段落のタグ
<br> 改行タグ
<div>〜</div> このタグで挟まれた領域を一まとめと定義するタグ(ブロック要素)適用後は前後に自動で改行が入る
<span>〜</span> このタグで挟まれた領域を一まとめと定義するタグ(インライン要素)適用後の前後には改行が入れない
<center> センターリングのタグです
上記のタグに付属する属性の説明は省かせて頂きます、興味がありましたら
検索エンジンで HTML ⇒ 各タグ(属性) と検索して見て下さい。