マキバ号のブログ一覧

今回は国旗で国ごとのアクセスがわかるフラッグカウンターの設置をしてみましょう(^o^)/




まず無料のFLAG COUNTERをゲットしましょう

http://www.flagcounter.com




サイトにアクセスすると上の画面が出るので
まず基本になる設定をしていきます。

画像にあるShow on your siteのFlagMapは世界地図に国旗が出るだけなので、これは説明いたしません

設定を変更して行くとプレビュー画面も変わるのでお好みの表示にしましょう(^o^)/
②④⑤はお好みで、あとの設定は画像と同じでいいです
それ以外は飛ばして次の画像に行きましょう（笑）


①Show on your siteの
Top Countriesを選択

②Maximum Flags to Show
表示される国旗の数を選択
画面では54になってますが最大250まで表示します


③Columns of Flags
表示される国旗の列数を選択
3がベストです

④Label on Top of Counter
一番上に表示する文字を入れます
使えない文字を入力すると警告されます
customを選択して文字を入力
画面ではek access

⑤フラッグカウンターの色を決めましょう
Background Color # 背景の色
Text Color # 文字の色
Border Color # 枠の色

⑥Show Flag Labels　
国の略称を数字の左側に表示

⑦Show Pageview Count
ページビュー数を表示

⑧Show Visitors As
Numberは国のアクセス数を表示 他は%表示

⑨Flag Size
国旗の大きさ設定
Smallがベスト

⑩お好みに設定できたらGET YOUR FLAG COUNTERをタップ




GET YOUR FLAG COUNTERをタップするとこの画面になります
Skipでもコードはでますが
アドレスを打ち込んでContinueをタップして登録すると
管理画面URLとパスワードが発行され

Regenerate Flag Counter データを引継ぎカウンター再生
Privacy Mode データを他人には見れないように
Repeat Visitor Preference 観覧者のカウント方法の設定
Reset Flag Counter カウンターのリセット

以上の事が出来るようになります。
設定の変更などができるのでアドレスを登録された方がいいと思います。

コードが表示されたら





⭕️ここは重要です
上の画面の青いアンダーライン部分のURLをコピーして
下のプログラムの【http://############】の部分と入れ替えます
下のプログラムをコピーしてメモ帳に貼り付けて作業するといいでしょう。

width:280px;
margin:0 auto;
height:500px;
background-image:url('http://############');
background-repeat:no-repeat;
background-position:50% 30px;

上の画面のURLの最後の部分は【flags_1/percent_0】となってますが
%表示にしない場合は【flags_1】だけでも構いません




マイページからスタイルシート→詳細編集→サイドメニュー を順番にタップ
同じ画面で下にスクロールします




⭕️ 何してる？フッター部分は

width:260px;
margin:0 auto;
height:5px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/nanisiterufooter.gif) no-repeat top center;

と記述してあると思いますが全て消して
前にメモ帳で作っておいた

width:280px;
margin:0 auto;
height:500px;
background-image:url('http://############');
background-repeat:no-repeat;
background-position:50% 30px;

に書き換えます

⭕️ height:500px;の500pxは、下の画像のaの値になります
国旗が増えてきたらここを増やして文字と重ならないよう調整します。
最初は200pxぐらいでいいと思います。


「何してる？」に一度も書き込みをした事がないとカウンターは表示されないかも(^_^;)
何かカキコしておきましょう。
あと保存してから1分ほど待って確認してください。

以下はプログラムの説明なので飛ばして
プレビューで確認したらスタイルシートを保存して完了です。
お疲れ様でした(⌒-⌒; )



上の画像のアルファベット部分の詳細
(a) bg_FFFFFF（背景色）
(b) txt_000000（文字色）
(c) border_CCCCCC（境界色）
以上カラ―コードにより色を変えることができます
カラーコード表へ
http://html-color-codes.info/japanese/

(d) columns_3
国旗の表示列数
(e) maxflags_250　
国旗の表示数 最大250まで
(f) viewers_0
カウンターの一番上に表示する文字を viewers_######と入力
使えない文字を入力するとカウンターが表示されなくなります。
(g) labels_1
国名を国旗の横に表示
(h) pageviews_1
ページビュー数の表示
(i) flags_1
表示された国旗の数の表示

　0:表示なし　1:表示あり