パンくずナビゲーションを作る
パンくずナビゲーション、パンくずリストなどと呼ばれる、トップページからの親子関係をそのままリンクとしたナビゲーションがあります。これをMovable Type 4.1で実現します。
ここでいうパンくずナビゲーションとは下図のようなもので、本サイトにも装備されています。
コード
以下コードは、topicpathという名前のid要素を定義して、パンくずナビゲーション用コードを書いています。
もともとのコード量が多くは無いため、MTIfで使用するテンプレートを分け、コードの見通しを良くしてみました。MTIgnoreテンプレートタグはコメント行で、パブリッシュ時には出力されません。カテゴリ、エントリ、月別アーカイブのみを準備しています。
<MTIgnore>カテゴリアーカイブ</MTIgnore>
<MTIf name="category_archive">
<div id="topicpath">
<p><a href="<$MTBlogURL$>">TOPページ</a> > <MTParentCategories glue=" > "><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel remove_html="1" decode_html="1"></a></MTParentCategories></p>
</div>
</MTIf>
<MTIgnore>エントリアーカイブ</MTIgnore>
<MTIf name="entry_template">
<div id="topicpath">
<p><a href="<$MTBlogURL$>">TOPページ</a> > <MTParentCategories glue=" > "><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel remove_html="1" decode_html="1"></a></MTParentCategories> > <a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></p>
</div>
</MTIf>
<MTIgnore>月別アーカイブ</MTIgnore>
<MTIf name="datebased_only_archive">
<div id="topicpath">
<p><MTArchivePrevious><a href="<$MTArchiveLink$>">< <$MTArchiveTitle$></a> | </MTArchivePrevious><a href="<$MTBlogURL$>">TOPページ</a><MTArchiveNext> | <a href="<$MTArchiveLink$>"><$MTArchiveTitle$> ></a></MTArchiveNext></p>
</div>
</MTIf>
CSS
以下一例です。
/* パンくずリスト */
#topicpath {
font-size:90%;
margin: 10px 0 10px 0;
padding: 0;
}
#topicpath p {
margin:0;
}
実装について
独立したひとつのモジュールとし、インクルードするのが最良です。このサンプルの場合では、「ブログ記事」テンプレートと「ブログ記事リスト」からインクルードする前提です。
実装の手順は以下のようになります。
1.管理画面「テンプレートモジュール」より、モジュールテンプレートの作成をクリック。
2.名前を「mdlTopicPath」(名前は任意で)、コードは上記サンプルのものをコピーペーストする。
3.mdlTopicPathモジュールを、埋め込みたい箇所からインクルードする。今回の例では、「ブログ記事」テンプレートと「ブログ記事リスト」からインクルードすることとします。
4.CSSを調整する。上記CSSサンプルを貼ってもよい。
5.再構築をかける。
サンプル
このサイトのパンくずナビゲーションはこの手法で生成されています。エントリページ、カテゴリページ、月別アーカイブページで有効となっています。
月別アーカイブページはこのサイトでは出していませんが、以下リンクで確認することができます。
月別アーカイブリンク:http://www.mtde.info/2008/02/
- ページ先頭へ
- 前のエントリ: ウェブページを用いたナビゲーションバーを作る
- 次のエントリ: 次のエントリ、前のエントリへのリンク(デフォルト)
- カテゴリ:ナビゲーション関連サンプル