メニューバー(グローバルナビ)の設置方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
Decide, dismantle, decorate.
Decide, dismantle, decorate. / tonyhall


2014/01/15

今まで使っていたメニューバー(グローバルナビ)が何故か表示されなくなってしまったので、検索で新しく別のやり方を調べて設置してみました。

ご紹介します。


※CSS編集用デザインを採用されている方向けです。

CSSとフリースペースを使います。

まず、CSSの末尾に以下のコードを貼り付けて下さい。

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する01-14 */
/*▼▼▼ 変更しない ▼▼▼*/
.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
/*▲▲▲ 変更しない ▲▲▲*/
/*▼▼▼ サイズ・位置など ▼▼▼*/
.skinContentsArea{
padding-top:40px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:40px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
#headerMenu ul.menu li a{ /* 通常時 */
color:#000000; /* 文字色(黒) */
font-weight:bold; /* 太字 */
text-decoration:none; /* 下線(なし) */
background-color:#CCFF66; /* 背景色(薄い緑) */
background-image:url(http://stat.ameba.jp/user_images/20140115/08/wantan-52/d3/b5/g/o0196004012814477153.gif); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 細字 */
text-decoration:underline; /* 下線(あり) */
background-color:#698fff; /* 背景色(薄い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*/


貼り付けて保存したら、次にフリースペースに以下のコードを貼り付けて下さい。

<!--新メニューバー-->
<div id="headerMenu"><!--
--><ul class="menu"><li><a href="http://ameblo.jp/wantan-52/entry-11598761362.html" target="_blank">カスタマイズの基本</a></li><!--
--><li><a href="http://ameblo.jp/wantan-52/entry-11744076461.html" target="_blank">ヘッダー画像設定方法</a></li><!--
--><li><a href="http://ameblo.jp/wantan-52/theme-10072932838.html" target="_blank">記事のカスタマイズ </a></li><!--
--><li><a href="http://ameblo.jp/wantan-52/entry-11544985317.html" target="_blank">サイドバーのカスタマイズ</a></li><!--
--><li><a href="http://ameblo.jp/wantan-52/entry-11590617841.html" target="_blank">カスタマイズ一覧 </a></li><!--
--></ul><!--
--></div>


赤字の箇所をご自身の表示させたいリンクに差し替えて下さい。(でないと自分のブログのアクセスが増えてしまいます^^;)

CSSで、ボタンの色や文字色等を、お好みに調整して下さい。

参考になれば、うれしいのですが・・o(^-^)o





関係の無いオマケ^^;

大切なのは、自分のしたいことを自分で知ってるってことだよ。
◎杏里600x


ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス