パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


どうやったら、ウエストができますか?

というご質問をいただきました↓↓↓
(ウエスト?ダイエットの質問でしょうか^^;)
川上先生☆

疑問いっぱいのふわりまみです。笑
お忙しいところ申し訳ありません。
検索しようにも用語が分かりません。(+_+)
ヘッダーの下の「ホーム」「パソコンレッスン」・・・この帯ってなんて言うんですか?
私もやってみたいと思いながら、まだトライできません。
なんだか、私のブログはウエストがないみたいですよね。
ブログ制作会社さんのアクセスが増えました。笑
どうやったら、ウエストができますか?
質問が通じてますでしょうかぁ?

ふわりまみ


今日はこちら↑のご質問に対してお答えしますね。

まず、ウエストみたいなヘッダーの下の帯とは・・・

グローバルナビゲーション
グローバルナビ
グローバルメニュー
ナビゲーションバー
ヘッダーメニュー
トップメニュー
メニューバー
横メニュー


などと言われ、このような↓バーです。

kyoro 
(↑この画像クリックしたら、お・し・ら・せ、が~^^)

このメニューバーを入れる方法をお伝えしますね!
(ただし、新デザイン対応になります。)

メニューバーを設置するには、

1.フリースペースにHTMLタグを書き込む
2.CSS編集でデザインを整える


この2つでバッチリです!

まず、フリースペースにHTMLタグを書き込む前に「サイドバーの配置設定」で「使用する機能」に「フリースペース」が入っていることを確認します。
初期設定では、右下にあると思いますが、ここではドラッグして、左上に移動しておきましょう。

川上雄大のワンポイントレッスン
 

フリースペースにメニューリンクHTMLタグを書き込む

フリースペース編集内に、メニューバーの元となるURLを挿入したHTMLタグを書き込みます。

<div id="topmenu"><ul class="menu"><li><a href="リンクURL">メニュー1</a></li><li><a href="リンクURL">メニュー2</a></li><li><a href="リンクURL">メニュー3</a></li><li><a href="リンクURL">メニュー4</a></li><li><a href="リンクURL">メニュー5</a></li></ul></div>


リンクURL」の部分には、飛ばしたいページのURLを入力してください。
メニュー1」などの部分には、実際に表示される文字を入力してください。

また、「フリースペース編集」内ではすべての改行はなくして、「1行」になるようにしてください。

「保存」を押して、確認するとメニューバーの元が、まだフリースペースに挿入されているだけの状態になります。

川上雄大のワンポイントレッスン
 
そして、メニューバーのデザインをCSSで設定してあげます。

ここでは、2種類CSSソースを用意しておきますので、どちらかご自由に設置してみてください。

CSSでデザインその1(シンプルバージョン)

まず、ピンクのバージョンのメニューバーは

川上雄大のワンポイントレッスン
 
川上雄大のワンポイントレッスン


次のCSSソースをCSS編集の一番下にコピー&ペーストしてください。

/* ▼▼▼ グローバルナビゲーションメニュー1 */
/* メニュー設置用スペース */
.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; /*背景色(薄い青)*/
}


CSSでデザインその2(スキマバージョン)

次に、緑の色のバージョン(メニュー項目が1つずつ離れている場合)
のメニューバーは

川上雄大のワンポイントレッスン
 
川上雄大のワンポイントレッスン

次のCSSソースをCSS編集の一番下にコピー&ペーストしてください。


/* ▼▼▼ グローバルナビゲーションメニュー2 */
/* メニュー設置用スペース */
.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; /*背景色(薄い青)*/
}

「保存」ボタンを押して、確認してみてください(^u^)

うまくメニューバーが表示されましたでしょうか?

<注意!>
必ずCSSのバックアップはとっておいてくださいね!



ところで、メニューバーを表示するのはこのようにコピー&ペーストするだけでできてしまうのですが・・・

実は大事なことは、「1.フリースペースにHTMLを書き込む」のところが重要だったりします。

要は、何をクリックさせたいのかが重要だったりします。
しかも、メニューバーは左から重要度の高い順に並べた方がよいですね。

私もメニューバーを設置していて、現在はその大事なところに「Home(ホーム)」としています。
(ある実験をしているものでして^^;)
でも、集客ブログを目指す方は、ウリになる「メニュー」がいいでしょうね。

そして、「アクセス」「お客様の声」「お問い合わせ」「プロフィール」「メルマガ」・・・
といった項目がいいのではないでしょうか。

まぁ、メニュー項目が何がいいのか、というのはプロの集客コンサルの方にまかせることにします、ね^o^!

そう・・・、本日読者登録していただきましたプロのこちらの方に^^↓↓↓
(プロフィールページ復活おめでとうございま~す^^!)

川上雄大のワンポイントレッスン 
(↑↑↑こちらの画像をクリックしても、プロの方のブログに飛んでいきますよ~)


「カスタム可能」でないデザインでメニューバーを設置するには

また、
CSSの編集デザインを使われていない方は、

「カスタム可能」でないデザインでメニューバーを設置するには

をご覧ください!





ところで、これでウエストできそうでしょうか・・・★素直な自分を大切にするふわりまみ★さん(^v^)
ご質問ありがとうございました!
(ちなみに、ふわりまみさんを一番最初にご紹介した過去記事は『引き寄せ(2013年05月04日)』になります。)



<参考記事>
もっと簡単にメニューバーを設置したいという方は、わざめーばさんがプラグインを作成してくれていますので、そちらを試してみてはいかがでしょうか↓↓↓

『かんたんグロバールナビ設置プラグイン』


<追記1>
メニューバーのボタンを画像にしたい方は、こちら↓の記事をご覧ください↓↓↓

『メニューバーのボタンを画像にする方法』

<追記2>
メニューバーの位置が下がってしまった方は、こちら↓の記事をご覧ください↓↓↓

ヘッダーメニューバーの位置を修正(CSS編集)


<追記3>
メニューバーのボタンを画像を使わずに、CSSだけでグラデーションにしたい方は、こちら↓の記事をご覧ください↓↓↓

メニューバーをグラデーションにするには





以上、メニューバーの設置方法でした。


LIDS澄川・ライフデザインスクール
川上 雄大
いいね!(109)  |  コメント(73)  |  リブログ(0)