■MTOSで行こう！Movable Type Open Source > MTOSをもっと便利に使うために > テンプレートのカスタマイズ > パンくずリスト

パンくずリストは「ブログ記事」と「ブログ記事の概要」の２つのテンプレートをカスタマイズする

来場者がWEBの森で迷わないような工夫がパンくずリストの目的。以下の画像の赤線の部分がパンくずリストである。
パンくずリスト

パンくずリストの由来は童話の「ヘンゼルとグレーテル」。森の中で迷わないようにパンくずを少しずつちぎりながら歩いたという逸話である。CMS利用でページ数が増加するWEBサイトにおいて、来場者がWEBサイトの森の中で迷わないような工夫としてパンくずリストはすぐれている。

ＭＴでは、テンプレートに一部修正を加えるだけで自動的にパンくずリストを表示できるようになる。
MT4.1のテンプレートではヘッダモジュールの一番下に張り付けるだけという一箇所の修正でよかったが、MT4.2以降は２箇所の修正が必要になった。

修正が必要なのは、エントリーにあたる「ブログ記事」とカテゴリの一部の「ブログ記事の概要」という２つのテンプレートである。

「ブログ記事」にパンくずリストを設置した例。

▼ブログ記事のテンプレート（黄色の部分は各自が修正すること）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <$mt:Include module="HTMLヘッダー"$>
    <title><$mt:EntryTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title> 
   <meta name="description" content="dm2.co.jpは株式会社ドモドモコーポレーションの企業情報を紹介する公式サイトです。<$mt:EntryTitle encode_html="1"$>" />
    <meta name="keywords" content="dm2.co.jp,ドモドモコーポレーション,どもども,ドモドモ,遠田幹雄,中小企業診断士,ＩＴコーディネータ" />
    <mt:EntryPrevious><link rel="prev bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryPrevious>
    <mt:EntryNext><link rel="next bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryNext>
    <$mt:EntryTrackbackData$>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="mt-entry-archive <$mt:Var name="page_layout"$>">
    <div id="container">
        <div id="container-inner">
            <$mt:Include module="バナーヘッダー"$>
            <div id="content">
                <div id="content-inner">
                    <div id="alpha">
                        <div id="alpha-inner">
                            <div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
                                <div class="asset-header">
■<a href="<$MTBlogURL$>"><$MTBlogName$></a> &gt;
<MTParentCategories glue=" &gt; ">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryDescription$></a>
</MTParentCategories>
                                    <h3 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h3>
                                    <div class="asset-meta">
                                        <span class="byline">
<mt:If tag="EntryAuthorDisplayName">
                                            <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
<mt:Else>
                                            <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
</mt:If>
                                        </span>
<mt:IfCommentsActive>
                                        <span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></a>
</mt:IfCommentsActive>
<mt:IfPingsActive>
                                        <span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a>
</mt:IfPingsActive>
                                    </div>
                                </div>
                                <div class="asset-content entry-content">
<mt:If tag="EntryBody">
                                    <div class="asset-body">
                                        <$mt:EntryBody$>
                                    </div>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
                                    <div id="more" class="asset-more">
                                        <$mt:EntryMore$>
                                    </div>
</mt:If>
                                </div>
                                <div class="asset-footer">
<mt:IfArchiveTypeEnabled archive_type="Category">
    <mt:If tag="EntryCategories">
                                    <div class="entry-categories">
                                        <h4>カテゴリ<span class="delimiter">:</span></h4>
                                        <ul>
                                            <li><mt:EntryCategories glue='<span class="delimiter">,</span></li> <li class="entry-category">'><a href="<$mt:CategoryArchiveLink$>" rel="tag"><$mt:CategoryLabel$></a></mt:EntryCategories></li>
                                        </ul>
                                    </div>
    </mt:If>
</mt:IfArchiveTypeEnabled>
<mt:EntryIfTagged>
                                    <div class="entry-tags">
                                        <h4>タグ<span class="delimiter">:</span></h4>
                                        <ul>
                                            <li><mt:EntryTags glue='<span class="delimiter">,</span></li> <li>'><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags></li>
                                        </ul>
                                    </div>
</mt:EntryIfTagged>
                                </div>
                            </div>
                    <$mt:Include module="トラックバック"$>
                    <$mt:Include module="コメント"$>
                        </div>
                    </div>
                    <$mt:Include module="サイドバー"$>
                </div>
            </div>
            <$mt:Include module="バナーフッター"$>
        </div>
    </div>
</body>
</html>

「ブログ記事の概要」にパンくずリストを設置した例。

▼ブログ記事の概要テンプレート
<$mt:EntryTrackbackData$>
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
■<a href="<$MTBlogURL$>"><$MTBlogName$></a> &gt;
<MTParentCategories glue=" &gt; ">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryDescription$></a>
</MTParentCategories>
        <h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>
        <div class="asset-meta">
            <span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
            </span>
<mt:Unless name="hide_counts" eq="1">
            <mt:IfCommentsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></a></mt:IfCommentsActive>
            <mt:IfPingsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a></mt:IfPingsActive>
</mt:Unless>
        </div>
    </div>
    <div class="asset-content entry-content">
<mt:If tag="EntryBody">
        <div class="asset-body">
            <$mt:EntryBody$>
        </div>
</mt:If>
<mt:If name="entry_archive">
    <mt:EntryIfTagged>
        <div class="entry-tags">
            <h4>タグ<span class="delimiter">:</span></h4>
            <ul>
                <li><mt:EntryTags glue='<span class="delimiter">,</span></li> <li>'><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags></li>
            </ul>
        </div>
    </mt:EntryIfTagged>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            続きを読む: <a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>
        </div>
</mt:If>
    </div>
    <div class="asset-footer"></div>
</div>
 

 

※黄色の部分はメタタグなので各自が自分のサイト用に修正すること。 ※水色の部分はパンくずリストの部分です。そのまま使えます。

タグ:

投稿者: 中小企業診断士ドモドモ遠田 日時: 2008年12月31日 09:40 |

パンくずリストは「ブログ記事」と「ブログ記事の概要」の２つのテンプレートをカスタマイズするMTOSで行こう！Movable Type Open Source

フェイスブックの「いいね」はいいですね。

はてなブックマーク：　 遠田幹雄中小企業診断士ブログはてなブックマーク数　 遠田幹雄中小企業診断士ブログはてなブックマーク　 遠田幹雄中小企業診断士ブログはてなブックマーク　 ヤフーブックマーク： Yahoo!ブックマークに登録　 user　ドモドモ[TOP]
株式会社ドモドモコーポレーション


株式会社ドモドモコーポレーション
〒929-1171　石川県かほく市木津ロ64-1　電話076-285-8058　ＩＰ電話：050-1462-8058
遠田幹雄　経済産業大臣登録 中小企業診断士#301227　ITコーディネータ#0026162002C
※事務所所在地は地図上で金沢市北部のかほく市JR横山駅近く、
　石川県庁からクルマで約３０分北上したところです。
　【ドモドモコーポレーションへのご案内地図】
　よろしく、どもども、ドモドモ。　count

　　　　　　　　　

MTOSで行こう!のコンテンツ

MTOSで行こう![TOP]
　※SEOに強いカスタマイズデータを利用した導入方法は【MTOS導入ステップ】をご覧ください

サイト内キーワード

サイト内検索


遠田幹雄の予定表

遠田幹雄の予定は【Googleカレンダー】で表示しています。
遠田幹雄のスケジュール表はグーグルカレンダーで
※ログインすると予定をご覧いただけます。
※遠田幹雄の公式ブログ「 遠田幹雄です。どもども、ドモドモ(^^)v 中小企業診断士ブログ」は、ほぼ毎日更新しています。遠田の近況はブログでご確認おねがいします。

お問い合わせ

メールでの問合せはこちらから
ご意見／ご感想はSSL対応の
メールフォームからどうぞ

業務経歴書のご請求

業務経歴書の体裁、実際にはA4で５ページです。
遠田幹雄の業務経歴書の請求はこちら
のメールフォームからどうぞ

それぞれSSLのフォームになっています。

遠田幹雄
代表者のグーグルプラスは「 遠田幹雄（Google+） 」です。

株式会社ドモドモコーポレーション
株式会社ドモドモコーポレーションの企業としての公式サイトは株式会社ドモドモコーポレーションdm2.co.jpです。

ソーシャルブックマーク

はてなブックマーク:サイト全体　 はてなブックマーク数
ＭＴＯＳで行こう！　 ＭＴＯＳで行こう！　 はてなブックマーク　 ブログはてなブックマーク
ヤフーブックマーク： Yahoo!ブックマークに登録 user
MTOSで行こう！Movable Type Open Source
このサイト「MTOSで行こう！Movable Type Open Source」のフィードを取得する。
atom atom.xmlを取得
RSS RSS1.0を取得
※フィード(Feed)とは、ブログやニュースサイトなどのウェブサイトのコンテンツ概要を配信用に加工した文書のこと。代表的なフォーマットとしてはRSSやAtomがある。
株式会社ドモドモコーポレーション　〒929-1171　石川県かほく市木津ロ64-1　電話076-285-8058　ＩＰ電話：050-1462-8058
copyright ドモドモコーポレーション by 中小企業診断士ブログの遠田幹雄 since 2000/10/10 ©