http://10plate.blog44.fc2.com/blog-entry-176.html

横メニューバーをブログタイトル下に表示する

グローバルナビゲーションとして、ブログタイトル下に横メニューバーを表示するカスタマイズを紹介します。

キイタ？オクサンアラヤダワァを運営するちゃんさんの「横メニューの設置」を参考にさせていただきました。

次の記述をHTMLに追加します。
赤い箇所は各自希望のURL、リンク名に変えてください。
ここでは例として７件のメニュー項目がありますが、希望にあわせて増減してください。

<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>

当サイトが提供する共有テンプレートの場合、上記記述を挿入する箇所は次のようになります。

【standardシリーズの場合】

～

<tr><td id="main_body">



<table style="margin: 1em; clear:left" border="0" cellspacing="0">
～

standardシリーズの場合、「; clear:left」も追加してください。

【lightframeシリーズの場合】

～
</div>




<div id="center-left">
<div id="center">

～

次にスタイルシートの末尾に次の記述を追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

色や大きさ等の各パラメータはお好みにあわせて設定してください。

lightframeシリーズの場合は、/* 上の間隔 */が0pxでも余計な間隔が出来てしまいます。
次の箇所も設定して調整してください。

#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}

【2009/08/13 追記】
メニューを幅一杯まで使おうとして崩れている方を時々見かけます。
IEだけでなく、Firefoxでも確認することを強く推奨します。

関連記事

[ 2009/03/29 11:48 ] カスタマイズ共通カスタマイズ | TB(4) | CM(219)