たま日記

たま日記で行なってるアクセスカウンタ表示の方法のまとめです。

選択するスクリプト

Web Analyze

スクリプトを設置するディレクトリ

diary.cgi があるディレクトリに解凍して出来たフォルダごとUPする

解析タグ貼り付け

解析タグの位置

/skin/footer.htm ファイルの </address> タグの直後

解析タグ見本

<script type="text/javascript" src="${INFO_URL}access.js"></script>
<noscript>
<p class="count"><img src="${INFO_URL}analyze/analyze.cgi" alt="" width="1" height="1" /></p>
</noscript>

参照する外部JSファイル

ファイル名

access.js

エンコード

UTF-8N

設置ディレクトリ

diary.cgi があるディレクトリ

記述内容

document.write(
'<p class="count"><img src="http://www.your.page.addr/analyze/analyze.cgi?' + screen.width + 'x' + screen.height + '&amp;' + screen.colorDepth + '&amp;' + document.referrer + '" alt="" width="1" height="1" /></p>\n'
);

解析タグでの表示の崩れを無くすcssの追加記述

/skin/common.css の最後に追加

.count {
 position: absolute;
 left: -1px;
 width: 1px;
 top: 0px
}

表示用JSファイル作成のために追加記述するファイルと方法

/analyze/analyze.cgi

238行目付近の my $script_ins = new webliberty::Script; 直後に挿入（1行に直して使用）

my $tag = "\t<div class=\"access\">\n
 \t\t<h2>アクセスカウンタ</h2>\n
 \t\t<dl>\n
 \t\t\t<dt>累計</dt>\n
 \t\t\t<dd>$count</dd>\n
 \t\t</dl>\n
 \t\t<dl>\n
 \t\t\t<dt>今日</dt>\n
 \t\t\t<dd>$today</dd>\n
 \t\t</dl>\n
 \t\t<dl>\n
 \t\t\t<dt>昨日</dt>\n
 \t\t\t<dd>$yesterday</dd>\n
 \t\t</dl>\n
 \t\t<ul>\n
 \t\t\t<li><a href=\"http://www.your.page.addr/analyze/admin.cgi\">アクセス解析</a></li>\n
 \t\t</ul>\n
 \t</div>\n";

270行目付近の return; の直前

($flag, $message) = $script_ins->create_jscript(
 file=> $init->{js_counter_file},
 contents => $tag
 );
 if (!$flag) {
 die $message;
}

/analyze/init.cgi

100行目付近の「アクセスカウンタの設定」内

#カウンタータグを書き出すJSファイル
$init->{js_counter_file} = './counter.js';

アクセスカウンタを表示

表示タグを挿入

タグの挿入位置

/skin/navigation.htm 内の、表示させたい位置に一番近く、かつ、確実に表示させる機能の <!--SKIN_○○_START-->～<!--SKIN_○○_END--> の中

タグの見本

<script type="text/javascript" src="${INFO_URL}analyze/counter.js">
</script>

スタイルシート /skin/common.css の記述

アクセスカウンタの整形

ナビゲーション関連の中（3カラム右側に表示させる場合はインフォメーション;その場合はnavigationをinfmationに変える）

div#navigation.access {
 margin-right: 15px;
 margin-bottom: 10px;
 padding-bottom: 20px;
 border: 1px solid #99CC99;
 text-align: center;
 position: static;
}
div#navigation.access li {
 margin-left:10px;
}
div#navigation.access dt {
 display: inline;
 margin-right: 10px;
}
div#navigation.access dd {
 display: inline;
}

IE特有のズレが起きた場合の対処(表示させなくする）

headerの詳細定義の直前

div#container .access {
 position: absolute;
 left: -200px;
 top: 0px;
}

以上、理由等は
Web Diary Professionalでアクセスカウンタを表示
Web Diary Professionalでアクセスカウンタを表示2
をご参照ください。