アメブロのヘッダー下にグローバルメニューバーを設置する方法【アメブロカスタマイズ】 | ヱビスビールとアフィリエイト=自由な生活。34歳超残業スーパーサラリーマンが発信するネットビジネス講座

ヱビスビールとアフィリエイト=自由な生活。34歳超残業スーパーサラリーマンが発信するネットビジネス講座

「平日の昼間っからヱビスビールが飲める生活!」それは、お金と時間に縛られない自由な生活を意味します。
34歳超多忙・超残業だらけのサラリーマンが、アフィリエイト、オークション、転売、輸入、あらゆるネットビジネスで給料以上のお金を稼ぎ出すネットビジネス大百科!


テーマ:
どうも、北海大家です。
名前覚えてくれました?

今回は、『CSS編集用デザイン』を適用したアメブロのヘッダー下にグローバルメニューバーを設置する方法をご紹介します。

前回の設定をしていない方はこちら
アメブロのデザインをカスタマイズする【基本編】


メニューぐらいブログにつけたいですよね?
ワタシは最初、メニューを付けるのは、難しいと思ってました。
でも、意外と簡単でしたよ!

「時間をかけずに簡単に」

が、テーマなので、大丈夫です!

画像を使用しないごくシンプルなメニューですが、その分、とても簡単に設置できますのでぜひチャレンジしてみてください。


デザインの変更
  ↓
CSSの編集

ヱビスビールとアフィリエイト=自由な生活。33歳超残業スーパーサラリーマンが発信するネットビジネス講座


■『CSSの編集』ページになったら、『現在使用中のデザインCSS』の文字入力欄を一番下までスクロールし、以下の『CSS貼り付けコード』を一番最後に追加する要領で貼り付けて(コピペして)ください。
ヱビスビールとアフィリエイト=自由な生活。33歳超残業スーパーサラリーマンが発信するネットビジネス講座
この時、貼り付け前の一番最後の一文字が
閉じ括弧 『 } 』 の場合、削除してしまう失敗が多いので、消してしまわないよう注意して下さい。


『CSS貼り付けコード』

--ここから--

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
/*▼▼▼ 変更しない ▼▼▼*/
.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:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#3366ff; /* 背景色(濃い青) */
background-image:url(); /* 背景画像 */
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; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*/


--ここまで--

■『CSS貼り付けコード』を貼り付けたら、『保存ボタン』をクリックして保存して下さい。

■次に、サイドバーのフリースペースを編集します。
ヱビスビールとアフィリエイト=自由な生活。33歳超残業スーパーサラリーマンが発信するネットビジネス講座

■『フリースペースの編集』ページになりますので、フリースペースの編集スペースに、以下の『フリースペース貼り付けコード』を貼り付けて下さい。

特に場所の指定はないのですが、他のタグと入り混じってしまわないよう、一番最後に追加するのが失敗しにくいと思います。


--ここから--

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー1</a></li><!--
--><li><a href="#" target="_blank">メニュー2</a></li><!--
--><li><a href="#" target="_blank">メニュー3</a></li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>


--ここまで--

■貼り付けが終わったら「保存」を押して保存しておきましょう。

■保存できたらメニューの編集をしましょう。

『フリースペース貼り付けコード』の3行目から7行目までの各1行が1つのメニューボタンの設定になります。

基本的な設定は、『リンク先URL(アドレス)』と『ウィンドウ指定』と『表示文字』です。

まず、『リンク先URL』は、ボタンをクリックしたときに表示するページのURL(アドレス)で、『#』と書いてある部分に(『#』を消して)書いてください。

『ウィンドウ指定』は、ボタンをクリックしたときに、リンク先を同じウィンドウで表示する場合は『target="_blank"』を削除します( 別ウィンドウで表示する場合はそのまま残しておいてください)。

そして、『表示文字』は、メニューボタンに表示される文字で、『メニュー1』~『メニュー5』の文字を表示したい文字に書き換えればOKです。


メニューの編集が終わったら『保存ボタン』をクリックして編集内容を保存してください。

■以上で、グローバルナビ(グローバルメニュー)の設置方法は終わりです。

ブログを表示して、設置できたか確認してみましょう。

なお、特に問題なくできたはずなのに『表示が変わらない』あるいは『フリースペース内に表示されてしまう』といった場合は、一度F5キーを押す(Windowsの場合)などして、ページを再表示してください。


以上で、『CSS編集用デザイン』を適用したアメブロのヘッダー下にグローバルメニューバーを設置する方法は終わりです。

ぜひ、チャレンジしてみてくださいね。
北海大家でした。


少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね

(^^♪ 

北海大家さんをフォロー

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

Ameba人気のブログ

Amebaトピックス