スタイルシート弄り♪　その８

約１年ぶりのスタイルシート弄りのまとめです。
途中でもチョコチョコ変更してたんだけど
まとめるの忘れてて・・・

まずはヘッダー部分ですが、
最初に表示されるときに
背景を全部見せたかったので
ヘッダー画像は削除！このままだったら
プロフィールとかと被ってるので・・・

スタイルシートの詳細編集の中から『タブ』を選び
一番上の『タブ』の中に記載されてる
height:○○px;の○○の数字を大きくします。

あまり数値を大きくしすぎると、
毎回ブログ本文などを表示させるのに、
画面を下にするのが大変なんで
マウスを２～３回スクロールすれば
本文が見えるくらいの420pxに設定してみました

すると矢印のようにプロフなどが
下に下がり背景がきれいに表示されます。

んで、今回スタイルシート弄りのメインは～
『FLAG　COUNTER』の設置です♪

その前に・・・①背景を生かせるように
プロフを透過させます。
プロフィール⇒プロフィールテーブルの中に
『filter:alpha(opacity=70);』を追加します。
数字を小さくすれば薄くなるんですが
とりあえず70で！
他に投稿記事テーブルでも適用してみました。

んでメインの②FLAG　COUNTERですが・・・
詳細は各自で検索してみてくださいね！（爆）
各国からのアクセス状況がわかるみたいで
HitGraphを設置してるんですが、
これもおもしろいかな～と
思って追加で設置することにしました！
設置方法ですが・・・

http://flagcounter.com/
上記のサイトで登録します。
もちろん無料です！この辺の細かい設定も
検索すればすぐわかります♪
登録してたら地図の表示になったりしますが
最終的にTop Countriesにチェックしてから
右にある黄色い『GET　YOUR　FLAG　COUNTER』をクリックすれば画面が変わるので、その１行目にある文から
img src=以降の『http://s○○.flagcounter.com/～pageviews=1/』をコピペしときます。

プロフィール⇒自己紹介の中に
下記を追加します。

width:281px;
height:150px;
background:url(http://s○○.flagcounter.com/～Pageviews=1/※コピペした文)
no-repeat bottom;
filter:alpha(opacity=70);

一番下のfilter:alpha(opacity=70);で透過させてます。

上記の方法はトップページにFLAGCOUNTERを
表示させる方法？なので、ブログなど
各コンテンツでも表示させるように
別に設定します。

サイドメニュー⇒ユーザー自己紹介の中にも
下記の文を追加します。

width:281px;
height:150px;
background:url(http://s○○.flagcounter.com/～Pageviews=1/※コピペした文)
no-repeat bottom;
filter:alpha(opacity=70);