JA3CGZは大阪豊中市に開設するアマチュア無線局です。20年ぶりに電子申請でカムバックしました。このブログはアマチュア無線の話題を投稿していきます。

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

flagcounter-5ed

皆さんは、FLAG counter (フラグ カウンター)をご存じですか?

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

FLAG counter (フラグ カウンター) とは

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

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

flagcounterの実際例
flagcounterの実際例

FLAG counter (フラグ カウンター) 設置ガイド 

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

サイトにアクセス

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

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

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

FLAG counter (フラッグ カウンター)の説明
FLAG counter (フラグ カウンター)の説明

基本設定を行う

FLAG counter (フラッグ カウンター)の説明
FLAG counter (フラグ カウンター)の説明

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

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

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

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

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

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

 

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

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

 

 

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

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

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

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

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

<img src=”https://s01.flagcounter.com
/count/ 123 / bg_FFFFFF / txt_000000 / border_CCCCCC / columns_2 / maxflags_12 / viewers_0 / labels_0 / pageviews_0 / flags_0 / percent_0 /” alt=”フラグ カウンター” border=”0 “>

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

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

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 コードが提供されました。赤い部分はランダムに割り当てられたユーザー名で、フラグ カウンターのみに固有です。赤字の部分は変更せず、以下のコードは使用せず、フラグカウンターのサイトで生成したコードを使用してください。

<img src=”https://s01.flagcounter.com
/map/ 123 / size_s / txt_000000 / border_CCCCCC / pageviews_0 / viewers_0 / flags_0 /” alt=”フラグカウンター” border=”0″>

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

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

size_s

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

txt_000000

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

border_CCCCCC

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

pageviews_0

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

viewers_0

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

flags_0

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

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

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

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

まとめ

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

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