はじめに

Before	After

ブログのカテゴリの種類が増えてきて、縦にすごく長くなってしまっていたので
カテゴリを階層化して見やすくしました

この記事にはカテゴリを階層化した手順を書き残しておきます

手順

基本的には上記サイト様の手順を踏んでおりますが、
自分のブログに合うようにいくつか調整をしました

1. スクリプトの設定

はてなブログの管理ページから「デザイン > カスタマイズ > フッタ」を開き、

<!-- カテゴリ階層化 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
<!-- カテゴリ階層化 ここまで -->

上記のコードを貼り付けます

参考元のサイト様では

<script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>

このコードも追加するよう紹介されていますが、
このコードはサイドバーのカテゴリを階層化するものではなく、

f:id:baba_s:20191201200340p:plain

記事ページのカテゴリ表示を階層化するコードであり、
自分のブログでは不要だったので、使わないようにしております

2. スタイルシートの設定

はてなブログの管理ページから「デザイン > カスタマイズ > デザインCSS」を開き、

/* カテゴリ階層化 */

.hatena-module-category .hatena-urllist li a {
  display: contents; /* ★ 矢印と文字の位置がズレないように設定 */
}

.hatena-module-category ul li {
  display: block;
  padding: 8px 0;
  border: 0;
  list-style-type: none;
}

.hatena-module-category ul li a {
  display: inline-block;
  padding: 0;
  text-decoration: none;
  color: #000;
  border: none;
  transition: 1s ease;
}

ul.hatena-breadcrumb-plus-child1 {
  padding-left: 30px;
}

ul.hatena-breadcrumb-plus-child2 {
  padding-left: 15px;
}

.hatena-breadcrumb-plus-toggle-button {
  cursor: pointer;
  padding-right: 4px; /* ★ 矢印と文字の間隔を開ける */
}

/* カテゴリ階層化 ここまで */