こんにちは、パソコンワンポイントレッスン!
PCインストラクターの川上です。
どうやったら、ウエストができますか?
というご質問をいただきました↓↓↓
(ウエスト?ダイエットの質問でしょうか^^;)
疑問いっぱいのふわりまみです。笑
お忙しいところ申し訳ありません。
検索しようにも用語が分かりません。(+_+)
ヘッダーの下の「ホーム」「パソコンレッスン」・・・この帯ってなんて言うんですか?
私もやってみたいと思いながら、まだトライできません。
なんだか、私のブログはウエストがないみたいですよね。
ブログ制作会社さんのアクセスが増えました。笑
どうやったら、ウエストができますか?
質問が通じてますでしょうかぁ?
ふわりまみ
今日はこちら↑のご質問に対してお答えしますね。
まず、ウエストみたいなヘッダーの下の帯とは・・・
グローバルナビゲーション
グローバルナビ
グローバルメニュー
ナビゲーションバー
ヘッダーメニュー
トップメニュー
メニューバー
横メニュー
などと言われ、このような↓バーです。
(↑この画像クリックしたら、お・し・ら・せ、が~^^)
このメニューバーを入れる方法をお伝えしますね!
(ただし、新デザイン対応になります。)
メニューバーを設置するには、
この2つでバッチリです!
まず、フリースペースにHTMLタグを書き込む前に「サイドバーの配置設定」で「使用する機能」に「フリースペース」が入っていることを確認します。
初期設定では、右下にあると思いますが、ここではドラッグして、左上に移動しておきましょう。
こちらの記事は、アメブロのデザインが、プロフィール画像が四角いデザインのCSSで説明しております。
最近のアメブロのデザインである、プロフィール画像が丸いデザインの場合は、こちら↓をご覧くださいませ。
『プロフィール画像が丸いデザインでのメニューバーの設置方法』
フリースペース編集内に、メニューバーの元となるURLを挿入したHTMLタグを書き込みます。
「リンクURL」の部分には、飛ばしたいページのURLを入力してください。
「メニュー1」などの部分には、実際に表示される文字を入力してください。
また、「フリースペース編集」内ではすべての改行はなくして、「1行」になるようにしてください。
「保存」を押して、確認するとメニューバーの元が、まだフリースペースに挿入されているだけの状態になります。
そして、メニューバーのデザインをCSSで設定してあげます。
ここでは、2種類CSSソースを用意しておきますので、どちらかご自由に設置してみてください。
まず、ピンクのバージョンのメニューバーは
次の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; /*背景色(薄い青)*/
}
次に、緑の色のバージョン(メニュー項目が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^)
うまくメニューバーが表示されましたでしょうか?
ところで、メニューバーを表示するのはこのようにコピー&ペーストするだけでできてしまうのですが・・・
実は大事なことは、「1.フリースペースにHTMLを書き込む」のところが重要だったりします。
要は、何をクリックさせたいのかが重要だったりします。
しかも、メニューバーは左から重要度の高い順に並べた方がよいですね。
私もメニューバーを設置していて、現在はその大事なところに「Home(ホーム)」としています。
(ある実験をしているものでして^^;)
でも、集客ブログを目指す方は、ウリになる「メニュー」がいいでしょうね。
そして、「アクセス」「お客様の声」「お問い合わせ」「プロフィール」「メルマガ」・・・
といった項目がいいのではないでしょうか。
まぁ、メニュー項目が何がいいのか、というのはプロの集客コンサルの方にまかせることにします、ね^o^!
そう・・・、本日読者登録していただきましたプロのこちらの方に^^↓↓↓
(プロフィールページ復活おめでとうございま~す^^!)
(↑↑↑こちらの画像をクリックしても、プロの方のブログに飛んでいきますよ~)
また、
CSSの編集デザインを使われていない方は、
「カスタム可能」でないデザインでメニューバーを設置するには
をご覧ください!
ところで、これでウエストできそうでしょうか・・・★素直な自分を大切にするふわりまみ★さん(^v^)
ご質問ありがとうございました!
(ちなみに、ふわりまみさんを一番最初にご紹介した過去記事は『引き寄せ(2013年05月04日)』になります。)
<参考記事>
もっと簡単にメニューバーを設置したいという方は、わざめーばさんがプラグインを作成してくれていますので、そちらを試してみてはいかがでしょうか↓↓↓
『かんたんグロバールナビ設置プラグイン』
<追記1>
メニューバーのボタンを画像にしたい方は、こちら↓の記事をご覧ください↓↓↓
『メニューバーのボタンを画像にする方法』
<追記2>
メニューバーの位置が下がってしまった方は、こちら↓の記事をご覧ください↓↓↓
ヘッダーメニューバーの位置を修正(CSS編集)
<追記3>
メニューバーのボタンを画像を使わずに、CSSだけでグラデーションにしたい方は、こちら↓の記事をご覧ください↓↓↓
メニューバーをグラデーションにするには
以上、メニューバーの設置方法でした。
LIDS札幌・ライフデザインスクール
川上 雄大