アクセスカウンター作り方と素材

アクセスカウンターの作り方について説明したページです。アクセスカウンターの概要、カウンター画像の作り方の例、設置方法の例等について説明しています。又、カウンター画像の素材もダウンロード出来ます。

アクセスカウンターの概要

 アクセスカウンターは下図のように本サイトでも左下(スマートフォンで参照されている場合はページ下)に出ているアクセスがあった数をカウントするツールです。

アクセスカウンター作り方と素材1

 アクセスカウンターは少なくとも以下の機能があります。

・訪問者数のカウント
 これまでの訪問者数合計をカウント。今日、昨日の訪問者、現在の訪問者等、複数のカウントが出来るものもあります。
・カウントの表示
 カウントをテキスト、画像、グラフのいずれかで表示。組み合わせで表示するものもあります。

 この他にもアクセス解析機能が付いたもの等もあります。

 自分で作った画像を使えるカウンターを利用するとオリジナルなアクセスカウンターが作れます。

アクセスカウンターの検討

 アクセスカウンターはサーバーサイドのプログラムであるCGI等が動作する必要があります。有料レンタルサーバーであれば殆ど動作すると思いますが、無料レンタルサーバーやプロバイダーの無料サービスの場合は使えるか確認が必要です。

 アクセスカウンターは自分でCGI等で作る事も出来ますが、インターネットからCGI等をダウンロードして使う事も可能です。ダウンロードする場合は作者のホームページ等で設置方法を確認します。いずれにしてもCGI等を動作させる場合はパーミッションをミスし易いので注意して下さい。

 レンタルサーバーのサービスによってはアクセスカウンターが最初から用意されている場合があり、この場合は設置が簡単です。

 又、FC2のように無料でアクセスカウンターを利用出来るサービスもあります。

 この中から、訪問者の合計だけを表示出来ればいいのか、今日・昨日、現在の訪問者もカウントしたいか、テキストで表示するか、画像で表示するか等、自分の好みにあった機能を持つサービス、又はCGI等を選択します。

 参考に、「無料レンタルサーバー比較」や「格安レンタルサーバー比較」でご紹介したサーバーの内、アクセスカウンターがデフォルトで用意されているもの、及び無料アクセスカウンターサービスのカウンター機能の比較を示します。

【アクセスカウンターの比較】
項目 FC2 GMOペパボ Yahoo! BIGLOBE OCN So-net
サービス名 FC2カウンター ロリポップ! ジオシティーズ 個人ホームページ Page ON U-Page+
今日・昨日の訪問者 × × × × ×
現在の訪問者 × × × × ×
テキスト表示 × × × × × ×
画像表示
独自画像利用 × ×

アクセスカウンター画像の作り方

 自作した画像を使えるアクセスカウンターを使う場合、カウンター画像の作成が必要です。カウンター画像はgif形式をサポートしているものが多いと思います。ここでは作り方の一例を示します。

 最初にエクセルで画像を0から9まで以下のように書きます。

アクセスカウンター作り方と素材2

 上記はエクセルのワードアートで作っています。

 1つ目の画像をコピーしてPictBearで「ファイル」から「クリップボードを開く」を選択するとエクセルの画像が取り込めます。取り込んだ画像を表示したい大きさに範囲指定してコピーします。「選択範囲」→「座標を入力して選択」を選択すると画像の範囲をpxで指定出来、その後範囲を動かす事が出来ます。

アクセスカウンター作り方と素材3

 再度「クリップボードを開く」で取り込む事で範囲指定した大きさの画像が出来ます。出来た画像は「イメージ」→「イメージタイプ」→「インデックスカラー」で変換し、保存時にgif形式で保存します。

 これを0から9まで繰り返します。

 参考までにですが、左記のアクセスカウンターでトータルで表示している画像は12px × 17pxです。初めて作る方で大きさに迷う場合は、これより大きくしたいか小さくしたいかで大きさを検討して下さい。

 PictBearの使い方は「PictBearの使い方」をご参照下さい。

画像のアップロード

 ダウンロードしたCGI等のアクセスカウンター、レンタルサーバー等で用意されているアクセスカウンター、無料のアクセスカウンターいずれも画像が使える場合は最初から用意されている場合がありますが、自作した画像を使う場合はアップロードが必要です。

 このため指定された方法で作成した画像をアップロードします。レンタルサーバーで最初から用意されているアクセスカウンターを使う場合や無料のアクセスカウンターの場合は殆どこの画像のアップロードだけで設定が終わります。

 尚、アクセスカウンターによっては0から9の数字が1つの画像になっている必要があります。この場合、0〜9の10個のファイルの幅を合計したサイズで新規ファイルを作成し、0から9まで順番に貼り付けて1つのファイルにする必要があります。

アクセスカウンター作り方と素材4

htmlへの記述

 レンタルサーバー等で用意されているアクセスカウンターや無料のアクセスカウンターでは殆ど設定がなく、画像のアップロード、又は使う画像やテキストの選択とカウントの仕方等を設定するとhtmlに張り付けるコードが表示されるため、これをアクセスカウンターを設置したいページに張り付けるだけで殆どの場合は使えるようになります。

 ダウンロードしたCGI等のアクセスカウンターではどのように貼り付けるか説明があるため、指定通りに張り付けます。

カウンター画像素材

 PictBear等で画像を編集するのが苦手という方のためにサンプルのカウンター画像素材を用意しましたので、宜しかったら使って下さい。特に制限なく使って頂いて大丈夫で、加工して利用されても大丈夫です。

 以下の画像をクリックするとダウンロード出来ます。ダウンロードしたファイルはzip形式のため解凍して使って下さい。解凍すると0〜9が別々のファイルと0〜9が1つになったファイルがあるため、使うアクセスカウンターによってどちらかを使って下さい。

・背景白

カウンター画像素材1 カウンター画像素材2 カウンター画像素材3 カウンター画像素材4 カウンター画像素材5 カウンター画像素材6 カウンター画像素材7 カウンター画像素材8 カウンター画像素材9 カウンター画像素材a カウンター画像素材b カウンター画像素材c カウンター画像素材d カウンター画像素材e カウンター画像素材f

・背景黒

カウンター画像素材g カウンター画像素材h カウンター画像素材i カウンター画像素材j カウンター画像素材k カウンター画像素材l カウンター画像素材m カウンター画像素材n

・棒グラフ

カウンター画像素材o カウンター画像素材p カウンター画像素材q カウンター画像素材r

・電光掲示板

カウンター画像素材s カウンター画像素材t カウンター画像素材u カウンター画像素材v カウンター画像素材w カウンター画像素材x

 電光掲示板の最後3つは透過処理をしています。このため、背景はサイトの背景と同じ色で表示されます。

 尚、カウンター画像の素材はインターネットで検索すると沢山公開されています。サイトに合った素材を探してみるのもいいと思います。

  • このエントリーをはてなブックマークに追加