私の運用的に、カテゴリーが際限なく増えていき大変煩雑な状況になったので表示を整理したいと思ったのですが、思った通りのやつが見つからなかったのでちょっと作ってみました。
サイドバーの「カテゴリー」に対して修正を加えるJavaScriptになります。
GIthubとかにしたほうがいいかなとも思ったのですが意外と短くまとまったのでそのままつけてみました。
ビフォアアフター
まずデフォルトのカテゴリーはこうやん？
スクリプト適用後はこうじゃ！
表示カテゴリー順は、「最初に親カテゴリーが出てきた順」になっているので、例えばカスタムで親カテゴリーを上に上げてやると
こうなります。
親カテゴリーと子カテゴリーの設定について
カテゴリーの親子関係は、カテゴリー名をつけるときに「(親カテゴリー)-(子カテゴリー)」というように「-」(半角ハイフン)で区切ってある場合に検知します。
例えば「はてなブログ-その他」というのは、「はてなブログ」が親カテゴリーで「その他」が子カテゴリーとなります。
これは、こちらのパンくずリストの親子関係をそのまま認識するようにです。
bulldra.hatenablog.com
カテゴリーを登録するときは、「親カテゴリー」を別途登録してください。
その下に子カテゴリーが追加されるような動作になります。
JavaScriptの配置
次のスクリプトを、「デザイン→カスタマイズ→フッタ」に追加してください。
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script lang="text/javascript">
<!-- Version 1.0.1 Copyright http://kagerou-ts.hatenablog.jp/ -->
$(function(){
// カテゴリーを取得する
// -で区切られていたら親-子カテゴリと認識して整理
var sort_list = [];
var parent_list = {};
var child_list = {};
$('.hatena-module-category .hatena-module-body .hatena-urllist li').each(function() {
// 下にあるaタグの文字で判定
var a_obj = $(this).find('a');
var text = a_obj.text();
// カテゴリ判定
// -が入っていたら親-子とする
if ( text.indexOf('-') != -1 ) {
var list = text.split('-');
var category = list[0].trim();
var category_text = list[1];
a_obj.text(category_text);
if( ! child_list[category] ) { child_list[category] = []; }
child_list[category].push(' ', a_obj);
a_obj.unwrap();
} else {
// そのまま親カテゴリとする
var category = text.substr(0, text.indexOf('(')).trim();
parent_list[category] = $(this);
sort_list.push(category);
$(this).addClass('parent');
}
});
// 親リストに追加
// sort_listから順に取得することで、カテゴリリストに出てきた順番に処理する
for(var i=0; i<sort_list.length; i++) {
var category = sort_list[i];
var parent = parent_list[category];
if ( child_list[category] ) {
// 新しく子として追加
parent.append('<br>');
parent.append(child_list[category]);
}
};
});
</script>
最初の
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
についてはjqueryのインポートなので、他で定義していたら省いてください。
サイドバーへのカテゴリーの追加
「デザイン→カスタマイズ→サイドバー」の「モジュールを追加」より、カテゴリーの表示を追加します。
改造ポイント
var list = text.split('-');
var category = list[0].trim();
var category_text = list[1];
a_obj.text(category_text);
if( ! child_list[category] ) { child_list[category] = []; }
child_list[category].push(' ', a_obj);
のところで子カテゴリーの表示テキストを作っています。ここを変えると表示も変わります。
最後の「a_obj.text()」で設定するのが子カテゴリーの表示になります。
区切りとしていれている全角スペースは、下のところでカテゴリーの配列に差し込んでいます。そうしないとスタイルシートによってはリンクの線が出てしまうので…
いまのところ最後にまとめてカテゴリとしていれるのでこれでいいかなという感じです。
(2016/6/18追記) 「Naked」テーマ対応版
Nakedというテーマに対応したときに、そのままだと表示がおかしくなってしまってので改造したものを置いておきます。
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script lang="text/javascript">
<!-- Version 1.0.1.1 Copyright http://kagerou-ts.hatenablog.jp/ -->
$(function(){
// カテゴリーを取得する
// -で区切られていたら親-子カテゴリと認識して整理
var sort_list = [];
var parent_list = {};
var child_list = {};
$('.hatena-module-category .hatena-module-body .hatena-urllist li').each(function() {
// 下にあるaタグの文字で判定
var a_obj = $(this).find('a');
var text = a_obj.text();
// カテゴリ判定
// -が入っていたら親-子とする
if ( text.indexOf('-') != -1 ) {
var list = text.split('-');
var category = list[0].trim();
var category_text = list[1];
a_obj.text(category_text);
if( ! child_list[category] ) { child_list[category] = []; }
// nakedでは空白があると余計っぽいので削除
child_list[category].push(a_obj);
a_obj.unwrap();
} else {
// そのまま親カテゴリとする
var category = text.substr(0, text.indexOf('(')).trim();
parent_list[category] = $(this);
sort_list.push(category);
$(this).addClass('parent');
}
});
// 親リストに追加
// sort_listから順に取得することで、カテゴリリストに出てきた順番に処理する
for(var i=0; i<sort_list.length; i++) {
var category = sort_list[i];
var parent = parent_list[category];
if ( child_list[category] ) {
// 新しく子として追加
// 最初は一段落落とす
parent.append('<br> ');
parent.append(child_list[category]);
}
};
});
</script>
<!-- nekid用のスタイル調整 -->
<style type="text/css">
.hatena-urllist li {
padding: 8px 0;
}
.hatena-module-category a{
display: initial;
}
</style>
ポイントとして、Nakedではサブカテゴリの前に空白を入れると冗長になるから消してみて、メインカテゴリの改行のところだけにしてみました。
またスタイルシートもaタグのblock化を解除して、liの余白を取りました。
免責事項ならびに利用、改造について
このスクリプトを使用したことで被った損害・損失に対しては、一切の責任を負いかねます。
著作権は放棄しませんが改造、転載等は許可します。改造、転載等されたスクリプトの責任は、私には一切無いものとします。
修正履歴
2016/6/18 1.0.1.1 「Naked」テーマ対応を追記しました
2016/1/26 1.0.1 区切りの全角スペースの入れ方を修正しました