.Mac
テキストカウンター
.Mac
カウンターの使い道は何もグラフィカルカウンターだけではない。テキストカウンターだってちゃんとできるのだ。
ここのところ
iBlog
カスタマイズガイド
の執筆でこっちのネタを考える余裕がなかったが、実はこの文書にも見えないがカウンターを付けている。これは
.Mac
カウンタ徹底カスタマイズ
で紹介した見えないカウンタなのだが、こそこそやっているようで少し嫌になってきた。かといってカウンターの画像をここに貼付けるのも嫌だし...というわけでテキストカウンターを作ってみた。後で入れるつもりだ。
#
カウンターを付けないという選択肢はないのか
>> 自分
# ない!
だってどれくらい参照しているか見たいんだもん。
なんたってテキストだから
.Mac
カウンタを早く描画する
で紹介したカウンターよりももっと早く表示される。さり気なくカウンターを入れられる。スタイルシートでフォントや色も自由気ままに変えられて画像を作る必要もない。テキストカウンターって凄いじゃないか!
(後から注)「早く表示される」は間違い。「早く表示できる」が正確。下に例示したサンプルでは早く表示する工夫をしていないから。
.Mac
カウンタを速く描画する
でやった工夫をテキストカウンタに応用すればもっと速くなる。
最初にサンプルを見てもらおう。サンプルはここにある。
http://homepage.mac.com/yuji_okamura/counter/Text/index.html
ここで使用してる
JavaScript ファイルは
http://homepage.mac.com/yuji_okamura/counter/Text/TextCounter.js
だ。
さて、テキストカウンターを使用する方法はこうだ。上の
TextCounter.js
をダウンロードし、自分のサイトの適当なところに置き、これの
URL を仮に http://homepage.mac.com/yourName/TextCounter.js
としておこう。そして次のようにテキストカウンターを入れたい
HTML
ファイルを書こう。赤はあなたの環境合わせて書き換えるところで、青はあなたの好みで書き換えるところだ。
...
<script type="text/javascript" src="/i/chp/TKCounter.js"></script>
<script type="text/javascript" src="
/yourName/TextCounter.js"></script>
<script type="text/javascript">
<!--
counterUser = 'yuji_okamura';
counterPage = '55';
window.onload = writeTextCounter;
// -->
</script>
</head>
<body>
...
<span id="CounterDiv" name="CounterDiv"><img src="/WebObjects/Counter.woa/wa/image?user=yuji_okamura&page=55" alt="?" width="0" height="0" border="0"></span>
...
※青いところは img
要素の alt
属性の中身。小さいからわかりにくい。
img
はよそにやって alt
属性は空にしておき、代わりに何か文字列を入れて、クッキーが禁止されているブラウザなどでカウンターを表示できないときの代替文字とするのもよいだろう。
Posted: 18:09
|
Comment
|
Trackback
以下、類似エントリです。