見た目の変更に移る前に、カウンタを設置してみます。現状でブログを見てくれる人は余りいないと思いますが、
少しでも見てくれる人がいると張り合いになります。（いないと落ち込みますが・・・・。（笑））
いつもの通り、「小粋空間」の
カウンタ設置方法
（Top
＞ Movable
Type
＞ テンプレート
＞ カウンタ設置方法）
を参考に進めていきます。
１．カウンタ用スクリプトのダウンロード
Dream Counterのページより dream.lzh
または dream.zip
をダウンロードします。ダウンロード後、解凍すると下記のファイルが表示されます。← 原文そのまま！！
dream.cgi
drinit.cgi
drmgr.cgi
gifcat.pl
index.dat
ダウンロードする場所が判り難いかも！
？ 青○印の所です。
設置の方法は、ここでも詳しく書いてありますが、MovableTypeに対する説明では
「小粋空間」の方がわかり易いかも。
２．カウンタ素材のダウンロード
このカウンタには表示するためのカウンタ素材（0～9までの画像ファイル）
が添付されていませんので、
素材をダウンロードする必要があります。
やり方が分からない方はとりあえず下記のカウンタ画像をお使いください。← 原文そのまま！！
下の
couter.zip
に上記のカウンタ画像が入っていますのでクリックしてダウンロードし、解凍してください。
couter.zip
このカウンタ画像は「イの葉」が使っているもので、この目立たない感じが好きです。
３．設定ファイルの修正
dream.cgi
および drmgr.cgi
をWzエディタで開いて、
1行目の
#!/usr/local/bin/perl
を
#!/usr/bin/perl
に変更します。
「データベースの設定」で話したように、perlのパスですね。
下の青○印部分です。
また、ここは、 mt.cgi
の 1行目と同じ内容ともいえます。
（といっても -w
を付与する必要はありません）。
また drinit.cgi
で下記の設定をしておくと良いでしょう。
$ip_chk = 1;
これは同一IPアドレスからのアクセスを重複カウントしない設定です。
その他の設定については公式サイトの説明を参照ください。
４．ファイルのアップロード
１項と２項のファイルをアップロードします。アップロードするフォルダはブログの下のフォルダとします。「イの葉」を例にすると、
「www.inohajp/blog/counter」
とします。各ファイルの配置とアクセス権は下記のようにしてください（上記サイトからの引用）。
以下の4つのファイルを
「www.inohajp/blog/counter」
にアップロードします。その後、各ファイルの属性を[ ]内の値に変更します。
www.inohajp/blog/counter/dream.cgi [755]
www.inohajp/blog/counter/drmgr.cgi [755]
www.inohajp/blog/counter/drinit.cgi
[644]
www.inohajp/blog/counter/gifcat.pl [644]
「www.inohajp/blog/counter」
の下に「data」
と「lock」
と「gif1」
フォルダをつくり、属性を[ ]内の値に変更します。
ファイル「index.dat」
を「data」
フォルダにアップロードし、属性を[666]に ２．
の画像ファイル10個
（０から９）を「images」
フォルダにアップロードします。
www.inohajp/blog/counter/count/data [755]
/index.dat [666]
←
カウンタ値を保存するファイル
www.inohajp/blog/counter/lock [755]
/
www.inohajp/blog/counter/images[755]/gif1/0.gif
… 9.gif
←
カウンタ画像
gif1
および lock
ディレクトリの名称は変更しないでください。lock
ディレクトリは作成のみです。
また、フォルダを作成すると属性[755]に初期値でなります。
MovableTypeに設定する前に、
カウンターが動くか確かめましょう。
IEのアドレスに
「http://www.inoha.jp/blog/counter/dream.cgi?id=index」
と入れてみてカウンターが表示されれば成功です。
５．テンプレートの設定
テンプレートに下記のタグを追加します。
<img
src="<$MTBlogURL$>counter/dream.cgi?id=index"
alt="カウンタ"
/>
<$MTBlogURL$>はMovableType特有のタグで、
ブログを公開しているURLを出力します。
すなわち、
<img
src="http://www.inoha.jp/blog/counter/dream.cgi?id=index"
alt="カウンタ"
/>
と同じになります。
「小粋空間」の公開テンプレートでは、MovableTypeをインストールしたフォルダにカウンタをアップロードしているので、
<$MTCGIPath$>としています。
公開テンプレートであれば下記の部分を変更します。（<div
class="side-counter">とありますが、
スタイルシートにside-counterはありません、
<div
class="counter">があるだけです。
）
<!--
カウンタ -->
<div class="sidetitle">
Counter
</div>
<div class="counter">
<img
src="<$MTBlogURL$>counter/dream.cgi?id=index"
alt="カウンタ"
/>
</div>
追加したら保存・再構築してください。これで正常に表示されればOKです。
ちなみに、「イの葉」では目立たないように、メインページ（index.html）
の最後 </html> の1行前に入れました。
これで、欄外に表示しているようになります。この場合、左カラムの中にある、<!--
カウンタ -->から数えて6行目の</div>
までを削除かコメントアウトしてくださいね。
</div><!-- /box -->
</body>
<div class="counter">
<img
src="<$MTBlogURL$>counter/dream.cgi?id=index"
alt="カウンタ"
/>
</div>
</html>
として、スタイルシートを
/*
カウンター */
.counter {
margin: 0px
0px 0px;
padding-right: 8px;
background:
36414d;
text-align:
right;
font-size:
9px;
}
に変えています。「text-align:
right;」
にすることにより、右下に表示しています。
こんな感じになります。
