コピペでどうぞ。サイドバーのカテゴリーモジュールに親子関係を持たせて表示するカスタマイズ

こんにちは、つばさ（@tsubasa123）です。

久しぶりにカスタマイズの記事を書いている気がします。今日はやろうやろうと思っていたものの、ついつい後回しにしてしまっていたカスタマイズをご紹介します。コピペでいけますので気になった方はお試しください。

サイドバーが気になった
サクッと完成
1. JavaScriptの追記
2. CSSの追記
課題が2つほど
さいごに
関連記事

サイドバーが気になった

bulldra.hatenablog.com

今日のカスタマイズは上記サイトで紹介されているパンくずリストのカスタマイズを導入している人向けとなっています。当ブログでもお世話になっているカスタマイズです、ありがとうございます。

SEOとか詳しいことは存じませんが、このカスタマイズはやったほうがいい！とあちこちのブログで紹介されていましたので、私も結構早い段階で導入しました。

パンくずリストがいい感じに表示されるのはうれしかったのですが、どうもサイドバーのカテゴリー一覧の表示がごちゃついているように感じておりまして。

これ。「親カテゴリー-子カテゴリー」も表示されています。まぁ、自分でカテゴリー作ったんだから表示されるのが当然なんですが、親の部分はいらないんじゃないかな、ってずっと思っていました。

先のサイトで「親カテゴリーのみ表示する」ための追加のカスタマイズも用意されていたので試してみたんですが、

ちょっと寂しいかなー。なんかスッカスカのブログみたい。まぁあながち間違ってないですが。

子カテゴリも表示したい、で、できればどの親の子カテゴリなのかもわかるようにしたい。しゃーない、作るか、ってのが今回のカスタマイズを行った動機です。

サクッと完成

完成したのがこちら。

うん、悪くない。これがやりたかった。デザイン性皆無のシンプルバージョンで作成しました。CSSが得意な方は存分にアレンジしてご利用ください。

今回のカスタマイズはCSSとJavaScriptの追記が必要になります。万が一に備えて、作業前はバックアップを取るようにしてください。

JavaScriptの追記

<script>
;(function($) {
$(function() {
'use strict';
var categories = {};
$('.hatena-module-category .hatena-module-body li').each(function() {
var url = $(this).find('a').attr('href');
var title = $.trim($(this).text());
if (title.match('-')) {
var t = title.split('-');
var r = new RegExp(t[0] + ' (.*?)', 'g');
var p;
for (var k in categories) {
if (k.match(r)) {
p = k;
continue;
}
}
categories[p].children.push({
url: url,
title: t[1],
});
} else {
categories[title] = {
title: title,
url: url,
children: [],
};
}
});
var html = '<ul class="hatena-custom-urllist">';
$.each(categories, function() {
html += '<li><a href="' + this.url + '">' + this.title + '</a>';
if (this.children) {
html += '<ul>';
$.each(this.children, function() {
html += '<li><a href="' + this.url + '">' + this.title + '</a>';
});
html += '</ul>';
}
html += '</ll>';
});
html += '</ul>';
$('.hatena-module-category .hatena-module-body').html(html);
});
})(jQuery);
</script>

上記のJavaScriptを「デザイン > カスタマイズ > フッタ」に追記してください。「デザイン > カスタマイズ > ヘッダ」でも動作はしますが、フッタに入れた方がページの読み込みの邪魔をしなくなるのでこちらの方が無難だと思います。

CSSの追記

.hatena-module-category .hatena-module-body ul {
margin: 0 0 0 20px;
padding: 0;
}
.hatena-module-category .hatena-module-body ul > li  a {
display: inline-block;
padding: 6px 0;
}
.hatena-module-category .hatena-module-body ul ul {
padding-left: 15px;
}