苦心したナビゲーションリンクのロールオーバー保持

大変、苦労させられた記念に作業録を。各カテゴリ、アーカイブへのナビゲーションリンクのデザインについて。MT、ブログ構築に興味のある方はニーズも大きいと思うのでご参考に。そうでない方も、このブログ、実はとてもとても苦労しながら作っているのだということを理解してもらえれば。

各カテゴリ(ジャンル)先へのリンク一覧というのはどこのサイト(ブログ)にもあるけれど、「今から行くよ~」というのと「今、ここにいるよ~」という現在位置が表示されていると分かりやすい。

マウスオーバーは簡単だけれど

「今から行くよ~」
右側に並んだカテゴリリンクにマウスを近付けると色が変わる

例えば、今のサイトは目次ページ部分の右サイドにカテゴリ(アーカイブ)リストを並べていて、完走記だとこんな具合にずらーっと「年度」カテゴリへのリンクがある。

リンク先となるカテゴリ年度へマウスカーソルを持ってゆくと、「今から行くよ~」という意味合いを分かりやすくするために当該部分(の背景)が色付けられて浮かび上がる(同時に文字もオレンジに変わる)。これは「マウスオーバー」といってCSSの側で簡単にできるテクニック。

ロールオーバー保持には一手間必要

「今、どこにいるのかな~?」
2008年度のリストページを表示しても、
右側カテゴリリンクのロールオーバーがないので分かりにくい

さて、難しいのはこの先、飛んだページで、今度は「今、ここにいるよ~」という表示ができるかどうか。

以前、ホームページの時に出来ていたのは、全て各カテゴリページを「手打ち」で置いていたから。ローカルにカテゴリの数だけページを作って用意すればいいわけで、今でも企業サイトを始め、大半のサイトはそうしていると思う、それでも特に問題はない。色々と探した中、まずはMTの大御所、小粋空間で見つけたページ。

小粋空間: ナビゲーションバー・シンプルタイプ(その2:クリックしたメニューのロールオーバーを保持する)

ナビゲーションバーにあるメニューをクリックした時、ジャンプしたページでクリックされたメニューのロールオーバーを保持、つまり選択された状態を保持するというカスタマイズです。このカスタマイズによって現在表示されているページとメニューの関連性がより明確になり、ユーザビリティを向上させることができます

以下、「ロールオーバー保持」という名にするとして、MT本の執筆もされ、MTの豊富なカスタマイズ指南で知られる作者「yujiro」さんをして

久しぶりに濃厚な内容です。

とあるから僕も姿勢を正し、身構えて臨んだ。詳しくはリンク先を見られると分かるけれど、これだけでもJavaScriptを併用するなど、大変な仕組み。ただ、このページで説明されている例は

| Home | About | Profile | Link | Search | Mail |

と、いわゆる上部に置くタイプのグローバルナビゲーションで、リンク先が「限定」されているもの。限定されていれば全てを各別にタグで囲めるけれど、そうでなく、CMSとして動くブログの、1枚用意するだけのテンプレートでの話。カテゴリがどんどん増えていったとき、今は2008年(度)までだけれど、僕が2050年まで走り続けても、カテゴリの数が50になっても100になっても・・・「自動に」、つまり変数に対応できるかどうか。

もちろん、このページは3年前のものなので、変数への対応が強化されたMT4なら作者も別の方法を提示されたと思う。考え方はここで大いに学ばせてもらったし、例を引いたのは「ロールオーバー保持」が簡単そうに見えて、意外にテクニックを要するんだということを示したかったから。

この考えに対してさらに小粋空間ではやはり示されていて

小粋空間: 選択されたアーカイブリンクを強調表示する

でも、やはり複雑そう。さて、ここは僕もSetVarやらGetVarなどという変数を利用すればできるはずだな・・・と、ここまでは思い付く、でも、「どう」セッティングするのかとうんうん考えさせられた。

上部グローバルナビゲーションへの限定数リンクなら以下のページもあり。

MT4.1: 個々のブログ記事を閲覧中のナビゲーションをずっとONにする - MAX ENGINEERING

完成版

「今、ここにいるよ~」
当該(2007年度)カテゴリリンクのロールオーバーを保持している状態

上記を参考にしながら、試行錯誤、相当の時間(日数)を費やして完成したのがこちら。

マウスカーソルが離れた状態でも、当該カテゴリの位置が分かるようにロールオーバー保持ができているページ。


ソースはこんな感じで、当該カテゴリのみに<li>タグのクラス属性"here"を出力させる仕組み。



  • here">

上記は素直に<mt:Categories>を使っているけれど、僕のこのサイトは純なカテゴリ区分けにしているブログは完走記とPreludeくらいで、ここ(ブログ化作業緑)をはじめ、その他のブログは年別アーカイブで分けているので、<mt:ArchiveList archive_type="Yearly">で先に進めていたのだけれど、それと同様に、<mt:ArchiveList archive_type="Category">でも問題なくできた。

やれやれ・・・。でも苦心して出来上がったときの達成感はひとしお。ひとつできれば後は全部、これもMT4からの新機能「グローバルテンプレート」において共通モジュール化させれらるので一気に全ブログを同じように。気分爽快! 久しぶりに会心といえるカスタマイズができた。


 

  Related Entries


Message

メールアドレスが公開されることはありません。