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

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

ここ数日のスタイルシート弄りの中で
やってみたもう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^）ノ

※注意※
下記に書かれた方法で
メニューバーを変更すると
みんカラ利用規約違反になります。
すでに何人も警告が来ていますので
（私含む）
実行する際は自己責任で
お願いいたします



こんばんは（*^o^）ノ
病み上がりで会社に行ったら、
いきなり体調を崩したプレ之進です
（つд｀）

あなどれねぇな～、インフルエンザ…orz

さて、昨日のブログに書いたメニューバーを
既存のブルーの帯から任意のボタンに変更する方法ですが…
一応、書いておこうかと思います。
（なにか問題があっても私には対応できないので、自己責任で）
※IE以外では変更されないそうなので要注意。

基本的にある程度スタイルシートを弄ったことがある方向けに
書いていきます。まったく弄ったことがない方は…
このサイト→ABI☆さんの『みんカラのスタイルシート変更方法』
が詳しく書いてあるので目を通してみてください♪

******************************************************************
1.変更するボタンを作ります
　既存のブルーのメニューバーは画面の端から端までありますが
　ボタン自体は、930px×27pxの画像（93px×27pxのボタンが10個並んでいる）なので
　
　このようなボタンを、93px×25pxで10個作成します。
　ボタンを自動生成してくれるサイトはいっぱいありますが、
　私はココを使いました♪　コチラもおすすめ!!

★「ピクセル」という意味の単位を
「px」とすべきところを「pt」と誤表記してました。訂正いたします。
申し訳ありません…orz

2.それらを「ペイント」などを使って連結させて、930×25のバーを作ります

（この画像はサイズを縮小しています）

3.それをスタイルシート用画像に登録します

4.スタイルシートの一番上のほうに、'body'と頭に書かれた文字列があります。
その後ろに以下の文字列を挿入します

　
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;
}

※とらんちょさんのアドバイスによりfirefoxでも見られるように変更


5.上の画面の赤線部分’から’の間に保存したメニューバーの画像URLを貼りつければOKです。

6.プレビューで見てみて自分の作ったメニューバーに変更できていれば「保存」して完成です。

うまくいかなければ「保存」さえしてしまわなければ何度でもやり直せますので
思う存分いじり倒してくださいね（笑）


※この方法でメニューバーを変えると、
ブログなどサイト全体の背景がメニューバーの上の部分
（ようこそ○○さんとか書いてある段）
にも適用されるので、ページ全体に統一感も出て一石二鳥です

自分がよくわかってないので、
下手くそな説明にになってしまいましたが
皆さんのスタイルシート弄りの参考になれば幸いです…

何か間違っていたらやさしくご指摘をお願いしますｍ(_ _;)ｍ