<!--▼ メニューバー ▼-->
<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>
<!--▲ メニューバー ▲-->
~
<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">
<!-- ここに挿入してください -->
<table style="margin: 1em; clear:left" border="0" cellspacing="0">
~
~
</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;
}
/* ▲メニューバー▲ */
#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}
≪ 公式カテゴリ(カスタマイズ向け)のツリー化 | HOME | 角を丸くする (lightframeシリーズ) ≫
【共通】
Author:いたお
更新は非常にマイペースです
現在休止中です
今いたおさんタグを入れてみたらとてもおしゃれなメニューバーが
随分前にカスタマイズしたテンプレート(もちろんいたおさんテンプレです♪)に組み込んであったのでそれを記事にしたんですが、中央寄せ・テキストリンクのみなんでシンプル過ぎちゃいました
と言うか私自身に装飾するスキルが無く…(泣)
まだまだ要・勉強の初心者です(^^;)