MTでサイトナビゲーションカスタマイズ:パンくずリストを表示する

MTでサイトナビゲーションとしてのパンくずリストを表示させるにもいろいろと方法があるようです。いくつかのパターンを取り上げてみました。紹介する方法は、静的ページ(PHP生成ページではありません)での表示方法となります。

私は、WEBデザイニングという雑誌を毎月購入しており、その中で紹介されているMTカスタマイズテクニックのコラムで取り上げあげられている手法を取り入れました。

パンくずリストとは

パンくずリスト 【topic path】
 Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。
 大規模なWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの小カテゴリ、個別のページ、という形で階層構造で管理されていることが多い。各ページに、そのページの属するカテゴリのトップページへのリンクを順番に並べたものがパンくずリストである。区切り記号には伝統的に「>」(大なり記号)が使われ、「トップ > コンピュータ > パソコン > 買い方」のように表現する。 童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来である。

(引用:IT用語辞典より/http://e-words.jp/w/E38391E383B3E3818FE3819AE383AAE382B9E38388.html

MTでパンくずリスト表示<ul><li></li></ul>タグを使って

私の採用しているパンくずリストのタグは、<ul><li></li></ul>タグを使ってHTML構造的にも階層的に表示されるようにしています。CSSを無効にした場合、こちら方が解りやいかと思い階層表示しています。(※但し、サブカテゴリーが存在する場合は、メインカテゴリとサブカテゴリが同じ階層扱いに表示されます。方法はありますが、コードが長くなるため以下のコードにて表示するようにしています。)
また矢印(arrow)イメージ画像を使って階層を表現しています。

この手法は、blog -under construction-: Web_Designing アーカイブ2005年07月28日に表示されている方法です。そちらから受け渡しになりますが、情報としてコードを残しておきます。

個別エントリーページでのパンくずリストコード

上記の場合は、矢印(arrow)イメージ画像が必要になってきます。また、最後の階層表示されるエントリーにもリンクが生成されるようになっていますので、下記の部分のリンクを抜いておけばいいと思います。

<li> <a href="<$MTEntryPermalink$> " title="<$MTEntryTitle$> "> <$MTEntryTitle$> </a> </li>

↓↓↓↓↓↓↓上記コード部分を下記に変更↓↓↓↓↓↓↓

<li> <$MTEntryTitle$></li>

矢印(arrow)イメージ画像を使わずに「»(&raquo;)」もしくは、「>(&#65310;)」で表示したい場合は、以下のようなコードになります。

上記のコードに対するCSSの設定は以下の通りです。

アーカイブにもパンくずリストを表示する

アーカイブ一覧ページにもパンくずリストを表示させるためのコードです。こちらも<ul><li></li></ul>タグを使っての階層表示としています。

最後の階層表示されるエントリーにもリンクが生成されるようになっていますので、下記の部分のリンクを抜いておけばいいと思います。

<li> <a href="<$MTEntryPermalink$> " title="<$MTArchiveTitle$> "> <$MTEntryTitle$> </a> </li>

↓↓↓↓↓↓↓上記コード部分を下記に変更↓↓↓↓↓↓↓

<li> <$MTArchiveTitle$></li>

矢印(arrow)イメージ画像を使わずに「»(&raquo;)」もしくは、「>(&#65310;)」で表示したい場合は、以下のようなコードになります。

カテゴリーページにもパンくずリストを表示する

カテゴリーページにパンくずを表示するコードも情報として紹介しておきます。このタグはマニュアルを読んでみて自分なりに勝手に作ったものです。今のところ正常に表示されています。CSS無効の状態でも正しく階層表示されています。

phpでの表示方法がいくつかのサイトにて紹介されています。私のこのブログは、静的ページなので、上記のコードで表示可能となります。

矢印(arrow)イメージ画像を使わずに「»(&raquo;)」もしくは、「>(&#65310;)」で表示したい場合は、以下のようなコードになります。

本来ならエントリーページのパンくずリスト表示も以上のコードを使って表示すると正しく階層表示されるようになります。CSSは、すべて上部のCSSコードで共通して適用されます。

フラットでのパンくずリスト表示

<ul><li></li></ul>タグを使わずに、フラット表示のパンくずリストの方がコードが明快です。情報としてコードを残しておきます。

個別エントリーページでのパンくずリスト

アーカイブページのパンくずリスト表示

カテゴリページのパンくずリスト表示

上記のカテゴリパンくずリストは、私がマニュアルを読んで作ってみたものです。このタグにて実際に表示確認をしていませんが、問題なく表示されると思います。(※私は<ul><li></li></ul>タグを組み合わせて使っています。)

パンくずリストもデザイン的に考えてゆくとまた違った表示の方法があると思います。カテゴリー一覧リストのような本当の階層表示をしてみるといいかもしれないです。

参考にさせていただいたエントリー

大変参考になりました。ありがとうございます。

トラックバック(1)

このブログ記事を参照しているブログ一覧: MTでサイトナビゲーションカスタマイズ:パンくずリストを表示する

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/36

コメント(2)

こんばんは。
トラックバックありがとうございました。

こんにちは、コメントありがとうございます。
今後ともよろしくおねがいいたします。

コメントする

ウェブページ

   
  

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年9月 2日 05:00に書いたブログ記事です。

ひとつ前のブログ記事は「Movable Type 3.32日本語版の提供を開始」です。

次のブログ記事は「MTでカテゴリ毎にページの表示を変える方法:」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。