MovableType でタイトルの下に横型メニューをつける。

タイトルの下に横型のメニューをつけてみた。

以下、設置方法。

 

1 ．メニューを挿入したいをテンプレート編集する。

タイトルの下（<div id="banner">～</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>

 

2 ．スタイルシートにメニュー用のスタイルシートを追加する。

 

/* ナビゲーションバー全体のスタイル */
#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; /* テキストの装飾をなくす */
}

 

上のスタイルシートはテキストメニューにマウスオーバー時のリンクの装飾を加えたシンプルなもの。
アレンジしだいで、ロールオーバーにしたり、画像を使ったメニューを作ることもできる。

 

上の説明では、MTタグを使ったMT向けのものになっているけれど、MTタグの部分を変更すれば、他のブログでも使うことができる。

 

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