以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-176.htmlより取得しました。


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

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

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

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

<!--▼ メニューバー ▼-->
<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">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
</ul>
<!--▲ メニューバー ▲-->



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

【standardシリーズの場合】


<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">

<!-- ここに挿入してください -->

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


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


【lightframeシリーズの場合】


</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->

<!-- ここに挿入してください -->

<div id="center-left">
<div id="center">
<!--▼▼ プラグイン カテゴリー3 ▼▼-->



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

/* ▼メニューバー▼ */
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; /* 1つのメニューボタンの幅 */
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でも確認することを強く推奨します。


関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-176.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13