狸猫@廃ドラ仙人のブログ一覧

　さすがに、ブレ弄りネタが尽きたので、今日は、スタイルシートを少し弄ってみました。
　最近、ユーザーページヘッダーが変更され、最上部の地色が白抜きになり、ちょっとお間抜けスタイルになっているので、利用規約上問題のない程度の弄りで、それを変更してみました。
　なお、狸猫は、ヘッダーアイコンを隠す方法は知らないので、間違っても質問はしないでくださいね。

　　今回の変更方法は、背景画像及び背景色等一括の場合スタイルシートに以下記述を追加するだけです。
　＃UserHeader　{
　　color: #文字色； 　 　　　 /*　ようこそ．．の文字色指定　緑囲い部　*/
　　background:('背景画像usl'）repeat #背景色；　　　 /* 赤囲い部　*/
　｝

背景色だけ変える場合
　＃UserHeader　{
　　color: #文字色； 　 　　　 /*　ようこそ．．の文字色指定　緑囲い部　*/
　　background: #背景色； 　　　　/* 赤囲い部の行　*/
　｝

　さすがに、怒濤の弄りはネタ不足なので、スタイルシートをすこし、弄りました。
　タイトルヘッダに気づかれた人もいるかとは思いますが、
クリスマスまで一ヶ月を切ったので、ヘッダの狸猫画他２種を
クリスマスバージョンにしてみました。
　ちょっとかわいい狸猫でしょう。

今日もまだまだスタイールシートを弄ってます。
選択されているタブにマウスOnした時にに画像が、変わらないことに気がつき、Activeのときの　Hover画像を追加設定してみました。
　（画像は代わり映えしませんが、）
　
追記　画像をＢＭＰからＧＩＦに変えてみました。



.TabActive1 a:hover { background:
　　url('http://○○/p4-1.bmp') no-repeat 0px 0px; }
.TabActive2 a:hover {background:
　　url('http://○○/p4-2.bmp') no-repeat 0px 0px; }
.TabActive3 a:hover {background:
　　url('http://○○/p4-3.bmp') no-repeat 0px 0px; }
.TabActive4 a:hover {background:
　　url('http://○○/p4-4.bmp') no-repeat 0px 0px; }

　今日は、父の日で昼間は、家族達のおごりで鰻を食べに行きました。
その後、特にすることも無かったので、タグの文字表示と画像置換えにチャレンジしました。
　とりあえずは、動く様になりましたが、画像をBMPで作ったので、読み込みに若干ラグがあります。


　参考までに狸猫の記述は、一般的な方法と同じで、テキストを画面外に追い出した上で、画像の指定をしました。
/*-------------------------------------------------------------
height: 33px;width: 136px;　画像の大きさ
P1-1.bmp:選択後のブログタグ画像
P2-1.bmp:通常時ブログタグの画像
P3-1.bmp:マウスオン時のブログ画像
後、同様にP？-2：愛車、P？-3：スポット、P？-4：なんですか等の画像
-------------------------------------------------------------*/
.TabActive { }
.TabInactive { }
.TabActive a {text-indent: -9999px; height: 33px;width: 136px;
　　display: block; overflow: hidden; }
.TabInactive a {text-indent: -9999px; height: 33px; width: 136px;
　　display: block;overflow: hidden; }
.TabActive1 a {background:url('http://○○/p1-1.bmp') no-repeat
　　0px 0px; }
.TabActive2 a {background:url('http://○○/p1-2.bmp') no-repeat
　 0px 0px; }
.TabActive3 a {background:url('http://○○/p1-3.bmp') no-repeat
　 0px 0px; }
.TabActive4 a {background:url('http://○○/p1-4.bmp') no-repeat
　　0px 0px; }
.TabInactive1 a {background:url('http:/○○/p2-1.bmp') no-repeat
　　0px 0px; }
.TabInactive2 a {background:url('http://○○/p2-2.bmp') no-repeat
　　0px 0px; }
.TabInactive3 a {background:url('http://○○/p2-3.bmp') no-repeat
　　0px 0px; }
.TabInactive4 a {background:url('http://○○/p2-4.bmp') no-repeat
　　0px 0px; }
.TabInactive1 a:hover {background:url('http://○○/p3-1.bmp')
　　no-repeat 0px 0px; }
.TabInactive2 a:hover {background:url('http://○○/p3-2.bmp')
　　no-repeat 0px 0px; }
.TabInactive3 a:hover {background:url('http://○○/p3-3.bmp')
　　no-repeat 0px 0px; }
.TabInactive4 a:hover {background:url('http://○○/p3-4.bmp')
　　no-repeat 0px 0px; }
/*---------------------------------------------------------*/　

　本当は、サイドビューカメラ用のアンダーライト取付を検討する予定だったのですが、少し風邪気味だったので弄りをとりやめて、スタイルシートを室内で弄っていました。
　今日、触ったところは、前回弄り残していた文字の大きさと色調感の統一を中心に行いました。

　とりあえず、これで第2期スタイルシート弄りは終了とします。