| TOP> Motto JavaScript> サンプル集> カウンター画像をテキストに変更する |
| COUNTER TEXT CHANGE |
|
あなたは 番目の訪問者です。 このように表示されます(これはTOPページのカウント数です)。 |
|
関連項目⇒ キリゲッターオートJUMP
|
|
CGIをご存知で、自前のカウンターをHPに取り付けている方であればしっていることかと思いますがカウンターの数字表示にはどうしても画像を使わなくてはならないことが多いと思います。もし、テキストで表示を行うとなると、SSIを使用しなくてはならず、こうなってくるとテキスト表示を可能にするサーバーは更に限られます。しかし、このスクリプトを使用すれば、SSIの使用が不可であるサーバーにおいてもカウンターをテキスト表示させることが可能になります。ただし、データバインドを使用しているため、表示されるのはIE5以上に限定されます。カウントはNNユーザーであってもきちんとされています。
ステップ1:カウンターログファイルの確認 まず、カウンターのログファイルをサーバーよりダウンロードしてください。その記述のされ方がどのようになっているかを確認することが必要です。データバインドは半角カンマ区切りで記述されていなくてはなりません。それ以外の文字で区切られている場合で、この機能を使うに当たってはCGIの改変が必要になります。下記にいくつかのログファイルの記述例を書きます。ログファイルをダウンロードし、メモ帳などでそのファイルを開いてください。
ステップ2:既存ソースの書きかえ
この場合、不可能に当たるのは2番目のケースのみです。他の4つような記述がされている場合は全て可能です。 カウンターの貼られているページのソースを見て下さい。おそらく<BODY>〜</BODY>内に
ステップ3:表示するページの編集A. <IMG SRC="count.cgi?a=1"><IMG SRC="count.cgi?a=2"><IMG SRC="count.cgi?a=3"><IMG SRC="count.cgi?a=4"><IMG SRC="count.cgi?a=5"> B. <IMG src="count.cgi?gif"> このような感じで書き込まれているのではないでしょうか? まず、どちらの場合もCGI内で表示する桁数の指定があると思いますが、それらは全て1桁にして構いません(スクリプトによります)。そして、いずれの場合も画像ファイル(通常、0〜9.gifであると思います)は1×1ピクセルの透過画像や背景と同色の画像などにして極力小さい軽い画像にしてしまいます(こうすることで画像読み込みの時間が大幅に縮小されます)。 そして、Aのような場合であれば表示させる桁数もCGI内での設定に合わせ1桁にしてしまいます。 ⇒ <IMG SRC="count.cgi?a=1"> のみ Bのような場合であれば、 ⇒ <IMG src="count.cgi?gif" style="display:none;"> としてしまえば、画像は表示されなくなります。 次に、カウンターを表示させたい位置に下記のように書き足します。
<SCRIPT language="JavaScript"> <!-- var cSize = "12pt"; //カウント数の文字サイズ var cColor = "#000000"; //カウント数の文字色 var countURL = "cgi-bin/count.log"; //カウンターログファイルのURLもしくはパス var countFld = "column4"; //上記にはログファイルの総カウント数の記述されている場所がカンマ区切りのいくつ目かを書いてください。 //ログファイルにカウント数が、12345 とのみかかれている場合は、"column1"と記述します。 /*★★ by JavaScriptはもういらない!?★★★★★★★★★★★★ ★ カウンター表示テキスト変換スクリプト ★ ★ URL http://html-time.com ura@ad.il24.net ★ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/ document.write('<SPAN style="color:'+cColor+';font-size:'+cSize+';"'); document.write('DATASRC="#JavaIraCountData" DATAFLD="'+ countFld +'"'); document.write('></SPAN><OBJECT ID=JavaIraCountData CLASSID="clsid:'); document.write('333C7BC4-460F-11D0-BC04-0080C7055A83"><'); document.write('PARAM NAME="DataURL" VALUE="'+ countURL +'">'); document.write('<PARAM NAME="UseHeader" VALUE="false"></OBJECT>'); //--> </SCRIPT> |