カウンター

今回、カウンターを追加してみました。

しかし、ただ数字が出ているだけじゃ面白くないので“みんカラ”内で検索してみると、国別にアクセス数をカウントしてくれるものを紹介されている方がいらっしゃいました。
早速やってみたところ、カウンターの他に小さい国旗も表示されていて可愛いです。
（右のカレンダーのところです。）

不思議なことに“US”の方が見てくれているようです。




この記事は、PiNGAさんのスタイルシート について書いています。

PiNGAさん、ありがとうございました。




以下、当カウンターの取得と設定方法を記載しています。

FlagCounter.com



Optionsについては下記のように設定しました。
・Maximum Flags to Show（表示する国旗の最大数）
　　デフォルトの"12"で良いと思います。
・Columns of Flags（表示する国旗の列数）
　　デフォルトの"2"で良いと思います。
・Label on Top of Counter（表示するラベル）
　　変更したい場合はプルダウンを押して変更して下さい。
　　任意の文字を入れたい場合は"≫custom"を選択して下さい。
　　私は"≫custom"で"CAROLLA FIELDER"と記入しました。
・Show Country Labels（国名の表示の有無）
　　表示させたい場合はチェックして下さい。
　　私はチェックしました。
・Show Pageview Count（総カウンター数の表示の有無）
　　表示させたい場合はチェックして下さい。
　　私はチェックしました。

Colorsについてはお好きな色に。
・Background Color（背景色）
　　私は"555555"にしました。
・Text Color（ラベル・カウンターの文字色）
　　私は"CCCCCC"にしました。
・Border Color（枠線色）
　　私は"555555"にしました。

設定完了したら"get my flag counter!"を押して下さい。



"Code for websites"の下の赤く着色した部分をクリックすると反転しますので、右クリックでコピーし、テキストドキュメント等に貼り付けておいて下さい。

スタイルシートのページで最下段の「スタイル編集」を押し、"CalendarPlate"と書かれた箇所を探します。
当カウンターの設置場所として、先人の方々が設置しているカレンダー部とします。



赤線の箇所に下記文字をコピーして下さい。

padding-top : 100px;
background-image : url('*****');
background-position : top/;
background-repeat : no-repeat;



先程テキストドキュメント等に貼り付けておいたものから、青く反転させた箇所を2行目の*****のところにコピーします。



カレンダーの位置や色はここでも変更できます。

・padding-top（カレンダーの位置）
　　カレンダーの上位置をこの数値で指定します。
　　国旗が増えてくるとカウンターの表示高が大きくなってきます。
　　"100"程度の数値で良いと思いますが、適当に調整して下さい。
・bg=（背景色）
・txt=（ラベル・カウンターの文字色）
・border=（枠線色）
・columns=（表示する国旗の列数）
・maxflags=（表示する国旗の最大数）
・viewers=（表示するラベル）
　　"0"は"Visitors"、"1"は"Viewers"となる。
　　文字を入力するとその文字が表示される（スペースは"+"）
　　"3"は非表示となる。
・labels=（国名の表示の有無）
　　"1"は表示、"0"は非表示となる。　
・pageviews=（総カウンター数の表示の有無）
　　"1"は表示、"0"は非表示となる。


※必ず「プレビュー」を押し、表示状態を確認してから「保存する」を押し保存して下さい。