こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
どうやったら、ウエストができますか？
というご質問をいただきました↓↓↓
（ウエスト？ダイエットの質問でしょうか^^;）
疑問いっぱいのふわりまみです。笑
お忙しいところ申し訳ありません。
検索しようにも用語が分かりません。(+_+)
ヘッダーの下の「ホーム」「パソコンレッスン」・・・この帯ってなんて言うんですか？
私もやってみたいと思いながら、まだトライできません。
なんだか、私のブログはウエストがないみたいですよね。
ブログ制作会社さんのアクセスが増えました。笑
どうやったら、ウエストができますか？
質問が通じてますでしょうかぁ？
ふわりまみ
今日はこちら↑のご質問に対してお答えしますね。
まず、ウエストみたいなヘッダーの下の帯とは･･･
グローバルナビゲーション
グローバルナビ
グローバルメニュー
ナビゲーションバー
ヘッダーメニュー
トップメニュー
メニューバー
横メニュー
などと言われ、このような↓バーです。
（↑この画像クリックしたら、お・し・ら・せ、が～^^）
このメニューバーを入れる方法をお伝えしますね！
（ただし、新デザイン対応になります。）
メニューバーを設置するには、
この２つでバッチリです！
まず、フリースペースにHTMLタグを書き込む前に「サイドバーの配置設定」で「使用する機能」に「フリースペース」が入っていることを確認します。
初期設定では、右下にあると思いますが、ここではドラッグして、左上に移動しておきましょう。
こちらの記事は、アメブロのデザインが、プロフィール画像が四角いデザインのCSSで説明しております。
最近のアメブロのデザインである、プロフィール画像が丸いデザインの場合は、こちら↓をご覧くださいませ。
『プロフィール画像が丸いデザインでのメニューバーの設置方法』
フリースペース編集内に、メニューバーの元となるURLを挿入したHTMLタグを書き込みます。
「リンクURL」の部分には、飛ばしたいページのURLを入力してください。
「メニュー1」などの部分には、実際に表示される文字を入力してください。
また、「フリースペース編集」内ではすべての改行はなくして、「1行」になるようにしてください。
「保存」を押して、確認するとメニューバーの元が、まだフリースペースに挿入されているだけの状態になります。
そして、メニューバーのデザインをCSSで設定してあげます。
ここでは、2種類CSSソースを用意しておきますので、どちらかご自由に設置してみてください。
まず、ピンクのバージョンのメニューバーは
次のCSSソースをCSS編集の一番下にコピー＆ペーストしてください。
/* ▼▼▼ グローバルナビゲーションメニュー１ *//* メニュー設置用スペース */
.skinContentsArea{
padding-top:50px;
position:relative;
}/* メニューエリア */
#topmenu{
width:980px; /* メニュー全体の幅 */
position:absolute;
margin:0;
padding:0;
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
}/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0;
list-style: none;
}/* メニューリスト */
#topmenu ul.menu li{
display:block;
float:left;
margin:0;
padding:0;
text-align:center;
width:196px; /*ボタンの幅*/
line-height:40px; /*ボタンの高さ*/
background-color:#ff77dd;/*背景色(ピンク)*/
}/* メニューリストのリンク */
#topmenu ul.menu li a{ /*通常時*/
display:block;
font-size:14px; /*ボタンの文字サイズ*/
color:#000000; /*文字色(黒)*/
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
background-color:#ff77dd;/*背景色(ピンク)*/
}/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字*/
text-decoration:underline;/*下線(あり)*/
background-color:#698fff; /*背景色(薄い青)*/
}
次に、緑の色のバージョン（メニュー項目が1つずつ離れている場合）
のメニューバーは
次のCSSソースをCSS編集の一番下にコピー＆ペーストしてください。
/* ▼▼▼ グローバルナビゲーションメニュー２ *//* メニュー設置用スペース */
.skinContentsArea{
padding-top:50px;
position:relative;
}/* グローバルナビメニューエリア */
#topmenu{
width:980px; /*メニュー全体の幅*/
position:absolute;
margin:0;
padding:0;
top:0px; /*上下位置調整*/
left:0px; /*左右位置調整*/
display:block;
}/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0;
list-style:none;
}/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:0.5px; /*メニューのスキマ*/
border:3px double #ffffff;/*線の太さ 種類 色*/
background-color:#99ff99;/*背景色（薄い緑）*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
}/* メニューリストのリンク */
#topmenu ul.menu li a{ /* 通常時 */
display:block;
margin:0;
padding:0;
text-align:center;/*中央寄せ*/
font-size:14px; /*ボタンの文字サイズ*/
color:#000000; /*文字色(黒)*/
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
}/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#698fff; /*背景色(薄い青)*/
}
「保存」ボタンを押して、確認してみてください（＾ｕ＾）
うまくメニューバーが表示されましたでしょうか？
ところで、メニューバーを表示するのはこのようにコピー＆ペーストするだけでできてしまうのですが･･･
実は大事なことは、「１．フリースペースにHTMLを書き込む」のところが重要だったりします。
要は、何をクリックさせたいのかが重要だったりします。
しかも、メニューバーは左から重要度の高い順に並べた方がよいですね。
私もメニューバーを設置していて、現在はその大事なところに「Home（ホーム）」としています。
（ある実験をしているものでして^^;）
でも、集客ブログを目指す方は、ウリになる「メニュー」がいいでしょうね。
そして、「アクセス」「お客様の声」「お問い合わせ」「プロフィール」「メルマガ」･･･
といった項目がいいのではないでしょうか。
まぁ、メニュー項目が何がいいのか、というのはプロの集客コンサルの方にまかせることにします、ね^o^!
そう･･･、本日読者登録していただきましたプロのこちらの方に^^↓↓↓
（プロフィールページ復活おめでとうございま～す^^!）
（↑↑↑こちらの画像をクリックしても、プロの方のブログに飛んでいきますよ～）
また、
CSSの編集デザインを使われていない方は、
「カスタム可能」でないデザインでメニューバーを設置するには
をご覧ください！
ところで、これでウエストできそうでしょうか･･･★素直な自分を大切にするふわりまみ★さん（＾ｖ＾）
ご質問ありがとうございました！
（ちなみに、ふわりまみさんを一番最初にご紹介した過去記事は『引き寄せ（2013年05月04日）』になります。）
＜参考記事＞
もっと簡単にメニューバーを設置したいという方は、わざめーばさんがプラグインを作成してくれていますので、そちらを試してみてはいかがでしょうか↓↓↓
『かんたんグロバールナビ設置プラグイン』
＜追記１＞
メニューバーのボタンを画像にしたい方は、こちら↓の記事をご覧ください↓↓↓
『メニューバーのボタンを画像にする方法』
＜追記２＞
メニューバーの位置が下がってしまった方は、こちら↓の記事をご覧ください↓↓↓
ヘッダーメニューバーの位置を修正（CSS編集）
＜追記３＞
メニューバーのボタンを画像を使わずに、CSSだけでグラデーションにしたい方は、こちら↓の記事をご覧ください↓↓↓
メニューバーをグラデーションにするには
以上、メニューバーの設置方法でした。
LIDS札幌・ライフデザインスクール
川上 雄大