はてなブログの記事のページに表示されるカテゴリーのリンクを、パンくずリストに書きかえるスクリプトを書きました。id:bulldraさんの記事に便乗しただけなんですけども。
できれば現状のカテゴリーを直したりするのを避けたかったのと、自分でやったらどうなるか。ということで毎度のことながらかなり力技。
2014/10/19 20:26 追記
パンくずリストの作り方が間違っていたため、プログラムと記事を書き直しました。
追記ここまで
コード
<script type="text/javascript"> var blog_url = "http://sprint-life.hatenablog.com/"; var category_link = document.querySelectorAll("div.categories a"); for(var i=0; i < category_link.length; i++){ category_link.item(i).setAttribute("itemprop","url"); category_link.item(i).innerHTML = "<span itemprop=\"title\">" + category_link.item(i).innerHTML + "</span>"; } category_div = document.querySelector("div.categories"); category_div.setAttribute("itemscope","itemscope"); category_div.setAttribute("itemtype","http://data-vocabulary.org/Breadcrumb"); category_div.innerHTML = "<a href=\"" + blog_url + "\" itemprop=\"url\"><span itemprop=\"title\">トップ</span></a> >" + category_div.innerHTML; </script>
先にカテゴリーのリンクにitemprop属性とspanタグの追加をしたあと、div(categories)に対してトップページへのリンクの追加、itemscopeとitemtype属性を設定しています。
使い方
blog_urlを自分のブログのURLかルートを表わす/に変更して上記のコードをデザインの「記事下」に追加してください。ブログのテーマによってはデザインと合わないかもしれません。
出力例
例えばこの記事であればこんな感じで出力されています。*1
<div class="categories " itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://sprint-life.hatenablog.com/" itemprop="url"><span itemprop="title">トップ</span></a> > <a href="http://sprint-life.hatenablog.com/category/JavaScript" itemprop="url"><span itemprop="title">JavaScript</span></a> <a href="http://sprint-life.hatenablog.com/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" itemprop="url"><span itemprop="title">プログラミング</span></a> <a href="http://sprint-life.hatenablog.com/category/%E3%81%AF%E3%81%A6%E3%81%AA" itemprop="url"><span itemprop="title">はてな</span></a> </div>
ウェブマスターツールからパンくずリストとして認識されたみたいなんですが詳細が表示されず、現時点では検索結果も記事のURLが表示されるので、本当に正しく認識されたのかは確認できてません。問題なければ記事に対して最初に設定したカテゴリーがパンくずリストとして使われるはずです。*2
自分の場合、先にカテゴリー自体をちゃんと整理したほうがいいんじゃないかとも思うわけですが、カテゴリーのページについては標準でパンくずリストが実装されているので、どこかのタイミングで記事の方も対応されることを期待してます。
