つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20170201143400j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

サイドバーが気になった

 

bulldra.hatenablog.com

 

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

 

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

 

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

 

f:id:tsubasa123:20170201142432j:plain

 

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

 

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

 

f:id:tsubasa123:20170201142457j:plain

 

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

 

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

 

サクッと完成

 

完成したのがこちら。

 

f:id:tsubasa123:20170201142524j:plain

 

うん、悪くない。これがやりたかった。デザイン性皆無のシンプルバージョンで作成しました。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を「デザイン > カスタマイズ > フッタ」に追記してください。「デザイン > カスタマイズ > ヘッダ」でも動作はしますが、フッタに入れた方がページの読み込みの邪魔をしなくなるのでこちらの方が無難だと思います。

 

f:id:tsubasa123:20170201142550j:plain

 

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;
}

 

上記のCSSを「デザイン > カスタマイズ > デザインCSS」に追記してください。CSSは当ブログで利用しているテーマに合わせて調整しておりますので、他のテーマをご利用の方は適宜修正していただけますようお願いします。

 

f:id:tsubasa123:20170201142605j:plain

 

課題が2つほど

 

とりあえず意図した通りには動作はしていますが、気になる点が2つあります。

 

1つは開閉式にするかどうか。月別アーカイブって年単位でアコーディオンみたいに開けたり閉めたりできるようになってるので、それに倣ったほうがいいのかな、というところ。

 

個人的には開けるための1クリックが煩わしいと感じるので全開で作成しましたが、この辺はニーズがあれば改良する余地はあると思っています。サイドバーなんでそこまで視認性を下げることはないと思いますが、下の方に広告を掲載したりすると、カテゴリ一覧に高さを取られたくない人はいるのかも。

 

2つ目はサイドバーのモジュールの設定。「アルファベット順」もしくは「記事が多い順」を指定していないと正常に動作しません。技術的な問題なので理由は省略しますが、ご利用いただける場合はこのどちらかを選択するようにしてください。

 

さいごに

 

ごちゃついていたサイドバーがスッキリして大満足です。もっとはやくやればよかったかな。今回はPC向けのカスタマイズでしたが、次はスマホ対策も考えようと思います。

 

ではでは、最後までお付き合いいただきありがとうございました。

 

関連記事

リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ

スマホサイト対応完了!はてなブログ公式目次のデザインカスタマイズ

レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ