ユーザーページヘッダーの変更について。

本日三度目のブログ更新です。
みんカラ友達のかずさんや
そのお友達のかおる！さん、
さらにそのお友達の沙耶さんが
面白そうなことをされていたので
自分もマネッコでやってみることにしまして…。
一応、分かりやすく自分なりに編集したつもりなので
これから変更してみようと思われる方は参考にして下されば幸いです。


以下は、スタイルシートを弄ってる方限定のモノになります。
スタイルシートを弄る気がない方はスルーして下さい。





ユーザーページヘッダーの帯について。
この青い帯部分、導入された当初からヤボったくて見た目がよろしくない。
スタイルシートを統一感が出る様に弄ってる方にとって目の敵。
皆さんブーイングだったと思われます。





帯部分をカスタマイズしちゃおうってワケです。
とりあえず、ヘッダー部分作りの第一歩です、
画像作成・処理ソフトであれば何でも良いかと思います。
AdobeのPhotoshopなどが一般的なのでしょうけれどもフリーソフトでも十分できますね。
現に、自分はPixiaを5～6年くらい愛用しています。
そこら辺は自分の好みで選んで下さい。
で…画像の様に「93×25pixel」で新規作成。
この大きさが一個分のアイコンサイズ。





そのサイズで好きな様にデザインしていきます。
トップ、ブログ、愛車紹介、パーツ、整備手帳、フォト、スポット、グループ、ナンデス、サーチ
合計10種類のアイコンを作りましょう。
背景を透明色にすれば、背景と同化させることも出来ますし、逆に目立たせる事も出来ます。
10個分のアイコンをそれぞれ保存しておき…





最後につなぎあわせます。
繋ぐ方法はいくつかあると思います。
自分は930×25pixelでブランクを新規作成。
そこに先ほどの10個のアイコンをコピペして貼り付けていきました。
まぁ…そんなに難しいモノでもありませんね（笑）
保存形式はpngやjpgやgifが一般的ですが…
jpgで保存すると滲みが出やすいのでこういう時はgifを多用してます。
jpgは写真などの中間色が多いモノに向いてますが
逆にアニメなどの色をクッキリシャープに表現したい時はgifが便利。
その代わり、使える色は限定されますが…。
また、gifとpngは透過画像（背景が透明になる）にも応用出来ます。
ここら辺はもっともっと詳しく説明出来る方がいると思いますので割愛します。
ちなみに、自分が作ったのはこんな感じの透過アイコンになります。


そして、画像をアップロードします。
アップロード場所は「スタイルシートの画像保管場所」になります。





「マイページ」→「スタイルシート」の一番下です。
決して800×800pixel以内に自動画像変換はしないで下さい。
「しない」を選んでおきましょう。
さもないと…悲しい結果になってしまいますから(ノー`)（笑）
そして、忘れないで欲しいのは画像のURLをメモしておくこと。
あとで使いますよ～！





そして、スタイルシートにこの変更を挿入していきます。
赤枠の部分(body部)に以下の文面を挿入してみましょう。
(原文は沙耶様の所から拝借)
もちろん、先ほど作った帯の画像URLを貼り付けるのを忘れずに。
太字の部分を挿入して下さい。

body #UserHeader #gNav
{
filter: alpha(opacity=0);
-moz-opacity: 0.0;
opacity: 0.0;
}
#UserHeader
{
background-image: url('↑で作成した930×25pxの画像URL');
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
}

コレで完成です。
自分は「透過gif」を使って背景が透けて見える設定にしているので
あのヤボったい青い色の帯は排除出来ました。
やりようによってはもっともっとスタイリッシュになりますし
参考にして貰えたら幸いです。
そして…お約束ですが「自己責任で」よろしくお願いします。
また、このカスタマイズは未確認ではありますが
みんカラ規約に触れる可能性があることも明記しておきます。


追記。
このスタイルシート変更については「IE6」でのみ動作環境確認しています。
他のブラウザでは確認してませんので悪しからず。


さらに追記。(090128)
火狐対応にするためスタイルシート構文を一部変更しました。


さらに追記。(090219)
2009年02月18日付けでカービューより以下の警告メールが来ました。
よって、このカスタマイズは規約違反だと言うことが明確になり
当初の帯に戻すことにしました。

【カービュー】ご確認ください
平素はカービューをご利用いただきありがとうございます。
カービュー　サポートセンターでございます。
お客様のみんカラご利用につきまして、
弊社が自動的に表示しているヘッダ・フッタ、グローバルナビゲーション
広告等を非表示にする行為、しようと試みる行為、
デザインの変更を行う事は禁止させていただいております。
ご対応をお願いいたします。
なお、状況によっては、メンバーズIDのユーザー登録を
削除させていただく場合がございます。予めご了承ください。
今後とも、ご利用規約に基づくご利用をお願い申し上げます。

この記事は、失敗だな(-▽-； について書いています。
この記事は、【スタイルシート】ユーザーページ ヘッダー変更 について書いています。
この記事は、スタイルシートを弄って、新ヘッダーの青色帯を消してみる。 について書いています。
この記事は、どーーしても変えたい！！ について書いています。