ＰｉＮＧＵ倶楽部のブログ一覧

StyleSheetを弄ってヘッダーに画像を挿入してみました。
ついでにカウンターを設置しようと、色々と物色していたところ U太郎＠AE111さんがブログで紹介されている Flag Countor(フラッグカウンター)という国別アクセス数をカウントできるカウンターが気に入ったので、右のカレンダー部分に設定しました。
今は日本からのアクセスのみなので、国旗はひとつですが、そのうち増えるのかな？







ちなみに設置方法は、U太郎＠AE111さんのブログにも記載されていますが、こちらにも記載しておきます。


flagcounter.comにアクセスします。

表示されたページの中央部に「Customize Your Flag Counter」という表示の設定項目があります。
設定状況が下にプレビュー表示されますので、非常にわかりやすいです。

設定項目(後からでもタグで自由に変更できます)
　Options
　「Maximum Flags to Show」：表示する国旗の最大数
　　デフォルトの「12」で設定しました。

　「Columns of Flags」：表示する国旗の列数
　　デフォルトの「2」で設定しました。

　「Label on Top of Counter」：表示するラベル
　　プルダウンリストから「custom」を選択し
　　「SUBARU EXIGA」と入力しました。
　　 (半角英数のみです)

　「Show Country Labels」：国名表示。
　　チェックすると、国旗の後に国名の略称が表示されます。

　「Show Pageview Count」：ページビュー総カウント表示。
　　チェックすると、総アクセス数が表示されます。

　Colors
　「Background Color」：カウンターの背景色

　「Text Color」：カウンターの文字色(文字色)

　「Border Color」：カウンターの枠線色

以上を設定し、下に表示されるプレビュー表示を確認して、「get my flag counter!」をクリックすると、ページが変わり、2つのタグが表示されます。

例(上側より)
＜a href="http://s02.flagcounter.com/more/個別ID"＞＜img src="http://s02.flagcounter.com/count/個別ID/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=SUBARU+EXIGA/labels=1/pageviews=1/" alt="free counters" border="0"＞＜/a＞
必要なのは、「img src="」～「" alt="free counters" border="0"」
の間の水色部分、

http://s02.flagcounter.com/count/個別ID/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=SUBARU+EXIGA/labels=1/pageviews=1/

のみです。(メモ帳等に貼り付けておきましょう)

「http://s02.flagcounter.com/count/」までは(多分)共通で、

　「個別ID」：自動割り振りのID
　「bg=」：背景色(FFFFFFは白)
　「txt=」：文字色(000000は黒)
　「border=」境界線色(CCCCCCはライトグレー)
　　カラータグ(色)は赤・青・緑をそれぞれ2桁の00～FFで設定し
　　3色計6桁の16進数となります
　　　こちらを参照すると簡単に16進数が変更できます。

　「columns=」：表示する国旗の列数
　「maxflags=」：表示する国旗の最大数
　「viewers=」：ラベル(スペースは+に変換される)



いよいよ次はスタイルシートのカスタマイズです。
「マイページ」の「メニュー」にある『スタイルシート』をクリックし、表示されるページ下部の『スタイル編集』をクリックします。

下のカレンダーの設定部分を探して、
(スタイルシートのベースは Black を利用しています)
/*----------こ　こ　か　ら---------*/
/*カレンダー：*/
.CalendarPlate
{
color: #cccccc;
font-weight: bold;
font-size: 12px;
position: center;
}
/*----------こ　こ　ま　で---------*/
(ベースとなるスタイルシートによって、上記内容は異なります)
を、

/*----------こ　こ　か　ら---------*/
/*カレンダー：*/
.CalendarPlate
{
padding-top : 126px;
background-image : url('http://s02.flagcounter.com/count/12U/bg=444444/txt=ff00ff/border=444444/columns=2/maxflags=12/viewers=SUBARU+EXIGA/labels=1/pageviews=1/');
background-position : top/;
background-repeat : no-repeat;
color : #cccccc;
font-weight : bold;
font-size : 12px;
position : center;
}
/*----------こ　こ　ま　で---------*/

のように変更します。(細部はお好みに指定してください)


　「padding-top」：カレンダー上部のパッディングサイズを指定
　　カレンダーの上部をデフォルトから何px下げるかを指定します
　　(今回は、126ピクセルに指定)
　「background-image」：フラッグカウンターで取得したURLを記載
　「background-position」：表示する位置を設定
　　(今回は、上部に設定)


書き換えが終われば、「プレビュー」ボタンを押し、表示されるプロフィールページからブログページに移動し、カレンダーの部分にカウンターが表示されていれば成功です。

よくわからない方は、U太郎＠AE111さんのブログに画像を利用した説明があるので、ご参照ください。

また、失敗した場合は保存せずマイページに戻ってください。

あと、通常は http://s02.flagcounter.com/more/個別ID へのリンクも含んで設定するのですが今回は除外しているので、カウンターをクリックして詳細分析ページへ跳ぶことが出来ません。
マイページからリンク設定で http://s02.flagcounter.com/more/個別ID へのリンクを貼っておくと便利です。

12/12 カウンター移動しました。
ヘッダーの画像上にカウンターを移動しました。
設置方法については、以下のとおりですが、みんカラさんのヘッダー変更に伴う調整が続いているようなので、今回移動したカウンターもいつ表示できなくなるかわからないです。ご理解の上ご利用ください。

私の場合のスタイルシートの変更部分です。

/*==「.BlogTitle」は書き換えました ==*/
.BlogTitle
{
color: #EEEEEE;
font-weight: bold;
font-size: 20px;
display: block;
padding-top:1px;
padding-left:390px;
background-image: url('http://s02.flagcounter.com/count/個別ID/bg=000000/txt=ff00ff/border=444444/columns=2/maxflags=12/viewers=SUBARU+EXIGA/labels=1/pageviews=1/');
background-position: top/;
background-repeat : no-repeat;
}

/*==「.BlogTitle a」は追加しました ==*/
.BlogTitle a
{
padding-top:0px;
padding-left:50px;
width:285px;
height:170px;
display:block;
}
適当に修正してね...