第31回：現在の閲覧者数を表示するカウンターを設置してみよう

「今現在、このブログを何人の方が閲覧してくれているのか」を表示するカウンターを設置してみました。
左サイドバーの「記事一覧」のリンクの下に表示中です。

このカウンターのスクリプトは「ACR WEB」 からお借りしました。
「ACR WEB」はこうしたカウンターや掲示板、アクセス解析などのCGIレンタルサイトです。
有料のものもありますが、無料でレンタル出来る便利なツールもたくさん提供されています。

「ACR WEB」 のツールを利用するには利用者登録が必要です。
今回はその利用者登録方法も含めて、上記のカウンターの設置方法についてご説明します。

事前準備1：ACR IDを取得する

1. トップページの画面右上にある『ACR ID管理画面へ』のリンクをクリックする。
2. 「ACR IDに新規登録する」をクリックする。
3. 『ACR IDの新規登録』の文字の下にあるスペースにメールアドレスを入力し、「ACR IDに新規登録する」 ボタンをクリックする。
4. しばらくすると登録したメールアドレスに「［ACR ID］メールアドレス確認」というタイトルのメールが届くので、 このメールに記載されているURLにアクセスする。
5. 登録した「メールアドレス」と到着したメールに記載されていた「チェックコード」 が入力された画面が表示されるので問題なければ「作業登録を続ける」ボタンを押す。
6. 「ACR ID 新規登録完了」画面が表示される。
7. しばらくすると「［ACR ID］登録完了メール」が到着する。

以上で新規登録処理は完了です。

事前準備2：表示用のタグを入手する

1. 上記で届いた「［ACR ID］登録完了メール」に記載されているログインページにアクセスする。
2. 登録したときのメールアドレスと、登録完了メールに記載されているパスワードを入力し、「ログイン」ボタンを押す。
3. 「ACR ID」の管理ページが表示されるので、そのページ中から『Now Visitor』のリンクをクリックする。
4. 表示された「カウンター紹介」ページの『Now Vistorの新規レンタル』をクリックする。
5. 登録画面が表示されるので
   「希望するユーザーID」（半角英数8文字以内の任意の文字列）
   「利用するURL」（設置するブログのURL）
   を入力して『規約に同意して登録する』ボタンをクリックする。
6. 表示された「登録完了」画面内の『CGIの管理』をクリックする。
7. 画面上にで設定したIDが表示されているので、その中の「環境設定」をクリックする。
8. 「カウンター設定」で、表示したときの
   ＜背景色＞
   ＜文字色＞
   ＜文字サイズ＞
   ＜カウンターの表示形式＞
   をそれぞれ設定する。
   ※変更する必要がなければそのままでもOKです。
9. 設定が終わったら「送信する」ボタンをクリックする。
10. 「カウンタータグ取得」画面が開くので、表示されたタグを全てコピーする。

サイドバーに設置する

マイリストを使って、上記のスクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
■ 「基本2： マイリストの作成→サイドバーへの設置」
にて確認して下さい。

以上です。
上手くできましたか？

• 登録手順は文章で書くと画面の遷移が多く少々煩雑ですが、実際の操作は画面がシンプルなのでもっと簡単に出来ると思います。
• 一度利用登録すれば全ての無料スクリプトが利用可能です。
  また一つのIDで同じスクリプトを複数レンタル利用することも出来ます。

■「ACR WEB」さん
■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

*この記事にコメントを書く*

---

第26回：サイドバーに「アクセス解析ツール」を設置してみよう

サイドバーに貼り付けるブログパーツは多種多様にありますが、今回は 「自分のブログがどこからアクセスされたか/どの記事がよく読まれているか」などのアクセス状況が表示できるパーツを付けてみましょう。
私も現在「ACR WEB」さんの『ページランキング』を設置しているのですが、ちょっとこれは設定が面倒（ページをタイトル表示にするには手動で設定しなければならない）なので、今回はタイトルも自動で読みとってくれる「Sideber.jp （サイドバー.jp）」さんのランキングパーツをご紹介したいと思います。
【'07/04/14修正】
現在は「ACR WEB」さんのサービスでも自動で記事タイトルを読みとってくれます。

事前準備1：ユーザー登録をする

「Sidebar.jp」のユーザー登録をします。

1. トップページの「どうやるの？」の下にある空欄にメールアドレスを入力し、「新規登録/ログイン」ボタンを押す。
2. 画面が切り替わり「新規ユーザー登録しますか？」と聞いてくるので、「新規登録」ボタンを押す。
   ※ボタンを押すと「確認メールを送信しました」画面に切り替わる
3. しばらくすると登録したメールアドレスに確認用のメールが来るので、そこに記載されているURLをクリックする。

このあと、ブラウザに「基本設定」画面が表示されれば登録完了です。

事前準備2：基本設定

自分のブログの情報を設定します。

1. 表示されたページの空欄に自分のブログのURLを正しく入力して「更新」ボタンを押す。
2. 下に表示された「はじめかた」から『アクセス統計を使いたい』をクリックする。
3. 「リンク元/アクセス統計に関する設定」に切り替わるので、それぞれの項目について任意で設定する。
   ※基本的に最初の3項目だけ設定すればOKです。
   ※後ろの2項目は内容が判らなければそのままブランクにしておいて下さい。
4. 設定が完了したら「更新」ボタンを押す
5. その下の「アクセス集計を行う HTML」に上記で設定した条件のスクリプトが表示されるので、これを全文コピーする。

サイドバーに設置する

マイリストを使って、スクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
■ 「基本2：マイリストの作成→サイドバーへの設置」
にて確認して下さい。

こんな感じに表示されればOKです。
※解析結果がブログ上に反映するまでには、しばらく（約1時間程度）かかります。
※一度表示されればあとは勝手にデータを拾ってくれますので、何もしなくて大丈夫です。
※（ ）内の数字がアクセス件数です。

以上です。
上手くできましたか？

• 上に掲載した画像は何も成形していない状態ですが、CSSでカスタマイズして表示することも可能です。
  詳細については下記のページを参照して下さい。
  ■リンク元/アクセスランキングだけを利用する方法
  ■ 「アクセスの多いページ」のタイトルを調整する
  ※このCSSカスタマイズについては、 当ブログではご質問をお受けできませんのでご了承下さい。
• このサービスは便利ですが、ときどきサーバーがかなり重くなりアクセスし難くなる場合があります。
  そうした場合、ブログ全体の表示速度にも影響が出ますので、設置する場合は出来るだけ （表示順の遅い） 右サイドバーの下の方に置くことをお奨めします。
  ※表示設定の手軽さよりもサーバーの軽快さを重視する場合は、 「ACR WEB」さんのほうがオススメです。
  ※「ACR WEB」さんのページランキングは右サイドバーの「人気ページTop10」に表示してありますので参考にして下さい。
• 基本的にスクリプトを使ったブログパーツはどれも表示が重くなりがちです。
  ときどき自分でもブログ画面を表示して所要時間を確認し、時間が掛かるようなら設置場所を変更するなど工夫しましょう。

■「Sidebar.jp」さん
■「ACR WEB」さん
■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

*この記事にコメントを書く*

---

第2回：バナーを貼ってみよう

お気に入りのサイトやブログのバナーを表示して、そこに表示先へのリンクを設定する方法です。
こんな感じですね。
←クリックすると写真素材サイト「Four seasons」さんに飛びます。

事前準備：バナーを入手する

バナー画像を入手して下さい。
そのサイト（ブログ）で特別の指定がない限り、画像は自分のPCに一度保存するのが基本です。
画像の上で右クリックして「名前を付けて画像を保存」を選択、PC内の任意の場所に判りやすい名前（半角英数）を付けて保存しましょう。

バナー画像をココログにアップロードする

1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く 
2. 「新規ファイルのアップロード」の「参照」ボタンを押す 
3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル（画像）を選択し「開く」ボタンを押す 
4. 「アップロード」ボタンを押す
   ※ファイル名が半角英数でない場合、ここで
   ※「不正なファイル名です。 半角英数字のみのファイル名に修正したうえでアップロードしなおしてください。」
   ※と表示が出てアップロード出来ません。
   ファイル名を修正してやり直して下さい。 
5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
   ※ここまでで画像のアップロードは完了です。

バナーをブログに貼り付ける

以下はサイドバーへの貼り付けについての説明です。

1. 上記の5.で表示されている画像の名前をクリックしてページを開く。
   ※上記でアップロードした画像が表示されているはずです。 
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてもOKです。 
3. 管理画面に戻って、「マイリスト」タブ→「マイリストの新規作成」で『リストのタイプ』 が＜メモ＞のリストを作成する。
   ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください（例：「お気に入り」 「リンク集」など）
   ※文字列を出したくない時は、スペースを入れても大丈夫です。 
4. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。 
5. 「項目を追加する」ウィンドウが表示されるので、「備考」欄に下記のタグを入力する。
   
   <a href="○○○"><img src="□□□" alt="△△△"></a>
   
   ※○○○＝リンク先サイトのurl、□□□＝画像のurl （2.でコピーしたもの）、 △△△＝サイトの名前に置き換えて下さい。
   ※画像の周囲に枠線が出て、それを消したい場合はalt="△△△"のあとにborder="0"を追加してください。 
6. 「保存」ボタンをクリックする。 
7. 「項目の一覧」画面に切り替わり、「リストにアイテムが追加されました。ブログやプロフィールページにリストを公開しますか？」のメッセージが表示されるので、メッセージ横の「公開」ボタンをクリックする。
8. 「公開」画面が表示されるので、リストを公開（設置）したい場所（ブログ または プロフィールページ）を選択し、左端のチェックボックスにチェックを入れる。
   ※表示位置の調整が不要の場合：「変更を保存」をクリック→これで完了
   ※表示位置を調整する場合：「並べ方」をクリックして次に進む。
    
9. 「デザイン」内「表示項目の並べ方」画面に切り替わるので、作成したバナー入りのマイリストを好きな場所に移動して「変更を保存」する。 

以上です。

うまく出来ましたか？

応用編：記事内にバナーを貼る場合

1. 「記事の作成」画面を開く。 
2. 「本文」（または「本文（続き）」）の任意の位置に上記のタグ（<a href="○○○"><img src="□□□" alt="△△△"></a>）を記事内に直接入力する。
   ・プレーンテキストモードを使っている場合→そのまま入力
   ・リッチテキストモードを使っている場合→画面を「HTMLの編集」 に切り替えて入力
   ※自分が使っているテキストモードがどちらかなのかを確認するには、下記のページを参考にして下さい。
   ※ココログ：使い方ガイド 『リッチテキストエディタ』 
3. 「確認」画面でバナーが表示されていることを確認する。 
4. 記事を保存する。

※ランキングサイト用などで毎回同じバナーを貼り付ける必要がある場合は、タグ全文を辞書に単語登録しておくと便利です。

• <a href="○○○">～</a>は、リンクボタンを作成するHTMLタグです。
  このタグで挟まれた部分にリンクを張って、指定した場所にジャンプさせることが出来ます。
  今回は画像を間に挟みましたが、間に文字列を入れれば文字にリンクを張ることが可能です。
  例：<a href="○○○">ABCD</a>
  （○○○には、 文字列ABCDへのリンク先urlを代入します） 
• <img src="□□□">は画像を表示するタグです。
  リンクを張らなくても、これだけで使用可能です。
  また上記の説明でこのタグの中に入れたalt="△△△"は表示される画像の代替テキストを指定するタグです。
  画像が表示されている場合は画像の上にマウスを持っていくと表示され、 画像が表示できない場合は画像のある場所にテキストとして表示されます。
  （この上に貼ったバナーの上にマウスを持っていくと、サイト名が表示されるのが判ると思います）
  このタグは入れなくても画像の表示は可能ですが、閲覧者の環境などによって画像がうまく再現されないケースもありますので、 そんなときのためにここに代替テキストを指定しておくようにしましょう。 
• 「マイリスト」へのタグの入力はメモリスト以外でも利用できます。
  その場合、『人リスト』は＜一行紹介＞欄に入力して保存、
  それ以外のリストは＜メモ＞欄にタグを入力して保存したあと、「設定」タブ内の＜メモの表示＞のチェックを入れて保存して下さい。
  （これらの処理が不要なので、タグを入れる場合は「メモリスト」が一番簡単だと思います）

---

 

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

 

*この記事にコメントを書く*

---

第1回：カウンターをつけてみよう

まずは、アクセスカウンターをつけてみましょう。

【'06/08/22追記】
「ベーシック/プラス/プロ」プランに、アクセスカウンターが標準機能として追加されました。
【'06/11/01追記】
「フリー」プランでもアクセスカウンターが標準機能として追加されました。
設置方法については下記のページを参照して下さい。
■「使い方ガイド」内『11： 解析オプション～アクセス解析応用編』（6:カウンター設定）

ココログ以外のレンタルサービスを利用してカウンターを設置する場合は下記の方法をご利用下さい。

また、素材サイトで配布されているカウンター素材をCGIを利用して設置したい、という場合は『はっさくノート』 様の下記の記事が参考になります。
■CGIを使ってアクセスカウンターを設置する：第1話（準備・修正編） / 第2話（転送編） / 第3話（リンク編）

事前準備：カウンター用タグの入手

カウンターのレンタルサイトに登録をして、カウンターを表示するためのタグを入手します。
※登録方法はサイトによって異なりますので、サイトの説明に従って手続きして下さい。

レンタルサイトは『Shinobi.jp』あたりが有名ですね。
その他、検索サイトで「カウンター 無料 レンタル」などのキーワードで検索すればたくさん出てきますので、デザインや機能などお好きなところを選んで下さい。
□参考サイト：『無料サイト集 KOOSS」』 内「無料カウンター、無料レンタルカウンター」

私は「＠nifty」のホームページ作成サービス（「＠homepage」）で提供されているカウンターを使いました。
（注）「＠homepage」は＠nifty会員しか使えません。

カウンターの設置

ココログではカウンターは2箇所に設置出来ます。
一箇所はタイトルのすぐ下のサブタイトル部分、もう一箇所はサイドバーです。
二つの方法を順番に説明します。

■タイトル部分への設置

1. ココログの管理画面にログインし、「ブログ」タブ→（便利メニューから）「設定の変更」
2. 「ブログの基本情報」が表示されるので、その中の 『ブログのサブタイトル （キャッチフレーズ）』が記入してある部分に、上記で入手したタグを全てコピー＆ペーストする。
3. 画面下の「変更を保存」ボタンを押す。
4. 画面が切り替わった後に表示される「サイトに反映」ボタンを押す。

■サイドバーへの設置

1. ココログの管理画面にログインし、「マイリスト」タブをクリック。
2. 「マイリストの新規作成」で『リストのタイプ』 が＜メモ＞のリストを作成する。
   ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください（例：「カウンター」 など）
   文字列を出したくない時は、スペースを入れても大丈夫です。
3. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
4. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに入手したカウンター用のタグをコピー＆ペーストする。
5. 「追加」ボタンをクリックする。
6. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
7. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」
8. 「ブログ」タブ→（便利メニューから）「デザインの編集」→「表示項目を変更」をクリック。
9. 「マイリスト」の一覧の中から、作成したカウンター用のリストを選択しチェックボックスにチェックを入れ「変更を保存」 。
10. 「デザインの編集」に戻って「並べ方を変更」をクリック。
11. 「表示項目の並べ方」画面が表示されるので、作成したカウンターを好きな場所に移動して「変更を保存」。

以上です。

うまく出来ましたか？

私は「サイドバーへの設置」でやってみました。
左サイドバーの真ん中辺に「カウンター」という項目で表示しています。

マイリストを使ってサイドバーにタグを入れる方法はちょっと手順が多く面倒ですがカウンターに限らず殆ど全てのブログパーツに応用できますので、 覚えておくと便利です。

---

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

*この記事にコメントを書く*

---