Tumblrのカスタマイズ Flag Counterを設置してみた

【この記事を読むのに必要な時間は約 3 分です。】

Tumblrのカスタマイズも過去記事、Tumblrをカスタマイズしたのでまとめておく(備忘録とカスタマイズ説明サイト紹介)で紹介しているとおりひととおりやった。カウンターを設置していなかったので設置してみることにした。普通のブログだと外人さんお断りみたいなところがあるが、tumblrは国際色豊かなので、国別の訪問がわかるFlag Counterを設置してみる。

Flag Counterのホームページ

こちらがFlag Counterのホームページ。ここで自分のブログやサイトへ貼り付けるコードを取得する。

1flagcounter

コードの取得

外観は「国旗」と「地図」の2種類。

国旗

「Top Countries」が国旗バージョン。下のプレビュー画面を見ながら国旗をいくつ表示(1~250の範囲で選択)するか、カラム数をいくつ表示(1~8の範囲で選択)するか、ラベルは訪問者数にするかどうか等を選択する。
よければ「GET YOUR FLAG COUNTER」をクリックする。

2flagcounter

地図

「Flag Map」が地図バージョン。下のプレビュー画面を見ながら地図の大きさ(3種類)をどうするか、ラベルは訪問者数にするかどうか等を選択する。
よければ「GET YOUR FLAG COUNTER」をクリックする。

3flagcounter

コード

クリックすると次の画面が表示されるので、差し支えなければE-mailアドレスを記入してContinueをクリックする。

4flagcounter

以下のようにコードが表示されるので、Flag Counterを設置したい場所に以下のコードを貼り付ける。

5flagcounter

表示

まだ設置したばかりで寂しいがこんな感じで表示された。

6flagcounter

コードの貼り付け方法

念のため、Tumblrでのコードの貼り付け方法を簡単に説明しておく。
Tumblダッシュボード>カスタマイズ>カスタムテーマ>HTMLを編集からHTMLファイルを呼び出し、設置したい場所に貼り付ける。
ちなみに私は以下の場所に設置している。

	<!-- Insert any extra widgets above this line -->
<!-- flagcounter -->
<br />
<h3>Flag Counters</h3>
<a href="http://info.flagcounter.com/4nt1"><img src="http://s10.flagcounter.com/count/4nt1/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_78/viewers_0/labels_1/pageviews_1/flags_1/" alt="Flag Counter" border="0"></a>			
<!-- /flagcounter -->
		</aside>

コードの貼り付けなどのカスタマイズ方法は、過去記事、Tumblrをカスタマイズしたのでまとめておく(備忘録とカスタマイズ説明サイト紹介)で詳しく解説しているので参考にして欲しい。
以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

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

良かったらフォローお願いします。