ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - ポップアップメニュー

ポップアップメニュー

ブログを毎日書いてどんどん続けていくと、趣味など色々なジャンルの事を書いていくのでサイドのメニューだけで、うまくまとめるためには足らなくなる事があると思います。

そんな時には自分でメニューを作ってしまえば上手にまとめる事ができて見やすい整頓されたブログを保てると思います。

さらに今回紹介するポップアップメニューなら1つのブロックから好きなだけ伸ばせるのでほとんどの人は記事がどれだけ増えても綺麗に整頓できると思います。

ポップアップメニューがわからない人もいると思うので見本を作ってみました。
testポップアップメニュー見本20061018041830.gif

つくり方

管理画面の環境設定のテンプレートの設定→[編集]→HTMLの編集を開いてください。そして上の方にある</head>というタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
見つかったら以下のソースを</head>のすぐ上にコピーして張り付けて下さい。

<script type="text/javascript">
<!--
function MenuOn(x){
obj=document.getElementById
("submenu"+x).style.visibility="visible";
}
function MenuOff(x){
obj=document.getElementById
("submenu"+x).style.visibility="hidden";
}
//-->
</script>

張り付けたら今度は、スタイルシートの編集の方を見ます。

スタイルシートの一番下までスクロールさせて最後のタグから一行あけて以下のソースをコピーして張り付けて下さい。

/********** ポップアップメニュー **********/
div.menu {
font-size: 12px;  /*** 文字の大きさ ***/
background: #cccccc;  /*** メニューの色 ***/
width:100%;  /*** メニュー全体の長さ ***/
height: 2em;  /*** メニューの高さ ***/
text-align:center;
position:relative;
top:0;
left:0;
}

div.menu a{
color:#ffffff;  /*** リンク文字の色 ***/
text-decoration: none;
display: block;
line-height: 2em;
width: 100px;  /*** 1つのメニューの長さ ***/
}

div.menu a:visited{
color:#ffffff;
text-decoration:none;
}

div.menu a:hover{
color:#ffffff;  /*** マウスをのせた時の文字の色 ***/
background: #666666;  /*** マウスをのせた時のメニューの色 ***/
text-decoration: none;
}

div.submenu a{
background-color: #cccccc;  /*** サブメニューの色 ***/
border-top: 1px solid #ffffff;  /*** サブメニューの枠の色***/
}

#menu1{
position:absolute;
top:0;
left:0;
}

#menu2{
position:absolute;
top:0;
left:101px;  /*** メニューの長さ100pxを変更したらここも変更 ***/
}

#menu3{
position:absolute;
top:0;
left:202px;  /*** メニューの長さ100pxを変更したらここも変更 ***/
}

#menu4{
position:absolute;
top:0;
left:303px;  /*** メニューの長さ100pxを変更したらここも変更 ***/
}

div.menu span{
display:none;
}

div.submenu {
visibility: hidden;
position: absolute;
left: 0px;}

貼り付けできたら次はポップアップメニュー本体を編集します。

<div class="menu">
<div id="menu1" onmouseover="MenuOn(1)" onmouseout="MenuOff(1)">
<a href="cate01.html"
class="menuhead">メニュー1</a>
<div class="submenu" id="submenu1">
<a href="1.html">1</a><span>|</span>
<a href="2.html">2</a><span>|</span>
<a href="3.html">3</a><span>|</span>
<a href="4.html">4</a></div>
</div>

<div id="menu2" onmouseover="MenuOn(2)" onmouseout="MenuOff(2)">
<a href="cate02.html"
class="menuhead">メニュー2</a>
<div class="submenu" id="submenu2">
<a href="1.html">1</a><span>|</span>
<a href="2.html">2</a><span>|</span>
<a href="3.html">3</a><span>|</span>
<a href="4.html">4</a></div>
</div>

<div id="menu3" onmouseover="MenuOn(3)" onmouseout="MenuOff(3)">
<a href="cate03.html"
class="menuhead">メニュー3</a>
<div class="submenu" id="submenu3">
<a href="1.html">1</a><span>|</span>
<a href="2.html">2</a><span>|</span>
<a href="3.html">3</a> </div>
</div>

<div id="menu4" onmouseover="MenuOn(4)" onmouseout="MenuOff(4)">
<a href="cate04.html"
class="menuhead">メニュー4</a>
<div class="submenu" id="submenu4">
<a href="1.html">1</a><span>|</span>
<a href="2.html">2</a><span>|</span>
<a href="3.html">3</a>
</div></div></div>

メニュー数字の所にメニュー名を記入します。メニューの前にあるcate数字.htmlにはjavaスクリプトを切ってある人でも移動できるようにそのメニューの中の大元のリンクを張ります。

<a href="1.html"></a>
それぞれのメニューの中にあるここの数字にサブメニュー名を1.htmlにはリンクを入れます。
見本では4つと3つのメニューになっていますが、もし足らなければ自分で同じように記入して増やして下さい。

これをメニュー1からメニュー4まで作ってください。
もし4つでは足らない時は、他の4つと同じ物を作ってmenu4・MenuOn(4)・MenuOff(4)の部分を5に直してください。
そして先ほどスタイルシートに張ったソースの
#menu4{
position:absolute;
top:0;
left:303px;
}

ここの下に、
#menu5{
position:absolute;
top:0;
left:404px;
}
と書きたして張り付けて下さい。6個目以降も同様にして足していきます。
すべてできたら、HTMLの編集の<BODY>から</BODY>までの間のポップアップメニューを設置したい好きな場所に設置してください。

カスタマイズの仕方

色や1つのメニューの長さなどを変えるにはスタイルシートに張り付けた方を書き換えます。

それぞれ横に簡単な説明があるので、どこを変更すれば良いのかはわかると思います。
ただ、1つのメニューの長さを変える時は#menu1から#menu4のleft:101px;←この長さもそれぞれ変える必要があるので気をつけてください。100pxから150pxにした時は101pxが151pxになります。次の2からは150ずつ足していった数になります。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事の通りにやってみました!!
大体はうまくいったのですが、色の指定のところがどうしてもうまくいきません。

るんばばさんのみたいに、マウスをのせたときに色が変わる(バックが白で文字が黒)ようにしたいのですが、そのように指定すると、メニュー1と3の文字が出なくなってしまいます。文字が白になってしまうのかもしれません。

またしても、私のやり方が間違っているのかもしれませんが・・・
どういった原因が考えられるのでしょうか?
いつも質問ばかりでスミマセン。
う~ん。
ちょっとここまで複雑になってくると、直接ブログを見るなどしないとよくわからないですね。自分も色の設定は色々試行錯誤しながら、かなり苦労したので・・・。
スタイルシートの色の設定のところをいろいろといじってみるしかないと思います。
色の指定は、るんばばさんも苦労したところなんですね。
私ももうちょっとがんばってみます。
カスタマイズって奥が深いですね・・・
頑張ってください。
カスタマイズは本当に奥が深いです!!
自分もまだmだわからないことでいっぱいです。
お互い頑張りましょうネ!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/595-80d5b30e   

Template Designed by DW99