読者です 読者をやめる 読者になる 読者になる

wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

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

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

f:id:wanichan:20160920122126p:plain

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

ワニ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">

f:id:wanichan:20160920130143p:plain

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

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

f:id:wanichan:20160920130749p:plain

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

f:id:wanichan:20160920130924p:plain