蒼井プレ之進のブログ一覧

こんばんは～、プレ之進です♪
今日は超久しぶりに（半年ぶりですｗ）、
スタイルシート関連のブログを書こうと思います

なんで急にかって？
プレマシーの流行がわからないから！
…じゃなくて、最近何人かの方に連発で
フラッグカウンターのご質問をうけて、
そういえばアレ書いてなかったなぁと、
ネタをひとつ思い出したからです♪

※そもそも、フラッグカウンターってなんだよ？
どうやって、設置したらいいのかわからん！って方は、
ココとかココとかココあたりのブログを読んでやってみてください♪
大丈夫！そんなに難しくはありません。
ぜひ、チャレンジを♪


さて、本題ですが…
みなさん、フラッグカウンターを存分に楽しんでますか？
私がフラッグカウンターをご紹介してから、7ヶ月あまり、
国旗どれくらい増えました？

日々ブログを書いている中で、
ふと気づくと国旗が増えてる、それってすごく嬉しいですよね？
今回新たについたこの国旗、なんていう名前の国だろ？とか、
いったいどこにあるのかな？とか、思いませんでしたか？
なんとこれ、フラッグカウンターのサイトで見られるんです！
いまさらで(m´・ω・｀)m ｺﾞﾒﾝ…

フラッグカウンターって、
アクセスに応じて国旗の数が増えていく
ただのアクセス数カウンターだと思ってませんでしたか？
いやいや実は、忍者カウンターとか、なかのひとみたいな
ちゃんとしたアクセス分析もできるんですな

自分のサイトを見るのはカンタン！
まず、自分のカウンターのURLをメモ帳か何かにコピペします。

どこにあるかわからないって方は…
私のブログを読んで設置した方はほとんどが
スタイルシートの「詳細編集」→「サイドメニュー」→「何シテルフッター」の
※一部別の場所に貼ってある方もいるかも知れません
background:urｌのあとの（）カッコの中に入っています。

もしどうしても見つけられない場合は…
CSS書き出しで、テキストに書き出して検索する方法もありますが
誤って、ブログの設定ごと消してしまうおそれがあるので注意。
それでも、やり方が必要なときはコメかメッセを下さい。

↓抜き出したURLはこんな感じのはずです
http://AAA.flagcounter.com/count/ZZZ/bg=191919/txt=F7F7F7/border=2828cc/columns=3/maxflags=248/viewers=Since+2010.2.1/labels=1/pageviews=1/

このURLのなかで
AAA＝任意の英数字3または4文字
ZZZ＝任意の英数字2～4文字
の、2つの部分で、各アカウントを管理していますので
ご自身のフラッグカウンターのURLから、
この2つの部分の、英数字を抜き出して下さい。
（私のカウンターではAAAの部分がs06　ZZZの部分がｘｚｘN　でした　）

その文字を使って、
http://AAA.flagcounter.com/gmap/ZZZ
（私の場合だと、http://ｓ06.flagcounter.com/gmap/xzxN）
に、アクセスすると…
　　　　　　　　
※画像をクリックすると別窓で大きく開きます
こんな感じに、いままでアクセスがあった国の場所が一目瞭然！

さらに上の、タブをクリックすることで…
　　　

こんな感じのページも見られますよ！

いままでの国旗集めがさらに楽しくなる機能です。
ちょっとだけめんどくさいかもしれないけど、ぜひ、やってみてください!!

※最後にいつものお約束ですけど、
スタイルシート弄りは自己責任でお願いします。
いじったことでなにか不具合がありましても私は一切責任を取れません。
根本的に間違えているかもしれません。
その点をご了解いただいてから、
スタイルシート弄りを始めていただきますようお願いいたします。

皆さんこんばんは、そして超お久しぶりです。
プレ之進です♪
爆笑くんがこれまたかなりのお久しぶりでブログを上げたので
私も便乗して…、アップしてみました（笑）

皆様にご心配いただきました
ウチのお母ちゃんはすっかり元気になり
（へこたれていた親父も元気になりましたｗ）
来月の弟の結婚式に向けて貸衣装だの向こうの宿の手配など
精力的にやっているようです。
私は新郎の兄という立場なのに荷物運び兼運転手扱いが半決まりで
日々、戦々恐々としております（笑）
ご心配いただいた皆様本当にありがとうございました！

さて、本題ですが、
今日はまたもや「フラッグカウンター」の件です。
（設置方法はココ、内容の変更はココを参照のこと）

以前に私のブログでフラッグカウンターを紹介したときに、
フラッグカウンターを設置された方が何人かいらっしゃると思いますが
その後、国旗が増えてからスタイルシート弄ってますか？
国旗が増えているのに、表示可能域の高さを設定し直してないので
下のほうが欠けたおかしなカウンターになってしまっていませんか？

↑こんな状態とか、「FLAGcounter」の文字が出ていないとか…
もしこういう方がいたら、（いっぱいお見かけするから書いてるんですが…）
せっかくの国旗が全部表示できていないのはもったいないので
ぜひ、スタイルシートを弄りましょう！とてもカンタンですから♪

忘れているかもしれないから、
まずは、設置場所をおさらいしておきましょう…。
スタイルシートの「詳細編集」→「サイドメニュー」→「何シテルフッター」です。
width:281px;
margin:10px auto;
height:165px;
background:url(フラッグカウンターのURL )
no-repeat top center;
上記のような文字列が入ってるはずです。

その中のheight：○○px;というのが高さの指定ですので
お好みの数字を入れて調節してください。
※国旗が増えて行数が増える度に調節するのが推奨ですが
いちいち変えるのが面倒であれば、ある程度余裕を取っておくといいでしょう

ちなみに、width:○○px;は横幅
margin:○○px;は上のコンテンツとの間隔
no-repeat top center;は位置の指定です。

細かいことではありますが
国旗３行表示で国名の略称を表示させる設定（私のカウンターと同じ仕様）の方は
横幅を281pxにしないと、枠線が欠けてしまいます。
それ以上の大きさに設定している方は少ないと思いますが、
もし、いらっしゃるようであれば横幅の調節をおすすめします
　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*　*

で、実は、ここからが本当の本題なのですが…
前回・前々回のブログを読んだ方から、
フラッグカウンターを使ってみたいんだけど
「何シテル」を使ってないので、ほかの場所に埋め込めないでしょうか？
というご質問を受けました。

みんカラのスタイルシートは意外と自由度が少ないので
カウンターやアクセス解析などのブログパーツを埋め込める場所が少なく
「何シテルヘッダー」・「何シテルフッター」が使えないとなると…
(。-`ω-)ンー 難しい…と、ずっと悩んでおりましたが、
やっと埋め込める場所とやり方が分かったので書いておきます。

埋め込む場所は、
スタイルシートの「詳細編集」→「サイドメニュー」→「ユーザー名領域」
もともとここには、
margin:0.5em 0;
とだけかいてあるんですが、その下に
width:281px;
text-align:bottom;
padding-top:165px;
background-image:url('フラッグカウンターのURL');
background-position:top/;
background-repeat:no-repeat;
といれることで、カウンターが自分の名前と自己紹介文の間に入ります
（↑の写真参照）

また、このブログを書いてて気づいたんですが
スタイルシートの「詳細編集」→「サイドメニュー」→「ユーザー自己紹介」
にも、かいてある文字の下に同様の文字列をいれることで
ユーザー名の上にカウンターを入れられるようですね♪
（当然、高さや横幅などはご自身のカウンターの大きさにあわせて調節してください。）

私が知らないだけで、実は埋め込める場所がいろいろありそうですが
とりあえずはユーザー名の周辺にも埋められますよ！
というご報告ですね（汗）

ココが使えれば、何シテルヘッダーにアクセス解析、
何シテルフッターにはツイッターを入れていて
カウンターを入れられないなんて方にもいいかもです。
「保存」を幼ければ何度でもやり直せますのでいろいろ弄ってみてくださいね
（*＾o＾）ノ

※最後にいつものお約束ですけど、
スタイルシート弄りは自己責任でお願いします。
いじったことでなにか不具合がありましても私は一切責任を取れません。
根本的に間違えているかもしれません。
その点をご了解いただいてから、
スタイルシート弄りを始めていただきますようお願いいたします。

こんばんは、プレ之進です！
今日は２月1日に書いたブログの訂正です。
題材は…
←コレ、フラッグカウンター

おかげさまでいろんな方に読んでいただき
実際、「設置できました～」「意外と簡単なんですね」といった
嬉しいコメやメッセを頂いています。
このようにいただくお言葉は、スタイルシートのまとめブログを書く上で
モチベーションアップ↑↑になっています。
こちらこそ拙い内容で今回のように間違いも多いのに
本当にありがとうございます！（*＾o＾）ノ

さて、本題というか訂正点なんですが
私は最初の段階で作ったフラッグカウンターの設定は
あとからは変更できないと思っていたんですが、
完全に私の勘違いでした！

みなさんが、
スタイルシートに埋め込んでいるURL（最初にココで作ったURL）
を以下の規則にしたがって変更することで、
設置されているフラッグカウンターの仕様を変更することができます。

たとえば、以下のURLがあったとして、１つずつ細かく見て行くと…
(便宜上、改行されていますが本来1行のURLです)
http://s06.flagcounter.com/count/◎◎◎◎/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=1/pageviews=1/
http://s06.flagcounter.com/count/◎◎◎◎/
カウンターへのリンクのURL
◎◎◎◎の部分が認識用の固有の文字列になります。
bg=FFFFFF/　　カウンターの背景の色
txt=000000/　　カウンターの文字の色
border=CCCCCC/　　カウンターのフチの色
columns=2/　　国旗を何行の表示にするか
maxflags=12/　　最大いくつまで国旗を表示するか
viewers=0/　左上の文字
「=0」ならVisitors・「=1」ならVieweｒｓ・他の言葉は、
「=のあとに直接入力」（アルファベットのみ）
2個以上の単語を並べるときは+でつなぐ
（例　「Premacy Life」なら、「=Premacy+Life」と記入）
labels=0/　国名略称の有無 （=0なら無・=1なら有）
pageviews=1/　　PV表示の有無（=0なら無・=1なら有）

で、こんなかんじの表示になるはずです
　　　　　　　　　　　　　


これをおのおの任意の設定をすれば、
お好みのカウンターに変更出来るわけです♪

一度スタタイルシートに埋め込んだURLを
「メモ帳」なり「ワードパッド」なりにコピペして、
修正後同じ場所に埋め込んだ方がいいでしょう。
元のURLがわからなくならないように気をつければ、
誤って消してしまうというようなことはおこりにくいと思います。

なお、カウンターの背景色・文字の色・フチの色に関しては
色を6桁の数字で表します（カラーナンバーや色番号といいます）
色番号に関しては、以下のページをご参考ください。
原色大辞典・和色大辞典・洋色大辞典
マツダボディカラーHTML版

今回は基本的に、
すでに設置されている方向けの内容です。
検索などでコチラに来られた方は、ココのブログで
設置方法を説明しております。

ゴチャゴチャしてしまって
余計にわかりにくいかもしれないのですが、
大事なところだったので訂正させていただきました。
皆様の成功をお祈りいたしております（’◇’）ゞ

今回のブログはトラックバック先のコチラの方のブログを読んで
自分の認識の誤りに気づかせていただきました。
どうもありがとうございました！
この記事は、またしても猿まね成功♪について書いています。

こんばんは～（*＾o＾）ノ
2010年もあっという間に一ヶ月が過ぎました…

次もやりますとかいっといて
放ったらかしにしていることの多さに
改めて愕然としています(；´Д｀)
ちょっとずつでも前進しないとねぇ…

そんな中の一つ、スタイルシート関連。
おかげさまで私の弄りの中では大人気の部類に入るんですが
最近全然弄ってなかったんで、月も変わったことだし心機一転
スタイルシートを変えてみました♪

今回のキモは「何シテル？」の下に入れたカウンターです。
↓こういうヤツね

オイラのブログは国旗が一つで悲しいね…orz

みんカラ内でブログにカウンターを設置するのは
たいして珍しくないんですけど、みんなと同じじゃつまらないので
あえてマイナーなこちらをチョイスしましたｗ

このカウンターはフラッグカウンターといって
どこの国からアクセスが有ったのかをカウントしてくれます。
アクセスが有った国の国旗が増えて行く楽しみもあるし
国旗が増えて賑やかになれば、ちょっと個性的になるかな？
…なんて（笑）


では、早速
「フラッグカウンターの設置の仕方」を解説します。

まずは、フラッグカウンターのHPへ
全部英語ですけど読む必要がないのでご安心を。
↓の図を見てください

まずはHPの下にあるチェックリストで
自分用のフラッグカウンターを作ります。
チェックリストの数字や文字・色・国の略称やPVの有無 を変えると、
下のカウンターが選択を反映したものになります。
お好みのものを作りましょう。
※ここで国旗の最大数は「248」にしておくことをオススメします！
（数字が増えてから変更することができないため）
自分の好みのカウンターができたら、黄色い四角をポチっとクリック！

またもや英語だらけのページですｗ

図に書いてある通り、下のほうの文字を使います。
まずは下の文字列を、ワードパッドとかメモ帳などにコピペします。
たとえば↓こんな感じ
[URL=http://s06.flagcounter.com/more/Fmcx][IMG]http://s06.flagcounter.com/count/Fmcx/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=0/[/IMG][/URL]
この文字列の中の[IMG]と[/IMG]に囲まれたURL（ピンク色の箇所）を使います。

スタイルシート→詳細編集→サイドメニューの
「何シテルフッター」の箇所に以下をコピペして貼ってください。
（現状のものと差し替えになります）
width:260px;
margin:10px auto;
height:100px;
background:url(カウンターのURL) no-repeat top center;

width:は幅、height:が高さです
margin:は上のコンテンツとの距離（何シテルとの隙間）となります。
ご自身のブログやカウンターのデザインに合わせて調整してください。
カウンターが増えて、国旗が増えてきたら
height:を調整してあげるとイイと思います♪

プレビューしてみてうまくいったら「保存」をお忘れなく！
○逆にうまくいかなくても保存しなければ大丈夫です。最初からやり直しましょう♪

★最初に作ったカウンターが飽きたとか気に入らないといって
新しいカウンターを作ってしまうと、
せっかくカウントした数字が消えてしまうのでご注意ください!!

【２月１８日 追記】
上記のブログ内で一度フラッグカウンターを設定してしまうと
後からでは変更できないというような記述が有りますが、
実際には変更が可能です。
２月18日に書いたブログに変更の方法を書きましたので
変更される方はそちらをご確認ください


※最後にお約束ではありますが
スタイルシート弄りは
ご自身の責任でお願いします！
スタイルシートの破損や崩れ
その他、何が起こっても
当方は一切責任を負いかねます。