プルダウン式ナビゲーションバーの設置(MT3.2) : Project MultiBurst

Category : [ Linux, MovableType, インターネット ]
December 13, 2005 21:30
TAG : [ガチャピン,Customize,Javascript,Template]
Permalink

ブログ「The blog of H.Fujimoto」の管理人、壱さんの著書、

ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック

でのカスタマイズです。

このカスタマイズの詳しい解説は、上記の著書をお買い求めください（＾＾；）

ここでは簡単に解説したいと思います。

結局できあがったモノは、このブログの全ページのトップバナーの下にあります。

↓こんな感じできあがります。

このカスタマイズは、「スタイルシート」、「テンプレート」、「Javascript」の
追加だけで事足ります。

ここでは万人向けのカスタマイズ方法は上記著書にお任せするとして、
このブログでの導入した方法を解説したいと思います。

●まず、スタイルシートに以下を追加します。

/*ナビゲーションバー*/ #navibar_container { text-align: center; background-color : #ffffff; border-bottom: 1px solid #666699; height: 16px; position: relative; z-index: 2; }

#navibar {
        position: relative;
        text-align: left;
        width: 576px;
        margin-left: auto;
        margin-right: auto;
}

.mainmenu {
        position: absolute;
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        height: 16px;
}

.mainmenu a {
        display: block;
        height: 16px;
        text-align: center;
        text-decoration: none;
        /*color: #006699;*/
        color: #36414d;
}

.mainmenu a:link,
.mainmenu a:visited {
color: #36414d;
}

.mainmenu a:hover,
.mainmenu a:active {
        background-color: #666699;
        color: #ffffff;
        text-decoration: none;
}

--- ①

#mainmenu_top {
        left: 0px;
        top: 0px;
        width: 40px;
}

#mainmenu_categories {
        left: 40px;
        top: 0px;
        width: 96px;
}

#mainmenu_archives {
        left: 136px;
        top: 0px;
        width: 80px;
}

#mainmenu_ranking {
        left: 216px;
        top: 0px;
        width: 88px;
}

#mainmenu_my_other_blog {
        left: 304px;
        top: 0px;
        width: 120px;
}

#mainmenu_contact_us {
        left: 424px;
        top: 0px;
        width: 96px;
}

#mainmenu_about {
        left: 520px;
        top: 0px;
        width: 56px;
}

.submenu {
        position: absolute;
        left: 0px;
        top: 16px;
        width: 170px;
        visibility: hidden;
        text-align: left;
        font-size: 10px;
        font-family: Verdana, Arial, sans-serif;
        border: 1px solid #666699;
        padding: 3px 10px 3px 10px;
        background-color: #dde6ec;
        line-height: 13px;
}

.submenu a {
        display: inline;
        width: auto;
        height: auto;
}

上記スタイルシートは、ナビゲーションバー全体で、「縦16px、横576px」としています。

①の部分からが、
それぞれのボタンの左端と幅を表しています。

（※なお、このスタイルシートは、私の方で多少カスタマイズしていますので、
あしからず。。。。）

青文字の部分は、後でも使いますのでメモメモ。

●続いて、実際のナビゲーションバーを新規インデックステンプレートで作りましょう。

下記が本ブログのナビゲーションバー用のテンプレートです。

<div id="mainmenu_top" class="mainmenu">
<a href="<$MTBlogURL$>" accesskey="1">Top</a>
</div>

<div id="mainmenu_categories" class="mainmenu" onmouseover="mouse_on_menu('categories');" onmouseout="mouse_out_menu('categories');">
<a href="javascript:void(0);">Catogories</a>
<div id="submenu_categories" class="submenu">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" ><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
<script type="text/javascript" language="javascript">

</script>
</div>
</div>

<div id="mainmenu_archives" class="mainmenu" onmouseover="mouse_on_menu('archives');" onmouseout="mouse_out_menu('archives');">
<a href="javascript:void(0);">Archives</a>
<div id="submenu_archives" class="submenu">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]<br />
</MTArchiveList>
</div>
</div>

<div id="mainmenu_ranking" class="mainmenu">
<a href="<$MTBlogURL$>all-ranking.php">Ranking</a>
</div>

<div id="mainmenu_my_other_blog" class="mainmenu" onmouseover="mouse_on_menu('my_other_blog');" onmouseout="mouse_out_menu('my_other_blog');">
<a href="javascript:void(0);">My Other BLOG</a>
<div id="submenu_my_other_blog" class="submenu">
<a href="http://www.multiburst.net/gachapin/" target="_blank">Gachapin WALL（ガチャピン壁紙）</a><br />
<a href="http://www.multiburst.net/rilaxuma-paradice/" target="_blank">リラックマ・ショッピングモール</a><br />
<a href="http://www.multiburst.net/spam-paradice/" target="_blank">スパムメール・バトルロワイヤル</a>
</div>
</div>

<div id="mainmenu_contact_us" class="mainmenu">
<a href="mailto:webmaster@mail.multiburst.net">Contact Us</a>
</div>

</div>
</div>

それぞれの赤文字で書かれている「くくり」が
それぞれのプルダウンもしくはリンクになります。

これを、新規インデックステンプレートとして保存します。

「テンプレート名」・・・・「ナビゲーションバー」（任意）

「出力ファイル名」・・・・「navibar.php」（任意）
　　※拡張子は必ず「.php」のこと。

「再構築オプション」・・・・チェックをはずす。

「テンプレートの内容」
上記のもの。

そして、保存、再構築しておきます。

そして、ナビゲーションバーを入れたいページのテンプレートに、
以下を挿入します。

<? include("<$MTBlogURL$>navibar.php"); ?>

●次に、Javascriptの追加です。

以下のJavascriptを、上記でナビゲーションバーを入れたテンプレートに挿入します。
挿入場所は、<head>から</head>の間です。

function mouse_out_menu(no) {
document.getElementById('submenu_' + no).style.visibility = 'hidden';
}
-->
</script>

また、当ブログは小粋空間さんのテンプレートを使用していますので、
スタイルシートを多少いじりました。

/* 3カラム(リキッドレイアウト) */ .layout-three-column-liquid #content { margin: 0 205px 10px 185px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; } .layout-three-column-liquid #links-left{ position: absolute; width: 155px; /*top: 95px;*/ top: 111px; left: 15px; color: #ffffff; } .layout-three-column-liquid #links-right{ position: absolute; width: 175px; /*top: 95px;*/ top: 111px; right: 15px; color: #ffffff; }

最後に、いちをブログ全体をリビルドしておきましょう。

これで完成です。（￣▽￣）

詳細を知りたい方は、上記著書を買って頂いて参照して頂くか、
コメント欄にお願い致します。

ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック

posted with amazlet on 05.12.13

藤本壱
技術評論社 (2005/11/08)

おすすめ度の平均: