メニューバー（グローバルナビ）を設置するには

さし子（指原莉乃）さんの二位転落に
動揺を隠せないワンタンです。

こんにちは。

ところで、なぜか最近こちらのページにチョコチョコ
とアクセスがあります⇒★

メニューバーと言ったり、グローバルナビと言ったり・・・？

ヘッダー下の、こんなリンクの設置方法を書いたページです。

サイトマップと言ったりもするようですが、要するに
ブログのヘッダー（フェースブックだとカバー）の下の
帯状のリンクが並んだものの事です。

で以前、その設置方法を書いたページを読み返してみて、
われながら、ちょっと解りずらいっ！と
思ったものですから、書き直してみました^^;

アメブロにメニューバーを設置する方法

※スキンデザインに「CSS編集用デザイン」を
採用されてる方向けです。

で更にヘッダーの幅が980ピクセルのものを採用されてる
方向けになります。

（メニューバーに五つ、リンクを並ばせる場合です。）

本来でしたら、違うヘッダーの幅や、五つ以外のリンクを
設置する場合についても書きたいところですが、それだと
あまりにも長い記事になってしまいますので、今回は
ブログのヘッダーの幅が980ピクセル、その中に設置する
リンク数が５͡個のものに限定して説明させて頂きます。m(_ _ )m

で、まず最初に以下のタグコードをコピーしてCSSの末尾に
貼り付けて下さい。
（※うまくいかなかった時の為に、変更前のCSSは、コピーして
ご自身のパソコンのメモ帳等に保存しておく事を、お勧めします）。

/* ヘッダー下のメニューバー2014-06-09*/
/*▼▼▼ 変更しない ▼▼▼*/
.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; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*/

※「保存する」ボタンを押した後、F5キーを押す
などして、最新の状態に（キャッシュのクリアを）
しておいて下さい。
※ボタンの背景画像に、自分がアメブロにアップした画像を
使ってます。もし自分がアカウントを削除されたりすると、
設定がくずれてしまうと思います。（そうは、なりたくないのですが^^;）
ご心配でしたら、ご自身の画像フォルダーにアップしたものを
お使いください。

で次にフリースペースに以下のタグコードを
記入して下さい。

<div id="headerMenu"><ul class="menu"><li><a href="http://リンク先URL（１）" target="_blank">（１）テキスト</a></li><li><a href="http://リンク先URL（２）" target="_blank">（２）テキスト</a></li><li><a href="http://リンク先URL（３）" target="_blank">（３）テキスト </a></li><li><a href="http://リンク先URL（４）" target="_blank">（４）テキスト</a></li><li><a href="http://リンク先URL（５）" target="_blank">（５）テキスト </a></li></ul></div>

赤字の箇所に、それぞれ、
ご自身が移動させたいページのURを記入して下さい。

緑字の箇所にメニューバーのそれぞれのボタンに
表示させたいテキスト（例：プロフィール、アクセス
・・等々）を記入して下さい。
なお、テキストの字数が多すぎると、二段になって崩れたようになって
しまう事がありますので、その場合は字数を減らすなどして、調整して
みて下さい。

CSSになるだけ解り易く、コード（文字列）の右横に
「この文字列は何の意味？？」の説明をつけたつもりです。

このCSSを調整して、ご自身のブログに合ったメニューバー
を作ってみてください。

☆ブヒ　ゞ(^_-)v

＞＞いいね！？

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

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

メニューバー（グローバルナビ）を設置するには