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;
}
適当に修正してね...
Posted at 2008/12/04 22:01:11 | |
トラックバック(1) |
みんカラ | パソコン/インターネット
KANSAI EXI_GARAGE 
今更って感じですが...
StyleSheetを弄ってヘッダーに画像を挿入してみました。
