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

こんばんは！
昨日は私のつたないスタイルシート解説に
多くの方が関心をよせていただき感謝しております！

ここ数日のスタイルシート弄りの中で
やってみたもう1個のいじりです。
やり方次第では面白い感じにできると思うんで
お時間があれば挑戦してみてください♪

今回はタイトルと写真のとおり、
メニューバーの上の白い空間に画像を入れる方法です。

昨年末のメニューバーができた時に、
白い部分の色を変更させるやり方として
お友達のkoneeさんが
ブログで紹介されていた方法を元にしてます。
（黒あぶさんという方が作ったプロパティです）


***********************************************************************
1.スタイルシートの一番最後に以下の文字列を入れます
/*===============2008/12 新みんカラヘッダー対策===============*/

/* ヘッダーの背景色 */
#UserHeader {
background-color: #000000; /* ←黒 */
}

}/* ようこそ○○さん */
#UserHeader #hdUserPageMinkara .hdMinkaraMember div.reg {
color: #ffffff;　/* ←白 */

}

/* マイページ，ログアウト，ヘルプ */

#UserHeader #hdUserPage #hdUserPageMinkara a {color: #ffffff;}
#UserHeader #hdUserPage #hdUserPageMinkara a:link {color: #ffffff;}
#UserHeader #hdUserPage #hdUserPageMinkara a:visited {color: #cccccc;}
#UserHeader #hdUserPage #hdUserPageMinkara a:hover {color:#ff0000;}

/* 上から白、白、銀、赤です。 */

/* ナビメニュー の両サイドカット*/

#UserHeader #gNav {width: 0; }

/*===============2008/12 新みんカラヘッダー対策===============*/

2.上記の文字列を入れればメニューバーの上の部分の色が任意で変えられます
ヘッダーの背景色とある部分の「#000000」が色番号ですので
「原色大辞典」などを参考にいじってみてください。
ちなみにその下にある命令文は、その領域にある文字色の指定です
各々変えられますので見やすい色にしてください。

3.この部分に「画像」を入れる方法ですが…
まずは入れる画像をスタイルシート用画像ページに保存します
高さが30px程度であればどんな画像でもかまいません
（画像によっては、文字が非常に見にくくなります…）

ちょっと遊びで文字入りを作ってみました
「琥珀会」

「CLUB 25E」


4.上記のプロパティの…
#UserHeader {
background-color: #000000;
の部分を
#UserHeader {
background:url('埋め込む画像のURL');
と書き変えます。（もちろんURLの部分は画像のURLを入れてください。）

プレビューするとこんな感じです…
「琥珀会」


「25E」


ただし単純に画像をメニューバーの上に敷き詰めるだけなんで
模様（文字など）が画面の大きさによって動いてしまいます。
「マイページ」や「ログアウト」の文字とかぶると
非常に読みにくくなってしまうので
画像か文字かを、うまく調整してください。

なお、アルミニウムのスタイルシートをお使いの方は
カッコ内のURL部分に
/styles/images/almi/base_bg.gif
と、入力すると背景と同じ柄を使えます。


もしよかったらこの方法も使ってみてください♪
メニューボタンごと変えてしまう方法よりかは簡単だと思います！
なお、それは違うんじゃ？　とか　ココはこうしたほうがいいよ～
とかのご意見もお待ちいたしております（*^o^）ノ