5-1：グローバルナビゲーションでページを切り替える: 「Movable Type WEBデザインの新しいルール」

手順3

<MTIf name="page_template">
<style type="text/css">
#navi dd ul li a.<$MTPageBasename$>:link,
#navi dd ul li a.<$MTPageBasename$>:visited {
    background: url(<$MTBlogURL$>images/navi_selected.gif) repeat-x;
}
#navi dd ul li a.<$MTPageBasename$>:hover {
    background: url(<$MTBlogURL$>images/navi_hover.gif) repeat-x;
}
</style>
</MTIf>
 
<MTUnless name="page_layout" eq="layout-onecolumn">
<dl id="navi">
<dt>主なメニュー</dt>
<dd>
<ul class="clearfix">
<li><a href="<$MTBlogURL$>">ホーム</a></li>
<li><a href="<$MTBlogURL$>business.html" class="business">事業案内</a></li>
<li><a href="<$MTBlogURL$>products.html" class="products">製品情報</a></li>
<li><a href="<$MTBlogURL$>recruit.html" class="recruit">採用情報</a></li>
<li><a href="<$MTBlogURL$>profile.html" class="profile">会社概要</a></li>
<li><a href="<$MTBlogURL$>contact.html" class="contact">お問い合わせ</a></li>
</ul>
</dd>
</dl>
</MTUnless>

手順4

#navi {
    border-bottom: 1px solid #bed5b4;
    background: url(images/navi.gif) repeat-x;
}
#navi dt {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#navi dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi dd ul li {
    float:left;
    border-right: 1px solid #bed5b4;
    width: 100px;
    letter-spacing: 0.1em;
}
#navi dd ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    line-height: 2.3;
    text-decoration: none;
}
#navi dd ul li a:link,
#navi dd ul li a:visited {
    background: url(images/navi.gif) repeat-x;
}
#navi dd ul li a:hover {
    background: url(images/navi_hover.gif) repeat-x;
}
#navi, /* for ie7 */
#navi dd ul li a { /* for ie6 */
    height: 28px;
}

手順5

#header {
    border-bottom: 1px solid #bed5b4;
    height: 120px;
    background: url(images/logo.png) no-repeat;
    text-indent: -9999px;
    outline-width: 0;
}

手順6（手順4の内容も全て含んでいます）

#navi {
    border-bottom: 1px solid #bed5b4;
    background: url(images/navi.gif) repeat-x;
    text-align: center;
}
#navi dt {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#navi dd {
    width: 606px;
    border-left: 1px solid #bed5b4;
}
html > body #navi dd {
    margin-left: auto;
    margin-right: auto;
}
#navi dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi dd ul li {
    float:left;
    border-right: 1px solid #bed5b4;
    width: 100px;
    letter-spacing: 0.1em;
}
#navi dd ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    line-height: 2.3;
    text-decoration: none;
}
#navi dd ul li a:link,
#navi dd ul li a:visited {
    background: url(images/navi.gif) repeat-x;
}
#navi dd ul li a:hover {
    background: url(images/navi_hover.gif) repeat-x;
}
#navi, /* for ie7 */
#navi dd ul li a { /* for ie6 */
    height: 28px;
}

手順7（注：dl要素はサンプルの通りMTUnlessタグで括ってください）

<MTIf name="category_archive">
<style type="text/css">
#navi dd ul li a.<$MTCategoryBasename$>:link,
#navi dd ul li a.<$MTCategoryBasename$>:visited {
    background: url(<$MTBlogURL$>images/navi_selected.gif) repeat-x;
}
#navi dd ul li a.<$MTCategoryBasename$>:hover {
    background: url(<$MTBlogURL$>images/navi_hover.gif) repeat-x;
}
</style>
</MTIf>
 
<MTUnless name="page_layout" eq="layout-onecolumn">
<dl id="navi">
<dt>主なメニュー</dt>
<dd>
<ul class="clearfix">
<li><a href="<$MTBlogURL$>">ホーム</a></li>
<li><a href="<$MTBlogURL$>business.html" class="business">事業案内</a></li>
<li><a href="<$MTBlogArchiveURL$>products" class="products">製品情報</a></li>
<li><a href="<$MTBlogArchiveURL$>recruit" class="recruit">採用情報</a></li>
<li><a href="<$MTBlogArchiveURL$>profile" class="profile">会社概要</a></li>
<li><a href="<$MTBlogURL$>contact.html" class="contact">お問い合わせ</a></li>
</ul>
</div>
</dd>
</dl>
</MTUnless>