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

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

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


テーマ:
さし子( 指原莉乃)さんの二位転落に
動揺を隠せないワンタンです。

こんにちは。

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

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


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

フェースブックページ


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

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


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

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


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

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

フェースブックページ


本来でしたら、違うヘッダーの幅や、五つ以外のリンクを
設置する場合についても書きたいところですが、それだと
あまりにも長い記事になってしまいますので、今回は
ブログのヘッダーの幅が980ピクセル、その中に設置する
リンク数が5͡個のものに限定して説明させて頂きます。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キーを押す
などして、最新の状態に(キャッシュのクリアを)
しておいて下さい。
※ボタンの背景画像に、自分がアメブロにアップした画像を
使ってます。もし自分がアカウントを削除されたりすると、
設定がくずれてしまうと思います。(そうは、なりたくないのですが^^;)
ご心配でしたら、ご自身の画像フォルダーにアップしたものを
お使いください。


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

<!--メニューバー06-09-->
<div id="headerMenu"><!--
--><ul class="menu"><li><a href="http://リンク先URL(1)" target="_blank">(1)テキスト</a></li><!--
--><li><a href="http://リンク先URL(2)" target="_blank">(2)テキスト</a></li><!--
--><li><a href="http://リンク先URL(3)" target="_blank">(3)テキスト </a></li><!--
--><li><a href="http://リンク先URL(4)" target="_blank">(4)テキスト</a></li><!--
--><li><a href="http://リンク先URL(5)" target="_blank">(5)テキスト </a></li><!--
--></ul><!--
--></div>


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

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


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

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



☆ブヒ ゞ(^_-)v


ワンタンさんをフォロー

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

Ameba人気のブログ

Amebaトピックス