とらんちょのブログ一覧

サイドメニューにフラグカウンターを設置できます。

「ＦＬＡＧ ｃｏｕｎｔｅｒ」

これは国別のカウンターが表示できますが
アクセス解析などはできません。

---

・［Maximum Flags to Show］　は表示させる国の数。

最初は 12 となってるので all にすれば設定されてる 248 になります。

・［Columns of Flags］　は横に表示できる数。

サイドメニューには 3つまで表示できるので 3 に設定。

・［Label on Top of Counter］　はカウンターに表示できる文字。

none となってるので >>custom に設定してその下に表示される letters and numbers に
表示させたい文字を入力。
私の場合は　「R33 SKYLINE Gull Wing」 と入れました。（右側のカウンター参照　→）

・［Background Color #］　はカウンターの周りの色。

・［Text Color #］　はカウンターの文字色。

・［Border Color #］　はカウンターの枠の色。

・［Show Country Codes］　は国名表示。国旗の横にアルファベット２文字表示されます。
国名は ＣＯＵＮＴＲＹ ＬＩＳＴ で判ります。

・［Show Page］　はページビューカウント表示。

［Show Country Codes］　と　［Show Page］　はチェックを入れます。

---

全て選択したら　>> GET YOUR FLAG COUNTER　をクリック。

そうすると
「 Would you like to register your Flag Counter? 」
というメッセージが出てくるのでこれは無視をして ［ Ｓｋｉｐ ］　を押してください。


ページが変わって Code for websites:　に

<a href="http://s06.flagcounter.com/～><img src="http://s06.flagcounter.com/count/???/
～/maxflags=248/viewers=????/labels=1/pageviews=1/" alt="free counters" border="0"></a>

と表示されて黄色い部分のアドレスを使います。
http://states.flagcounter.com/～　となってたら前のページに戻って
もう一度　［GET YOUR FLAG COUNTER］　をクリックしなおしてください。

---

スタイルシートは 詳細編集 の
サイドメニュー　の　「ユーザー自己紹介　div#SideUserMemo」　と
プロフィール　の　「自己紹介　div#SelfIntroduction」　に

width:281px;
height:150px;
background:url(http://s06.flagcounter.com/count/～/pageviews=1/) no-repeat bottom;

の３行を追加。
黄色い所を設定したカウンターのアドレスに。

width:281px; はカウンター画像の横幅。　スタイルの種類によって画像の横が切れるので追加を。
height:150px; は縦の表示幅。　表示される国の数が増えたら　150　の数字を増やしてください。

※ プロフィールページのカウンターの横が切れてしまうことがあるので
プロフィール　の　「自己紹介　div#SelfIntroduction」　にある

margin:0 20px;　を　margin:0 10px;　に変更してください。

---

もしくは　［何シテル？］　の下の枠を無くして表示させる場合は
サイドメニュー　の　「何シテル？フッター　div#NanisiteruFooter」　に

width:281px;
height:150px;
background:url(http://s06.flagcounter.com/count/～/pageviews=1/) no-repeat bottom;

の３行を追加。

他に表示させたい場所があったらコメント書いてください。

---

色や表示個数など後からでも設定は変更は出来ます。

http://s06.flagcounter～/bg=767676/txt=000000/border=3184CC/columns=3/
maxflags=248/viewers=R33+SKYLINE+Gull+Wing/labels=1/pageviews=1/

bg	カウンターの周りの色	000000 ～ FFFFFF
txt	カウンターの文字色	000000 ～ FFFFFF
border	カウンターの枠の色	000000 ～ FFFFFF
columns	横に表示できる数	サイドメニューは 3 で。
maxflags	表示させる国の数	0 ～ 248
viewers	カウンターに表示できる文字	+ を付けると半角スペース
labels	国名表示（英数２文字）	0 で非表示、 1 で表示
pageviews	ページビューカウント表示	0 で非表示、 1 で表示

・国名はサイトの上に　ＣＯＵＮＴＲＹ ＬＩＳＴ　がありますのでそれをクリックすれば判ります。

・自分のカウンターの概要を知りたい場合は　Code for websites:　に表示される

<a href="http://s06.flagcounter.com/more/???><img src="http://s06.flagcounter.com/～

の黄色い部分のアドレスをリンクすれば判ります。

↓こんな感じになります。
とらんちょブログカウンター概要

---

ここはみんカラ内ならリンクフリーです。
自由にリンクしてください。

文章のコピーもＯＫです。


スタイルシートのカスタマイズ

・ユーザー検索ボックスの変更

・ユーザーコンテンツ（ブログ内ユーザー定義）の設定

・画像を透過（透かし）

・マウスカーソルの変更

・タブメニュー画像の変更


便利ツール

　　画像の複数表示は　→　みんカラ画像タグ取得ツール

　　複数画像ポップアップ表示は →　みんカラ画像ポップアップツール

　　ブログに地図の貼り付けは → 地図表示ツール

　　ブログにルート地図の貼り付けは → ルート地図表示ツール

新しく追加されたスタイルシートの
ユーザーコンテンツ（ブログ内ユーザー定義）の使い方。

スタイルシートの「詳細編集」にある「ブログ」の一番下

例えばブログを書く時に特定の文字列にマーカーを引いたように見せたい場合は
セレクタ名に名前を付けます。

例として緑色マーカーを引く場合。
gre_line という名前（セレクタ名）で登録。（名前は自分で判るようなものがいいです）

名前の前に　. （ドット．ピリオド）を付けます。
.gre_line　と入力。

入力欄は緑色表示なので
background-color:green;　と入力。

↓結果的にこんな感じに。

セレクタ名

.gre_line

background-color:green;

ブログ内では　「今日は大黒Ｐに遊びに行くぞ～！」　と書いた場合で
大黒Ｐを緑色のマーカーを引く場合は

「今日は<span class="gre_line">大黒Ｐ</span>に遊びに行くぞ～！」

と入力、表示されると

「今日は大黒Ｐに遊びに行くぞ～！」

となります。

右側の入力欄の所は追加できます。
イタリック文字にしたい時などは
font-style:italic;
を追加したりと。

セレクタ名

.gre_line

background-color:green; font-style:italic;

「今日は大黒Ｐに遊びに行くぞ～！」

セレクタ名に H1 ～ H5 を使うというのもあります。
その場合は H は見出し用のタグ（ＨＴＭＬ）なので文字のサイズも指定しないと
見出し用のサイズになってしまいます。
セレクタ名には . （ドット．ピリオド）を付ける必要はないです。

セレクタ名

H1

font-size:15px; background-color:green; font-style:italic;

使い方は

「今日は<H1>大黒Ｐ</H1>に遊びに行くぞ～！」

という感じになります。

他には <span> を使う以外に <div> を使うことも出来ます。

スタイルシートで設定の無いフッターを表示できます。


・ まず、「簡易編集」で壁紙を設定すると ページ基本 の ユーザー領域　div#MinkaraBody に
壁紙のスタイルシートが設定されるのでこれを ページBody　body に移動してください。

background-image:url(http://carview-～);
background-repeat:repet;


・ 次に ユーザー領域　div#MinkaraBody にフッター画像を設定します。
　赤い所は画像のアドレスを。

background:url(http://carview～) no-repeat center bottom;


・ そして コンテンツ共通 の ページング div.paging に以下のものを追加。
　赤い所は表示させるフッター画像の縦幅で調整してください。

padding-bottom:200px;


・プロフィール の 左カラム領域 div#BodyBlockProfileSide に以下の３行を追加。
　赤い所は表示させるフッター画像の縦幅で調整してください。

border-width:0 0 200px 0;
border-color:transparent;
border-style:solid;


注意) ブラウザによってプロフィールのページでは左側がうまく透過できないようです。

ヘッダー画像を透過（透かし）できます。

スタイルシートの［詳細編集］の ページの基本 の
ヘッダー領域　div#BodyBlockHeader　に

filter:alpha(opacity=90);
opacity:0.90;

を追加します。

90　で透過の濃さを指定します。
数字が小さいほど薄くなります。

他の所にも入れることが出来ますが入れすぎるとページが重くなります。

（注意・タイトル文字も薄くなります）

画面の外周に枠を表示できます。

２００９．４．１６　スタイルシートの仕様変更で出来なくなりました。


スタイルシート ［ページの基本］　の　ページBody　body　に

border-width:15px;
border-color:aqua;
border-style:ridge;

を追加。
15px は枠の太さ。
aqua は枠の色。#00ffff でもいいです。
色はカラー１、カラー２で参考にしてください。

※カラー１はWindowsとMacintoshの共通の２１６色です。

ridge は枠の形式。影が付いたように見えます。
他に
dotted　dashed　solid　groove　double　inset　outset
があります。それぞれ選んでください。