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

2006年12月29日

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

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

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1281

コメント

ブログももうすぐ二年ですね。
2006年ありがとうございました。

どんどん進化する仕組みにびっくり。
2007年もどうぞよろしくお付き合いください。

>edaatsさん
コメントありがとうございます。
押し詰まってきましたね。年々晦日になっても年の瀬の気分ではありませんが、それでも屋外の掃除などを仰せつかりやっていました。おせち料理と引き換えです。
 ブログも2年目になります。customize はやればやるほどすることが増えてくるようです。まあ、老化防止にはいいかと思ってます。
 来年もよろしくご指導ください。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)