構造化したカテゴリをサイドバーのカテゴリー欄に表示してみた

・2015.1.31 編集・追記 - 言及記事がアップデートされていたため

f:id:syunki-gt:20140924150802p:plain
　前記事で「サイドバーのカテゴリを綺麗にリスト表示したいけど」「ちゃんと考えればできると思うんですが、メンドイ」とか書いたくせに、直後に作っちゃいました。

<a href="http://syunki.hatenablog.com/entry/2014/09/24/143253">367記事すべてのカテゴリを整理し構造化しパンくずリストを導入しました！ - 灰色の棚</a>

　意外とサクッと出来たので、やり方書いておきますね。

　では、いってみよー。

基本的にはこちらのコードを

<a href="http://bulldra.hatenablog.com/entry/category-breadcrumb-update">はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから</a>
　（記事のアップデートを確認したので差し替えました / 2015.1.31）

　こちらに上げられているコードに付け加えて、構造化したカテゴリをサイドバーのカテゴリー欄に表示していきます。

　なので、まずは上記事のコードを導入することが第一です。

Javascriptに数行書き足す

  for(var key in rootCategories) {
    if(!(rootCategories[key].outerHTML === void 0)) {
      html += '<li>' + rootCategories[key].outerHTML + '</li> ';
    }
  }

　このfor文を書き換えます。書き換えたのが、

  for(var key in rootCategories) {
    var html2 = '<ul>';
    for(var key2 in childCategories[key]) {
    	html2 += '<li>' + childCategories[key][key2].outerHTML + '</li>';
    }
    html2 += '</ul>';
    if(!(rootCategories[key].outerHTML === void 0)) {
      html += '<li>' + rootCategories[key].outerHTML + html2 + '</li> ';
    }
  }

　こちら。

　やったことは、親カテゴリのリストの最後に、その子カテゴリのリストを追加してます。単純です。

CSSを追加する

　CSSは使っているデザインなどによって様々だと思いますし、好きに整えるのがいいと思いますが一例として私が書いたものを載せておきますね。

.hatena-module-category li {
    display: list-item;
    margin-left: 15px;
    list-style-type: disc;
}
.hatena-module-category li li {
    margin-left: 25px;
    list-style-type: circle;
}
.hatena-module-category li a {
    display: inline;
    border: none;
    padding: 0;
    line-height: 20px;
    font-size: 100%;
}
.hatena-module-category li a:hover {
    background: none;
    text-decoration: underline;
}