MTで自動的に階層式サイトマップを構築する

階層式サイトマップ作成MTでサイトマップを自動的に構築できたらいいだろうと思い。いろいろと試して見た結果、思ったよりも簡単にできました。<ul><li></li></ul>タグを使って階層表示できるテンプレートタグです。実際に設置してみたページは、こちらのサイトマップページ。CSSで表示を変えています。(微調整段階)

CSS設定しないようであれば、普通に階層表示されます。このテンプレートタグでサイトマップページを設定しておけば、手間が省けます。新しくエントリーが構築されていく度に、サイトマップも連動して構築されてゆきます。

特に動的ページにてMTを構築している場合は、SEOを考えて静的ページからリンクを貼ることがよいとされています。(静的ページのみを構築できるかわかりませんが。)

情報としてコードを残しておきます。

MTで自動的に階層式サイトマップを構築するテンプレートタグ(CSS指定なし)

デフォルトのカテゴリリストコードにエントリーリストのコードを追加することで階層表示が可能となります。また、私はインデックスページと同じ階層にサイトマップを構築しています。

HOME(index.html)とサイトマップページ(sitemap.html)リンクを追加したコードを表示しておきます。CSSにてクラス指定してありあません。

テンプレートタグコード

MTで自動的に階層式サイトマップを構築するテンプレートタグ(CSS指定あり)

CSS設定で階層表示を切り替えています。CSS設定する場合は、imagesフォルダに以下の2点の画像を追加する必要があります。

点線内の画像をDLして、imagesフォルダに追加してください。

テンプレートタグコード

CSSコード

上記のコードをインデックスページと同じ階層に新規作成でサイトマップページを作成するといいと思います。CSSコードは、styles-site.cssに追加してもらえればOKです。

CSS設定に関しては、Firefox・IEにて表示確認をしています。表示が崩れる場合があれば、コメントにてお知らせください。

トラックバック(4)

このブログ記事を参照しているブログ一覧: MTで自動的に階層式サイトマップを構築する

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

リューアルというのかなんというか、ちょっと判んないけども。 デカい所では「サイ... 続きを読む

必要だと思いながらも手をつけていなかった「サイトマップ」ページを作りました。 ... 続きを読む

『MovableTypeに階層式サイトマップを追加してみました』 MovableTypeで自動的に階層式サイトマップ(HTML)を自動生成するように設定し... 続きを読む

MTで階層式のサイトマップを自動的に構築するLABです。... 続きを読む

コメント(2)

MTにサイトマップを作る方法を拝見させて頂きました。
質問なのですが、このサイトマップには、投稿日付と「Powered by Movable Type 」という表示が出てしまいますが、これを消す方法を教えて頂ければ非常に助かります。
何卒、宜しくお願いいたします。

>高津様
お疲れ様です。ちょっと意味がわかりづらいです。今回のこのエントリーで公開しているテンプレートタグには、おっしゃられている表示がされるようなタグの公開はしていません。
ヘルプ(http://www.sixapart.jp/movabletype/manual/3.3/)をご覧になり、タグを消してみてはいかがでしょうか?
日付表示のテンプレートタグは、<$MTEntryModifiedDate$>
Powered by Movable Type 表示は、
Powered by <a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>

コメントする

ウェブページ

   
  

アイテム

  • 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月 8日 10:43に書いたブログ記事です。

ひとつ前のブログ記事は「任意のテキストを画像に置き換えるCSS」です。

次のブログ記事は「MTトップレベルカテゴリのみのメニュー表示するテンプレートタグ」です。

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