Bloggerでパンくずリスト(Bread Crumb/Topic Path)を自動生成させる記述

こちらの記事もお薦めです…

 自作パンくずリスト(Bread Crumb/Topic Path)をボタン化してスタイリッシュにする

 パンくずリストをHTML要素のマウスホバー時に光源がカーソルに追従するエフェクトで実装する


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆

当サイトでは…

既に…記事フッターのラベルを非表示にして…

関連記事を自動生成して表示させていますが…

関連記事は水平方向のナビゲーションですので…

「この記事の階層には他にどんなカテゴリがあるか」は表示出来ますが…

「この記事は何のカテゴリに属しているか」は表示出来ません…

そこで垂直方向のナビゲーションである…

「パンくずリスト」も導入しています…

まぁ…ラベルを表示すれば良いじゃないか…

という考え方もあるでしょうが…

記事フッターがゴチャゴチャするのが嫌なので…

このような手法をとっています…

尚…カスタマイズに際しては…

 Bloggerで記事フッターのラベルを表示させない記述

 Bloggerの記事フッターに関連記事を自動生成させるスクリプト…jQuery編


も…合わせてお読みになる事をお奨めいたします…

「パンくずリスト」を導入すると…

「Home」での表示

「ラベル有り投稿ページ」

「ラベル無し投稿ページ」

「年アーカイブページ」

「月アーカイブページ」

「検索結果ページ」

…のようになります…

でわ…いきますッ

「デザイン」「HTMLの編集」

「ウィジェットのテンプレートを展開」から…

「Ctrl + F」で …

<b:include data='top' name='status-message'/>

…を検索…

ハイライト表示されたら削除して…同じ場所に…

<b:include data='posts' name='breadcrumb'/> と記述します…

この操作によりラベルをクリックした際に表示される…

ステータス メッセージが非表示になります…

 Bloggerでステータス・メッセージを表示させない記述


「Ctrl + F」で <b:includable id='main' var='top'> を検索…

ハイライト表示されたら  １列上  に以下のコードを貼り付け…

パンくずリストの「HTML」

<b:includable id='breadcrumb' var='posts'>
<div id='breadcrumb'>
<span style='color: #20B2AA;'><b>Current Location : </b></span><a expr:href='data:blog.homepageUrl' rel='home'>Home</a>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<img alt='の中の' border='0' src='リストマークのURL'/> 
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
<b:else/>
<img alt='の中の' border='0' src='リストマークのURL'/> Unlabeled
</b:if>
<img alt='の中の' border='0' src='リストマークのURL'/> <span><data:post.title/></span>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<img alt='の中の' border='0' src='リストマークのURL'/> <data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<img alt='の中の' border='0' src='リストマークのURL'/> <data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<img alt='の中の' border='0' src='リストマークのURL'/> All Posts
<b:else/>
<img alt='の中の' border='0' src='リストマークのURL'/> <data:blog.pageName/>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>

ピンクの文字列は…

ご自由に変更して下さいな…

区切りに画像を使わずに「>」などでも代用出来ます…

その場合は画像タグごと削除して入れ替えて下さい…

最後に CSS 部分に下記を記述します…

パンくずリストの「CSS」

/* Bread Crumb
------------------------------ */
#breadcrumb { 
margin: 0 0 10px 0; 
padding: 5px; 
background: #222222;
border-top: 1px solid #555555;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #555555; 
font-size: 90%; 
line-height: 1.4; 
}

「パンくずリスト」は記事上部に表示されますので…

「Posts」セクションの上辺りに記述しておきましょう…

「テンプレートを保存」して完了です…

現在は「img」タグを使わない記述にしています…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

2010.11.01 追記

当サイトのように…
トップページには「パンくずリスト」を表示したくない方は…
以下のように赤文字の条件文を２列追加して下さい…

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
（省略）
</b:if>
</b:includable>

Tips Universal Header Sidebar Footer Current-Label : Main