Movable Type 備忘録

 グラフィカルなサイトマップ

  • Aug142009
  • Vote:
    http://bizcaz.com/archives/2009/08/14-012954.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

こんばんわ^^

以下のサイトで配布されてた、SlickMap CSS というのを使ってサクッとグラフィカルなサイトマップを作ってみました。

リストの階層構造を作ってあげるだけで、あとは CSS のみで上記のようなグラフィカルなサイトマップを表示することができます。
ただし、少し制約があったりします。

  1. 表示できる階層は 3 階層までです。
    たとえば、ブログのカテゴリをグラフィカルにしたい場合、3 階層までは表示できるけど、それ以降は表示が崩れます。

  2. IE は対象外!? です。
    IE 8 でしか確認してませんが、期待する表示はされませんでした。 また、Firefox や Google Chrome、Safari では角丸で表示されたり、ドロップシャドウで表示されます。

以上です。
気が向いたら使ってみるといいのココロ。

[2009.08.15] サンプルコードを付け忘れました。

わたしが使ってるサイトマップのコード

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<$MTDefaultLanguage$>" lang="<$MTDefaultLanguage$>" id="movabletype-memo">
  3. <mt:RemoveBlank><head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
  5.     <meta http-equiv="Content-Style-Type" content="text/css" />
  6.     <meta name="generator" content="<$MTProductName version="1"$>" />
  7.     <title><mt:BlogName encode_html="1"> - サイトマップ</title>
  8.     <link rel="stylesheet" type="text/css" media="screen, print" href="<mt:BlogArchiveURL>slickmap/slickmap.css" />
  9. </head>
  10.  
  11. <body>
  12.     <div class="sitemap">
  13.         <h1><mt:BlogName encode_html="1"></h1>
  14.         <h2>Preliminary Site Map &mdash; Version 1.0</h2>
  15.  
  16.         <ul id="utilityNav">
  17.             <li><a href="<mt:BlogArchiveURL>reader/">RSS Reader</a></li>
  18.             <li><a href="<mt:BlogArchiveURL>blogroll/">Blogroll</a></li>
  19.         </ul>
  20.  
  21.         <mt:SetVarTemplate name="caturl"><mt:IfNonZero tag="MTCategoryCount"><mt:CategoryArchiveLink><mt:Else>javascript:void(0);</mt:IfNonZero></mt:SetVarTemplate>
  22.  
  23.         <mt:TopLevelCategories sort_method="CategorySort::cat_sort">
  24.             <mt:SetVar name="cnt" value="1" op="++">
  25.  
  26.             <mt:SubCatIsFirst><mt:If name="cnt" eq="1">
  27.                 <ul id="primaryNav" class="col4">
  28.                 <li id="home"><a href="<mt:BlogURL>">Home</a></li>
  29.                 <li><a href="<mt:BlogArchiveURL>">History</a>
  30.                     <ul>
  31.                         <li><a href="<mt:BlogArchiveURL>tagcloud/">Tagcloud</a></li>
  32.                         <li><a href="<mt:BlogArchiveURL>server/">Rental Server</a>
  33.                             <ul>
  34.                                 <li><a href="<mt:BlogArchiveURL>coreserver/">Core Server</a></li>
  35.                             </ul>
  36.                         </li>
  37.                     </ul>
  38.                 </li>
  39.             <mt:Else>
  40.                 <ul>
  41.             </mt:If></mt:SubCatIsFirst>
  42.  
  43.             <mt:CategoryLabel regex_replace="/（.+）/","" setvar="catname">
  44.  
  45.             <mt:Unless name"catname" eq="Rental Server">
  46.                 <li><a href="<mt:GetVar name="caturl">"><mt:GetVar name="catname"></a>
  47.             </mt:Unless>
  48.             <mt:SubCatsRecurse max_depth="3">
  49.             </li>
  50.             <mt:SubCatIsLast></ul></mt:SubCatIsLast>
  51.         </mt:TopLevelCategories>
  52.     </div>
  53.  
  54.     <div class="notes">
  55.         <p>The above sitemap was created from an HTML unordered list with <a href="http://astuteo.com/slickmap">SlickMap CSS</a>.</p>
  56.         <p>Copyright(C) 2005-<mt:Entries lastn="1"><mt:EntryModifiedDate language="en" format="%Y"$></mt:Entries> <a href="<mt:BlogURL>"><mt:BlogName encode_html="1"></a> All Rights Reserved.</p>
  57.     </div>
  58. </body>
  59. </html></mt:RemoveBlank>
  • Related Entries

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード