MTテンプレートでのCSSによるタブメニューの作成

　いろいろと遠回りをしたが、ブログのヘッダー部分に、以前から設置したかったタブメニューを作った。このようなリンクボタンは、Flashで作るものとばかり思いこんでいた。そのために、ボタンを作るFireworksやFlash８などの学習をボチボチとしてきた。Fireworksには、Javascriptをつかうタブメニューの作り方のステップガイドがある。新しくページを作るときには有用と思えるが、MovableType（MT）に持ち込むにはいささか難しそうだ。Flash での例示は、もう少し高度なプルダウンメニューのようなものが多い。Google でサーチをしてみると、JavaScript や　Flash は使わずにスタイルシートを上手く使ってHTMLで作成できることが分かった。ちなみにいつも参考にさせてもらっている「小粋空間」さんのタブメニューもページのソースコードを見るとHTMLで作られているようだ。（一部、ＪａｖａＳｃｒｉｐｔｓが使われているようだ。）
　いろいろ探してみると CSS Tab Designer というフリーの Software(?) に行き当たった。同様の日本語サイトもあるが、どうも海外のサイトの方があか抜けている。早速、css_tab.zip ファイルをダウンロードして展開してみるとお誂え向きのサンプル (Tab Menu10)があった。これには、そのサンプルのHTMLコードがついており、これをページ作成ソフト（私の場合、Dreamweaver MX ）にコピー＆ペーストして、いろいろと弄って応用した。主な変更点は、文字コードを utf-8 にして日本語が扱えるようにすることとボタンのテキストやリンク先の指示やボタンの色を変えることなどである。
　MTへの持ち込みは、StyleText 部分を本来のスタイルシート（styles-site.css) に付け加え、<body><div> 部分のコードをテンプレートに挿入した。なお、私はテンプレートのヘッダー部分などは、モジュール化しているので以前に自分で作成しているテンプレートへの追加となる。このように多くのテンプレートを修正する場合には、モジュール化は重宝する。
　できあがりは画面でご覧いただけると思うが、このようなタブ区分と右サイドのカテゴリー区分とが完全に一致していないので、カテゴリーを再度見直す必要がある。また、サブカテゴリーも設けているので、プルダウンできるような改良も必要である。
　なお、ＩＥではボタンテキストの日本語だけのものと英語まじりのものとでは、表示が微妙に異なるようである。Ｆｉｒｅｆｏｘでは揃って表示されている。

MTテンプレートでのCSSによるタブメニューの作成

タグ:

コメント

コメントする