フラグカウンターを表示しませんか？毎日訪問者数が増えて楽しい！

ＲＹＯ

2年前

皆さんは、FLAG counter （フラグカウンター）をご存じですか？

最近、アマチュア無線局のブログを見ていて、気になったので調べて見ました。
設置方法のマニュアルを見ないでも、とても簡単に設置出来たので紹介したいと思います。

FLAG counter （フラグカウンター）とは

各国からの訪問者数が視覚的にわかりやすいカウンターのことです。

本ブログの右側下に設置した『VISITER』コーナーは、設置したばかりなのでまだ日本の国旗だけですが、いずれは下記の画像の様にいろいろな国から訪問されて国旗がいくつも表示されるはずです。

flagcounterの実際例

FLAG counter （フラグカウンター）設置ガイド

設置する方法を説明します。

サイトにアクセス

フラグカウンターのサイトにアクセスします。
➡　http://www.flagcounter.com/

当ブログの「フラグカウンター」の画像をクリックしてもOKです。開いたサイトの上部「無料カウンターをつくろう！」をクリックすると、フラグカウンター設置のサイトが開きます。

サイトが表示すると、一番上に説明が掲載されていました。

FLAG counter （フラグカウンター）の説明

基本設定を行う

FLAG counter （フラグカウンター）の説明

ここで、カスタマイズができるようになっているが、導入時はそのまま、右下のオレンジ色のボタンをクリックすると良いです。

次に開いた画面には、メールアドレスを入力して、【続行】をクリックする。

「あなたのHTMLコード」が表示されるので、

「ウエブサイト用のコード」をコピーして、表示したいページにペーストするだけでＯＫ。

私は、ブログのサイドバーの一番上に表示させています。1月始めに表示させてから、約3ヶ月が経過しましたのでだいぶ旗も増えて来て、見栄えも良くなってきました。

ブログはもちろん、QRZ.comの自分のページにも表示している方がおられる様です。

表示のカスタマイズをするには

私は、上記１と２で表示出来たのでそのままにしてありますが、詳細を設定するとカスタマイズ出来る様です。

フラグカウンターコードを簡単に変更するだけで、設定をすぐに変更できるようになっています。

フラグカウンター表示の変更方法

JA3CGZのフラグカウンターをカスタマイズしてみました。

現在、コードで変更できる変数は 9 つあります。

フラグカウンターを最初に作成したとき、以下に示すようなセクションを含む単純な HTML コードが提供されました。赤い部分はランダムに割り当てられたユーザー名で、フラグカウンターのみに固有です。赤字の部分は変更せず、以下のコードは使用せず、当サイトで生成したコードを使用してください。

間違えた場合に元に戻せるように、フラグカウンターコードのバックアップコピーを作成したほうが良いです。コードの強調表示されたセクションに焦点を当てます。調整可能な変数と、それぞれの許容値が次に含まれます。

以下の要件に従わないフラグカウンターを変更しないように十分注意してください。そうしないと、エラーイメージが表示され、フラグカウンターが正しく機能しなくなります。アンダースコア (_) の後とスラッシュ (/) の前の部分のみを変更することができ、以下の厳密な要件に従って行う必要があります。

bg_FFFFFF

フラグカウンターの背景色です。これは、任意の有効な 6 桁の 16 進数です。たとえば、Web サイトの背景色が #191970 (ミッドナイトブルー) で、それに合わせたい場合は、この部分を「bg_191970」に変更します。
txt_000000 これは、フラグカウンターのテキストの色です。背景色と同様に調整します。
border_CCCCCC これは、フラグカウンターの境界線の色です。これも背景色と同様に調整します。
columns_2 これは、フラグカウンターの列の数です。1 から 9 までの任意の数値を指定できます。
maxflags_12 これは、フラグカウンターに表示されるフラグの最大数です。1 から 255 までの任意の数値を指定できます。

viewers_0

カウンターの上にあるテキストラベルです。「0」がデフォルトで、カウンターの上部に「訪問者」と表示されます。”3″ は、ラベルを完全に削除します。スペース、感嘆符 (!)、ピリオド (.)、コンマ (,) に変換されるプラス記号 (+) だけでなく、文字 (az) または数字 (0-9) を含むその他の値も使用できます。たとえば、これを「My Flag Counter!」と表示したい場合は、これを「viewers_My+Flag+Counter!」に変更します。

labels_0

この設定は、フラグが国コードでラベル付けされるかどうかを調整し、0 (オフ) または 1 (オン) のいずれかになります。1 に設定すると、各フラグの後に 2 文字の国コードが続きます。

pageviews_0

この設定は、ページビューカウンターがフラグカウンターに含まれるかどうかを調整し、0 (オフ) または 1 (オン) のいずれかになります。1 に設定すると、フラグカウンターイメージがエンドユーザーに表示されるたびにカウントする一意でないカウンターがカウンターに含まれます。

flags_0

この設定は、収集した旗の数を旗カウンターの画像に表示するかどうかを調整し、0 (オフ) または 1 (オン) のいずれかになります。

percent_0

この設定は、カウンター上の訪問者のフラグを実際の数ではなくパーセンテージで表示するかどうかを変更します。このオプションは、0 (オフ) または 1 (オン) のいずれかです。

フラグマップ表示の変更方法

フラグマップの表示もできます。例えば次の様なマップです。

フラグマップのサンプル

現在、コードで変更できる変数は 5 つあります。

フラグカウンターを最初に作成したとき、以下に示すようなセクションを含む単純な HTML コードが提供されました。赤い部分はランダムに割り当てられたユーザー名で、フラグカウンターのみに固有です。赤字の部分は変更せず、以下のコードは使用せず、フラグカウンターのサイトで生成したコードを使用してください。

間違えた場合に元に戻せるように、フラグカウンターコードのバックアップコピーを作成しすることをオススメします。コードの強調表示されたセクションに焦点を当てます。調整可能な変数と、それぞれの許容値が次に含まれます。

size_s

これは、フラグカウンターイメージのサイズです。デフォルトでは “s” (小さい) ですが、”t”、”m”、”l”、または “xl” にすることもできます。(小、中、大、特大)

txt_000000

これは、フラグカウンターのテキストの色です。これは、任意の有効な 6 桁の 16 進数です。たとえば、Web サイトのテキストの色が #191970 (ミッドナイトブルー) で、それに合わせたい場合は、この部分を「txt_191970」に変更します。

border_CCCCCC

これは、フラグカウンターの境界線の色です。これも文字色と同様に調整します。

pageviews_0

viewers_0

これは、カウンターの上にあるテキストラベルです。「0」がデフォルトで、カウンターの上部に「訪問者」と表示されます。”3″ は、ラベルを完全に削除します。スペース、感嘆符 (!)、ピリオド (.)、コンマ (,) に変換されるプラス記号 (+) だけでなく、文字 (az) または数字 (0-9) を含むその他の値も使用できます。たとえば、これを「My Flag Counter!」と表示したい場合は、これを「viewers_My+Flag+Counter!」に変更します。

flags_0

この設定は、収集した旗の数を旗カウンターの画像に表示するかどうかを調整し、0 (オフ) または 1 (オン) のいずれかになります。

以上は、同サイト「FLAG COUTNTER」の「よくある質問」の中に掲載されています。その他、「ミニ」フラグカウンターもあり、その修正方法も掲載されていますので、必要に応使用すれば良いと思います。

参考に詳細説明のサイトをご紹介しておきます。
FLAG counter （フラグカウンター）設置ガイド 2013

フラグカウンターの設置方法と、アクセス解析の見方（忘備録 …

まとめ

今回は、フラグカウンターをブログに表示させる方法を案内しました。
上級クラスになってしまいますが、表示するだけでなく好みに応じての修正もご案内しました。

フラグカウンターをブログに表示させると、毎日訪問者数が増えて楽しい！ですよ。是非試して見てください。

FLAG counter （フラグ カウンター） とは

FLAG counter （フラグ カウンター） 設置ガイド