無料でホームページ素材を提供しています。

Web サイト

ホーム	掲示板	ブログ	FAQ	お問い合わせ

新着情報機能

iframeなどで新着情報を表示しているのをよく見かけますが少し動作が重くなりがちですし、 無料サーバーの場合は強制広告が入ります。 また、避けたいのに検索ロボットに登録される可能性もあります。

ここで紹介するプログラムを使うと、強制広告を免れる事もできますし、 検索ロボットにiframe内ページを登録される事がなくなります。（読まれる事はあるかも知れません。）

サンプル

この例では、このホームページで実際に使っているものを採用していますので、 ソースと少し異なります。

ソース

外部JS内ソース

1. 新たにJSファイルを作成し、ここではファイル名をupdate.jsとします。
2. ファイル内に外部JSソースをコピーする。
3. 新着内容を、tbl[x]の'〜'内に入力する。記事は改行しない事。増やしたい場合はtbl[x]のxを大きい数字にして追加して下さい。
4. テーブルのセル色を変えたい場合は、tblcolor[x]の'〜'内を変更する。

tblcolor=new Array(); tblcolor[0]='#FF9999';//セルの色1 tblcolor[1]='#99FFFF';//セルの色2 tbl=new Array(); tbl[1]='【2006.01.24】<a href="index.html">トップページ</a>を修正。'; tbl[0]='【2006.01.23】<a href="index.html">トップページ</a>をリニューアル。'; document.write('<table border="0" width="100%">'); for(i in tbl){ document.write('<tr><td bgcolor="',tblcolor[i%2],'">',tbl[i],"</td></tr>"); } document.write('</table>');

body内ソース

1. 新着情報を表示したい所にHTMLソースをコピーする。
2. 表示枠のサイズを変えたい場合は、height:とwidth:を変更する。
3. 閲覧者のブラウザー設定によって動作しなかった時の注意書きを変えたい場合は、 <noscript>〜</noscript>内を変更する。

<div style="height:120px; width:100%; overflow-y:scroll;"> <script type="text/javascript" src="update.js"></script> <noscript>JavaScriptをOnにしないと、ここを見る事はできません。</noscript> </div>

《もくじへ│▲このページのトップへ

グラフィック素材
HTMLとJavaScript素材
資料
おすすめランキング
HTML辞典
JavaScript辞典
便利情報
ホームページ運営講座
ホームページ用語集
リンク

│ホーム │FAQ │動作環境について │注意事項 │素材と資料の使い方 │

Copyright©2004-2018 無料ホームページ素材倉庫 All rights reserved.