はてなブログにパンくずリスト追加してみた。

いつからできたのかわかんなかったんですけど、デザイン設定にパンくずリストを追加するチェックボックスがあったのでチェックしてみました。

そしたら、パンくずリストが記事上に表示されるようになったんですけど、前々から気になっていたパンくずリストのコードはどう記述すればいいのかわかんなかった私にとっては大いに参考になりました。

ワニchanのおふぃすさんろくご 内の記事のパンくずリストがGoogleで認識されないからどうすればいいのか半ばあきらめていたんですけどね。

試しに『Cortana検索ボックスの背景色が白になった場合の対処方法』の記事のパンくずリスト部分のコードを貼り付けてみました。

<div id="top-box">
<div class="breadcrumb">
<div class="breadcrumb-inner" itemscope 
itemtype="http://data-vocabulary.org/Breadcrumb">
<a class="breadcrumb-link" 
href="http://wanichan.hatenablog.jp/" itemprop="url">
<span itemprop="title">トップ</span>
</a> <span class="breadcrumb-gt">
&gt;
</span>
<span class="breadcrumb-child" itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a class="breadcrumb-child-link" href="http://wanichan.hatenablog.jp/archive/category/Windows" itemprop="url">
<span itemprop="title">Windows</span></a> </span>
<span class="breadcrumb-gt">
&gt;
</span>
<span class="breadcrumb-child" itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
<span itemprop="title">Cortana検索ボックスの背景色が白になった場合の対処方法</span> </span> </div>
</div>
</div>

 itemprop="child" という属性を付けたことがなかったです。別にリストタグを使わなくてもだいじょぶですね。ベタ打ちでもOKみたいです。全体をかこっているのは以下のdiv ですね。Expression Web 4のクイックタグセレクターボタンで選択すると、どこからどこまでの範囲かわかります。

<div class="breadcrumb-inner" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

で、それぞれの階層ごとにspanタグで括ってますね。ベタ打ちの文字単位の場合はspanタグで対処できるみたいです。

トップ部分はこんな感じで

カテゴリー部分はこんな感じ