ユーザーページ ヘッダー変更方法紹介

前回のブログの続き

今回はやり方を紹介します


まず、この青い帯状のヘッダータブ
仕様上、このタブの画像を直接変更することはできなくなっています。
スタイルシート内を探しても、オブジェクトが見つかりません

200901_Style sheet modify（３） posted by (C)meme

そこで
この青いヘッダータブの上にフィルターを掛けて、
見た目上だけ見えなくする。

そして、その上に自分で作成した、
好みのタブ画像を貼り付けるという方法をとります


つまり、元の青いヘッダータブは存在するけど見えない。
見た目は上に被せた、新しいタブ画像という方法です
（見えていないだけなので、実際にクリックした際は、
　青いヘッダータブをクリックしていることになります）

なので、
まずは見えない青いタブの上に被せる、
ステキなタブ画像を作ります

画像は好みでどんなものでも構いません。
まぁーたんはボタン風の画像をチョイス

200901_Style sheet modify（５） posted by (C)meme

ここで注意点
見えない青いタブ画像の上に、好みの画像を被せるだけなので・・・。
順番を入れ替えると、
見た目とリンク先がバラバラになるのでＮＧ
そして、横幅を変えてもいけません

そこで作成するのは、
93ｘ25ピクセルの画像を１０個。
（縦を広げる分には若干の余裕がありますが、横幅は絶対変えちゃダメ）

そして、それを横に連結。
これで横が930ピクセルになり、
青いヘッダータブと長さと同じになります。


200901_Style sheet modify（６） posted by (C)meme


画像ができたら、
スタイルシート編集画面で
body{
}
の下に下記内容を貼り付けます
『作成したタブ画像のＵＲＬ』には、
作成したタブ画像のＵＲＬを貼り付けます
-----------------------------------------------------------------
/* 2009/01/18 add ヘッダータブ変更 Start */
body #UserHeader #gNav {
/* フィルター掛けてヘッダータブを不可視にする */
filter: alpha(opacity=0);

/* ＩＥ以外のブラウザに対応 */
‐moz‐opacity: 0.0;
opacity: 0.0;
}

#UserHeader {
/* ヘッダータブ画像 */
background-image: url('作成したタブ画像のＵＲＬ');
/* 繰り返し表示なし */
background-repeat: no-repeat;
/* 中央下寄せにタブ画像を配置 */
background-position: center bottom;
/* 背景に背景画像と同一のものを採用 */
background-color: transparent;
}

/* ここまでで、タブの画像変更は終了 */
/* 以下、文字色を変更。 */

#UserHeader {
/* 「ようこそ○○さん」の色変更 */
color:#c0c0c0;
}

/* マイページ　｜　ログアウト　｜　ヘルプ　の各リンク(a)色変更 */
#UserHeader #hdUserPage #hdUserPageMinkara A {
color: #808080 !IMPORTANT;text-decoration: none;
}

/* オンマウス効果(a:hover)色変更 */
#UserHeader #hdUserPage #hdUserPageMinkara A:hover {
color: #ff1493 !IMPORTANT;
text-decoration: underline !IMPORTANT;
font-weight: bold !IMPORTANT;
}

/* リンクの仕切り線(|)色変更 */
#UserHeader #hdUserPage #hdUserPageMinkara UL LI.line {
BORDER-RIGHT: #dc143c 1px solid !IMPORTANT;
}
/* 2009/01/18 add ヘッダータブ変更 end */
-----------------------------------------------------------------
文字色については、
color:#XXXXXXX部分を自分の好きな色に変えればＯＫ
ネットで『ＨＴＭＬ色　色一覧』等で検索すれば出てきます。

完成画像はこんな感じ。

200901_Style sheet modify（７） posted by (C)meme

興味があったら、
チャレンジしてみてください

みんカラ利用規約に触れる可能性もありますので、
くれぐれも、タブ変更は自己責任で行ってください