小粋空間: ナビゲーションバー・シンプルタイプ（その1：基本スタイル）

Top ＞ CSS ＞ナビゲーションバー・シンプルタイプ（その1：基本スタイル）

News

各種ブログテンプレート

2005年4月25日

エントリー本文

ナビゲーションバー・シンプルタイプ（その1：基本スタイル）

Posted at April 25,2005 11:59 PM
Category：[CSS]
Tag：[Customize, MovableType, NavigationBar, Rollover]

最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー（メニューバー）を作ってみました。まずは div タグと a タグを用いたシンプルなタイプです。これは今日の覚え書きさんのオサレなメニューバーを作ろう経由の

Accessify.com：list o matic

をベースにしています。このナビゲーションバーを使って3回に分けてカスタマイズ方法をお送りしたいと思います。

１．テンプレートの設定

まずメニューとなる下記のHTMLタグ（青色）をバナーの下に設定します。

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
 
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

設定したらテンプレートを保存・再構築します（この段階ではまだスタイルが設定されていないので整形された状態で表示されません）。URLやメニュータイトルは適宜修正してください。区切り線は "|" を使ってますが、半角空白や他のマークでも構いません。img タグで画像を配置することも可能です。

２．スタイルシートの設定

次に下記のナビゲーションバー用スタイルを styles-site.css に追加します。

/* ナビゲーションバー全体のスタイル */
#navbar {
    text-align: center; /* 配置 */
    font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
    font-weight: normal; /* フォントの太さ */
    font-size: 12px; /* フォントサイズ */
    width: auto; /* 全体の幅 */
    line-height: 150%; /* テキストの高さ */
}
 
/* リンクのスタイル */
#navbar a{
    background-color: #ffffff; /* 背景色 */
    color:#666666; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
}
 
/* リンクをポイントした時のスタイル */
#navbar a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    text-decoration: none; /* テキストの装飾をなくす */
}

こちらも設定が完了したら保存・再構築します。それぞれの設定の主な役割をコメントで記していますので、適宜カスタマイズしてお使いください。設定がうまくできれば下記のメニューが表示されます（イメージは"Search"を選択している状態です）。

その1：基本スタイル

その2：クリックしたメニューのロールオーバーを保持する

その3：クリック時のロールオーバーを追加

2005.12.18 追記
サンプルリストのリンク表示を修正しました。

Posted by yujiro ReTweet This!

« BlogPeopleで複数ブログ登録時のログインID切り替え | Main | ナビゲーションバー・シンプルタイプ（その2：クリックしたメニューのロールオーバーを保持する） »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ ナビゲーションバー from grumble
前からあったらいいなーと思ってたナビゲーションバー。やっと付けることが出来た。... [続きを読む]

Tracked on May 13, 2005 7:09 PM

≫ 徐々にカスタマイズ・・・ from かくだやま広場ver.8
そういえば、掲示板を入れるの忘れていた自分前回まではミニＢＢＳという方法を採用していた今回、それを導入しようか実は迷っているのだが、大昔に使ってたものをそのまま... [続きを読む]

Tracked on May 19, 2005 10:28 PM

≫ ナビゲーションバーを付けたい from a n i
只今試験的にブログのデザインをオリジナルソースからいじってデザインをいじくってい... [続きを読む]

Tracked on June 6, 2005 9:41 PM

≫ メニューバーを設置 from 碧影想 -GreenShadowBlog-
既にお気づきの方もおられるかと思いますが、今更"メニューバー"を設置しました。 ... [続きを読む]

Tracked on June 18, 2005 1:30 PM

≫ ナビゲーションバー from SOUTHERN ALL STARS
ナビゲーションバーを導入するにあたって小粋空間様で紹介されている以下の記事を... [続きを読む]

Tracked on September 17, 2005 12:47 AM

≫ デザイン変更 from 幻想バイオレンス
もう夏じゃなくなったんで。そして暇だったんで。秋らしい写真がなくて（あ、西洋... [続きを読む]

Tracked on September 25, 2005 1:57 AM

≫ やっと終わりました・・・ from M*C?B Version?
Blogフルリニューアルしました。「とにかくシンプルにしたい」の一心で始めた作... [続きを読む]

Tracked on December 27, 2005 11:29 AM

≫ Blogのカスタマイズ from Memo
このブログのデザインを少しづつ変えていこうと思っています。バナーのデザインを本... [続きを読む]

Tracked on January 19, 2006 5:48 PM

≫ リンクの「ズラ」し from なげやりぶろぐ
毎日毎日MT3.2のカスタマイズをひたすらやってる訳ですが、「これ簡単だし、FC2でも出来るな」と思ったんで、ご紹介。リンクをマウ... [続きを読む]

Tracked on April 26, 2006 6:02 PM

≫ バナーの下にナビゲーションバーを配置 from ドイチェ・マニアック（準備版）
Movable TypeのVersionを最新にUpして、StyleCatche... [続きを読む]

Tracked on September 29, 2006 10:50 PM

新しいメニューバーって？と思って見に来たら、自分のサイトの名前が出ていたのでびっくりしました（笑）。

私が初めてナビゲーションパーツを入れた頃は（livedoor時代です）、まだ周りで導入しているサイトさんは余りなく、解説ページも当然のごとくなかったので、ソースをのぞき込んで、見よう見まねで作った記憶があります。

それが今は使って当たり前に変わってきて、こんな親切な記事までできちゃって、全くうらやましい限りですねぇ（笑）。

[1] Posted by もそ : April 26, 2005 12:47 AM

こんばんは！
こちら３部作がおわった暁に実践してみたいと思います。
ナビゲーションバーをどうにかうまくアレンジしたいと思ってても、
どこか他のサイト様と同じようになってしまうな、と。
なので方法を学んだら俺色にどうにかこうにかなんとか！

いやはや、ナビゲーションバーを一度取り付けたらもう外せないです……。

[2] Posted by towoko : April 26, 2005 12:51 AM

＞もそさん
こんばんはー。
コメント早っ！（笑）
そういえばあの頃？はそういう時代でしたね。もそさんが火付け役かも。
ちなみに転んでもタダでは起きません（意味不明）。

＞towokoさん
こんばんはー。
コメントありがとうございます。
この続きは機能的な内容になる予定ですが、デザインのバリエーションも考えておきますね。
なお ul - li によるバージョンもこの回とは別にエントリーする予定です。

[3] Posted by yujiro : April 26, 2005 1:14 AM

へへへ。。

後2回のエントリー楽しみにしています。

ワクワク♪o(^o^o)(o^o^)oワクワク♪

[4] Posted by ＳＨＯ : April 26, 2005 8:10 AM

＞ＳＨＯさん
おはようございます。
もしかしたら4回になるかもしれません。
ということでどうぞお楽しみに！

[5] Posted by yujiro : April 27, 2005 9:18 AM

こんにちは。
久しぶりにブログに手を入れてみたのですが、
ブログタイトルのトップページのリンクをはずして
メニューバーが必要になったもので、こちらを参考に
させて頂きました。
ありがとうございます。
あとは自分なりの変えていくつもりなのですが、
果たして思い通りにいくかどうか・・・。
何とか頑張ります！

[6] Posted by dongoro5 : September 4, 2005 1:14 PM

＞dongoro5さん
こんにちは。
ご利用ありがとうございます。
うまく設定できたようで良かったです。

記事が「週間粋人観察+α」にも紹介されたようで、おめでとうございます！！

[7] Posted by yujiro : September 5, 2005 3:15 PM

メニューバーの件なんですけど私のblogでは、Flashを使用しているのですがこのナビゲーションバーのようにBlogセンターに表示するにはURLをどのように指定すればいいのでしょうか？普通にターゲットをURLにすると入れ替わってしまいます　お手数おかけしますがサポート宜しくお願いします。

[8] Posted by panser : December 2, 2005 1:56 AM

＞panserさん
こんばんは。
ご質問の件ですが、Flash については全くの素人ですのでお答えすることができません。
お役に立てずすいません。

[9] Posted by yujiro : December 5, 2005 12:06 AM

yujiro様のようにセンターカラムのみに表示させるのは、どのようにURLを指定すればいいのでしょうか？普通にURL指定すると入れ替わってしまいます。お手数おかけしますがサポートお願いします。

[10] Posted by panser : December 6, 2005 12:34 AM

＞panserさん
こんばんは。
すみません。「URL」「センターカラム」「ターゲットをURLにすると入れ替わってしまう」は何を指していますでしょうか？
panserさんのナビゲーションバーもセンターに表示されていると思うのですが、ご質問の内容が汲み取れません。Flash とは関係ない話題でしょうか？
すみませんが「URL」「センターカラム」「ターゲットをURLにすると入れ替わってしまう」「URL指定」等の具体的な内容をもう少し詳しくお知らせください。言葉での説明が難しいようであれば画像を作って配置したい位置を示してくださっても結構です。

[11] Posted by yujiro : December 6, 2005 1:18 AM

ナビバー使用しています。
ひとつこうしたらどうかと思ったのですが、
URL指定で
http://.../となっているところを
<$MTBlogURL>
を使うと楽になりそうです。

ただ、外部ファイルの時もありますのでこれを考えてyujiroさんは...にしたのかもしれませんが････
まあ、ほかの方のお役に立てばと思って書いてみました。

[12] Posted by pokelabo : December 18, 2005 5:06 PM

＞pokelaboさん
こんばんは。
記事は修正しておきました。
ご利用＆ご指摘ありがとうございました！

[13] Posted by yujiro : December 19, 2005 12:01 AM

このナビバーのお陰で、Blogのシンプル化を図る事が出来ました。
2カラムテンプレートのエントリー共々、トラックバックさせて頂きました。

[14] Posted by ねーさん : December 27, 2005 11:39 AM

＞ねーさん
こんにちは。
ご利用＆トラックバックありがとうございます。
アーカイブを独立したページにされたのですね。
グッドアイデアです！

[15] Posted by yujiro : December 27, 2005 12:49 PM

小粋空間さん、Blogにナビゲーションバーをつけたいと思い、ここの記事を参考にさせていただきました。解説がとても丁寧で感心しています。どうもありがとう。。

[16] Posted by skiyose : January 19, 2006 5:53 PM

＞skiyoseさん
こんばんは。
ご利用＆コメントありがとうございました。
無事に設置できたようで良かったです。

[17] Posted by yujiro : January 21, 2006 2:26 AM

いつもお世話になっております。最近他がおかしくなったのでソース修正をしました。先日までメニューバーうまく表示してたのですが表示しなくなりました。
見直してもどこが悪いのか？わかりません。サポートお願いします。

[18] Posted by panser : January 29, 2006 1:10 PM

あれからナビゲーションバーの件何度か見直した所ささいな間違いでありました。一応解決したと思いますので大変申し訳ございませんでした。ではまた何かの時はこれからも宜しくお願いします。では失礼します。

[19] Posted by panser : January 29, 2006 9:29 PM

＞panserさん
こんにちは。
解決されたようでなによりです。
ではでは！

[20] Posted by yujiro : January 30, 2006 2:00 PM

こちらのようにナビゲーションバーを使って
掲示板とか他のページにジャンプしたいのですが
そのリンク方法がわかりません。
直接リンクを貼ると、画面全体が掲示板なら
掲示板に変わってしまいます。
こちらのようにナビゲーションバーから上は
固定の状態でリンクしたいのですが、
どうしたらいいのでしょうか？

どうか教えてください。

[21] Posted by Ｙｏｓｓｙ : June 6, 2006 3:32 PM

＞Ｙｏｓｓｙさん
こんばんは。
ご質問の件ですが、特に難しい技を使っている訳ではなく、ページのレイアウト（少なくともナビゲーションバーより上）を全ページで同一にすれば大丈夫です。
それではよろしくお願い致します。

[22] Posted by yujiro : June 7, 2006 1:12 AM

ありがとうございます。
まだ初心者なので全然わからなくって。。
やってみますっ！

[23] Posted by Ｙｏｓｓｙ : June 7, 2006 4:50 PM

ナビゲーションバーでプルダウンメニューを
作りたいのですが、教えていただけないでしょうか？
どうかよろしくお願い申し上げます。

[24] Posted by ｙｏｓｓｙ : June 15, 2006 10:58 AM

こんにちわ。
メニューバーを導入させていただきました。
そこで、私･･･横型のカレンダーを導入しているんですけども・・・
左右のサイドメニューが。。。カレンダーとかぶっているんですね(´;ェ;`)ウゥ・・・

それで、スタイルシートでいろいろためしてみたんですけども、うまくいきません。。。
サイドメニューを下げてうまくカレンダーを表示するには。。。アドバイスよろしくお願いいたします。
（またぁーお世話になってしまいました。(o*。_。)oペコッ）

[25] Posted by fei : June 15, 2006 4:32 PM

すみません。
かぶっていなかったです。
というのは、サイトをみるときに左のサイドに
「お気に入り」を表示させるんですね。
その関係で見えなかったんですね。。。
すみませんでした。(o*。_。)oペコッ

でも、左右のサイドメニューを少し下げたいんですけど・・・よろしくお願いいたします。

[26] Posted by fei : June 15, 2006 4:50 PM

＞ｙｏｓｓｙさん
こんばんは。
ご質問の件ですが、今日の覚え書きさんのプルダウン式メニューバーになりましたが参考になると思います。
それではよろしくお願い致します。

＞feiさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の赤色部分の値を大きくしてください。これは画面上からの距離を設定します。

.layout-three-column-liquid #links-left{ position: absolute; width: 155px; top: 95px; left: 15px; color: #ffffff; } .layout-three-column-liquid #links-right{ position: absolute; width: 155px; top: 95px; right: 15px; color: #ffffff; }

それではよろしくお願い致します。

[27] Posted by yujiro : June 16, 2006 11:52 PM

ありがとうございます。
いつもお世話になりっぱなしで・・・
本当ぉ感謝です！！！！

綺麗に表示されております。
(o*。_。)oペコッ

[28] Posted by fei : June 18, 2006 2:10 PM

＞feiさん
こんばんは。
ご連絡ありがとうごさいました。
無事になおったようでよかったです。
ではでは！

[29] Posted by yujiro : June 18, 2006 10:32 PM

プルダウンメニュー、ありがとうございました。
やってみましたがなかなかうまく行かず、
もうちょっと頑張ってみます。^_^;

[30] Posted by ｙｏｓｓｙ : June 19, 2006 12:49 PM

初めてMTを使い始めまして、こちらも参考にして勉強させて頂いております。

非常に初歩的な質問でお恥ずかしいのですが、こちらのサイトのように「サイドバー全体の折りたたみ+ナビゲーションバー」を一緒に表示させるにはどのようにすれば良いのでしょうか？
自分でもやってみたのですが（ナビゲーションバーのHTMLタグを入れてみたり等ですが・滝汗）
崩れてしまってだめでした。

お忙しいとは存じますが、教えて頂けないでしょうか？宜しくお願い致します。

[31] Posted by shu : October 8, 2006 3:54 AM

＞shuさん
こんばんは。
カスタマイズご利用ありがとうございます。
ご質問の件につきましては別途エントリーしたいと思います。
すいませんが少々お時間ください。
それではよろしくお願い致します。

[32] Posted by yujiro : October 9, 2006 2:39 AM

yujiro様

お忙しいのにすみません、有難うございます。
楽しみにしております。

[33] Posted by shu : October 9, 2006 9:16 AM

いつもお世話なっていますyujiroさん！

ujiroさんヘルプミ?教えて下さい。
メニューバーを設置したのですが、再構築すると
メニューバーのCSSテキストが消えてしまいます、
原因は何でしょうか？

お忙しいと思いますが宜しくおねがいします！

[34] Posted by 知花 : March 9, 2007 2:57 PM

＞知花さん
こんにちは。
ご質問の件ですが、入力されたURLが404Not foundになるようです。
お手数ですが新しいURLを再度ご連絡ください。
それではよろしくお願い致します。

[35] Posted by yujiro : March 12, 2007 12:54 PM

師匠！いつもお世話になります。
http://nobuyuki.boy.jp/blog
URLは変えてないのですが、たまに初期化とかやったりするのでその時にアクセスしたのかもしれません？師匠のおかげで少しずつMTにもなれてきました（本当にカメのように遅いです）（＞＜）
今日は師匠のメールフォームの記事を参考にしながらなんと！一発で設置出来ました！
話は変わりますが、何かお礼の方法とかありますか？あれば教えて下さい宜しくお願いします。

[36] Posted by 知花 : March 14, 2007 10:34 PM

＞知花さん
こんにちは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
お礼につきましてはドネーションして頂ければ幸いです。方法の詳細は「ドネーション（寄付）の方法」をご覧ください。
それではよろしくお願い致します。

[37] Posted by yujiro : March 15, 2007 10:26 PM

了解しました師匠！
ありがとうございます、
これからも宜しくお願いしますｍ（^^)m

[38] Posted by 知花 : March 16, 2007 1:42 AM

yujiroさん、こんにちは。
このナビゲーションバーを設置しました。
IE7では大丈夫ですが、FireFoxで見るとタイトル部分とナビゲーションバー
部分の境目（というんでしょうか）が点線のように表示されてしまいます。
使用する分には問題ないんですが気になったのでご報告します。

[39] Posted by れでぃけっと : March 10, 2008 11:16 AM

＞れでぃけっとさん
こんばんは。
ご質問の件ですが、テキストが罫線と重なってしまっているのが原因のようです。
下記のCSSを追加すれば改善されると思います。

#navbar {
   margin: 1px;
}
html > body #navbar {
   margin: 3px;
}

それではよろしくお願い致します。

[40] Posted by yujiro

: March 11, 2008 1:58 AM

報告が遅くなってしまい申し訳ありませんm(__)m
CSSを追加したところ、FireFoｘでも問題なく表示されました。
どうもありがとうございました。

[41] Posted by れでぃけっと : March 20, 2008 10:42 AM

＞れでぃけっとさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！

[42] Posted by yujiro

: March 22, 2008 9:02 PM

こんばんは。お世話になってます。

XHTML 1.0 Strict（utf-8 版）：スタイル対応版（フッタ付きリキッドレイアウト対応）
ではどのようにカスタマイズしたらよいのか教えていただけますでしょうか？

宜しくお願いいたします。

[43] Posted by hi-lite&coffee : January 17, 2009 9:41 PM

＞hi-lite&coffeeさん
こんにちは。
ご質問の件ですが、「ヘッダー」テンプレートモジュールの一番最後に、１項の内容を追加してください。

…前略…
<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>
 
ここに追加

それではよろしくお願い致します。

[44] Posted by yujiro

: January 20, 2009 4:54 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）