Bloggerの非レスポンシブ公式テンプレート等をパンくずリストに対応させる

備忘録
Simple, Picture Window, Awesome Inc., Watermark, Ethereal, Travel 等が対象になります。
(レスポンシブ対応の新しい公式テンプレートは不明)
メリットは検索エンジンで表示された際にラベルが見える事と、投稿タイトル上に今何処を見ているかというのがわかるくらい(Bloggerでは疑似的な物になりますので、これは必要に応じてコメントアウトしても良いと思いますが)

色々なBlogger対応のパンくずが公開されていると思いますが、

• bloggerにパンくずリストを設置する簡単な方法３ステップ | トーマスイッチ

さんのコードをアップデートさせたものになります。

途中までの手順とCSSコードは同じ
追記
CSSコードはテンプレートによって各自調整が必要です(要望があれば記載します)

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<!-- b:if cond='data:label.isLast == &quot;true&quot;' -->
<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:label.url' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>
<meta content='2' property='position'/></li>
<!-- /b:if -->
</b:loop>
<b:else/>
</b:if>
<li><data:post.title/></li>
</b:loop>
</ol>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'> <a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<li><data:blog.pageName/></li>
</ol>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<li><data:blog.pageName/></li>
</ol>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

ul - > olタグへのアップデートとposition対応が変更点
ラベルページ等はWebページ扱いにしています
<b:includable id='comment-form' var='post'> 上にコピーします

その他 AndroidMag での追加CSS

.breadcrumb ol.r {
display: inline;
list-style-type: none;
}
.breadcrumb ol.r:after {
content: " > ";
}
.breadcrumb ol.r:last-child:after{
content: none;
}