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

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



こんばんは（*^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.プレビューで見てみて自分の作ったメニューバーに変更できていれば「保存」して完成です。

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


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

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

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