［誰でもできる］カテゴリー階層化が超簡単に実装出来るブログパーツを発見…使い方も解説！

はてなブログカスタマイズ：カテゴリーの階層化

これ気になってたやつだ！　

それは良かった…　

今回はぶろぐパーツ（カテゴリーの階層化）のご紹介です。

プログラミング知識の乏しい僕でも簡単に実装することができたぶろぐパーツ（カテゴリー階層化）を発見したので、少しでもお役に立てればと、このぶろぐパーツを作られた方に了承を得て今回の記事を書いています。

作られたのは、僕が勝手に先生と読んでいる Mineral先生です。　

※勝手に呼んでいるだけでMineral先生は何も知りません

Mineral先生が書かれた記事がコチラです。　

multimineral-tech.com

Mineral先生はプログラミング関連の記事を書かれていますので、興味のある方は是非読まれてみてください。　

今回の記事ではMineral先生にコピー用コード（カテゴリー階層化ブログパーツ）をそのまま使わせてほしいとお尋ねしたところこころよく承諾してくださいました。

Mineral先生本当にありがとうございます。　

※お断り：【kamasanchiのblog】では、はてなブログ無料版を使っている為、できない部分もある為簡略化しています。

サイドバーのカテゴリー階層化
- カテゴリー階層化メリット、デメリット
  - カテゴリー階層化メリット
  - カテゴリー階層化デメリット
カテゴリー階層化手順
綺麗にカテゴリー階層化する方法
- カテゴリー階層化作業前の準備
- パンくずリスト
あとがき

サイドバーのカテゴリー階層化

それでは、本題に入りましょう。　

以前よりサイドバーのカテゴリー階層化をしたいと思っていたのですが、なかなか実装できずに放置していましたが、Mineral先生のカテゴリー階層化ブログパーツなら出来ると確信に至りました。

誰にでもできるはずです。　

実際に実装した後の画像がコチラ…

【kamasanchiのblog】はスマホで作成しているのでスマホスクショがかなり多いです。　

※以前はスマホのみでしたが今はたまにパソコン使います。

画像はBefore→Afterで載せたかったのですが、Beforeを撮ったつもりでどこにも画像がありませんでした。　

しっかりしろだし…　

気づいたのはカテゴリーの名前をすべて変更してからだったのでそこは察してください。　

カテゴリー階層化メリット、デメリット

階層化するにあたりメリット、デメリットを上げておきます。　

カテゴリー階層化メリット

カッコイイ（デザイン性アップ）
回遊率アップ（の可能性がある）

使い方次第で回遊率はアップ！　

設置場所の違いで違いがありそうですね…　

※カッコイイって完全に見た目ですし…回遊率も分析したわけではありません。

カテゴリー階層化デメリット

SEOに影響が出るかもしれない
記事数が多いと実装が大変（後述）

SEOへの影響はカテゴリーの編集で影響するかもしれないと考えていましたが数ヶ月間影響はでていません。　　

※特定のキーワード検索で上位表示（1位付近）されている記事のカテゴリー名を変えても特に検索順位に変化はありませんでしたし【kamasanchiのblog】では困ったことは何も起きませんでした。

あくまで個人的な見解ですので、実装するもしないも自己の判断でお願いします。　

カテゴリー階層化手順

手順はいたって簡単です。　

カテゴリー階層化ぶろぐパーツ①（JavaScript）をフッターに貼り付ける
カテゴリー階層化ぶろぐパーツ②（CSS）をデザインCSSに貼り付ける
カテゴリー名の編集、追加する

手順の1、と2、はコピペ作業なので、実質2手順です。　

Mineral先生さすがですね…　

難しい事は何１つなくカテゴリーの階層化が実現出来ます。　

3、のカテゴリー名の編集、追加では、後ほどわかりますが、記事数やカテゴリー数で作業量に違いが出てきます。

僕の場合はそれほど記事数も多くなかったのですが、最初の頃に書いた記事を消したりと整理しながらだったので時間がかかってしまいました。

まっさらなときに実装すると楽だったかもです…したくても出来なかったのですけどね…　

ここから手順に移りますが1→2→3の順番に意味はないので3のカテゴリー編集、追加からするのも自由です。

※Mineral先生のお話ではコード(カテゴリー階層化ぶろぐパーツ)は改良される事もあるとのことですので、オリジナル(Mineral先生の記事)では改良版の可能性もあります。

①

※大事な事ですので再度お伝えします…カテゴリー階層化ぶろぐパーツでの実装は自己の判断です。実装する際のミスやどのような影響も責任を負いません。　　

カテゴリー階層化ぶろぐパーツ①（JavaScript）

※3月28日更新※

<script id="category-settings" type="application/json">
  {
    "delimiter": "__",
    "initialState": "close"
  }
</script>
<script>"use strict";document.addEventListener("DOMContentLoaded",function(){var a=function(a,b){var c=document.createElement("a");return c.setAttribute("href",a),c.textContent=b,c},b=function(a,b){var c=document.createElement("label");return b&&c.classList.add(b),c.textContent=a,c},c=function(a,b){var c=document.querySelectorAll(b);c.length&&c.forEach(function(b){b.textContent=b.textContent.split(a.delimiter).pop()})},d=function getSettings(){var a=document.getElementById("category-settings");return a?JSON.parse(a.text):{delimiter:"__",initialState:"close"}}();(function rebuildSidebarCategory(c){var d=document.querySelector("div.hatena-module-category > div.hatena-module-body");if(d){var e=d.querySelectorAll("ul > li > a");if(e.length){var f=d.querySelector("ul.hatena-urllist");if(f){f.parentNode.removeChild(f);var g=document.createElement("ul");g.className="hatena-urllist",d.appendChild(g),e.forEach(function(d){var e=d.getAttribute("href"),f=d.textContent.trim().split(c.delimiter),h=null;f.forEach(function(c,d){var i=c.replace(/\s+/g,"").replace(/\(\d+\)/g,""),j="category-".concat(i),k="category-level-".concat(d),l=d+1===f.length,m=g.querySelector(".".concat(k,".").concat(j));if(m){if(l){var n=m.querySelector("ul");m.textContent="",m.appendChild(a(e,c)),m.appendChild(n)}h=m}else{var o=document.createElement("li");if(o.classList.add(k,j),l?o.appendChild(a(e,c)):o.appendChild(b(c,"category-li-label")),0===d)g.appendChild(o);else{var p=h.querySelector("ul");if(p)p.appendChild(o);else{var q=document.createElement("ul");q.appendChild(o),h.appendChild(q)}}h=o}})}),g.querySelectorAll("li").forEach(function(a,b){if(a.querySelector("ul")){var d=document.createElement("label");d.setAttribute("for","category-toggle-checkbox-".concat(b)),d.classList.add("category-toggle-checkbox-label","category-li-label"),a.insertBefore(d,a.firstElementChild);var e=document.createElement("input");e.setAttribute("type","checkbox"),e.setAttribute("id","category-toggle-checkbox-".concat(b)),"open"===c.initialState&&(e.checked=!0),e.classList.add("category-toggle-checkbox"),a.insertBefore(e,a.firstElementChild)}else{var f=document.createElement("label");f.classList.add("category-not-to-toggle","category-li-label"),a.insertBefore(f,a.firstElementChild)}})}}}})(d),c(d,"a.entry-category-link"),c(d,"a.archive-category-link")});</script>

ぶろぐパーツ①（JavaScript）貼り付け箇所（フッター）

上記のパーツ①（JavaScript）をコピーしたらフッターに貼り付け（追記）ます。　

［ダッシュボード］→［デザイン］→［スパナマーク］→［フッター］

ぶろぐパーツ①（JavaScript）貼り付け位置 — JavaScriptをフッターに追記

※追記です。他の記述を消したりしないように注意しましょう。　

カテゴリー階層化ブログパーツ②（CSS）

/* サイドバーのカテゴリ */
.hatena-module-category ul {
  list-style: none;
}
.hatena-module-category ul ul {
  display: none; /* hide */
}
.hatena-module-category ul input.category-toggle-checkbox:checked ~ ul {
  display: block; /* show */
}
.hatena-module-category ul input.category-toggle-checkbox {
  display: none;
}
.hatena-module-category label.category-toggle-checkbox-label::before {
  content: "▶"; /* hide */
  cursor: pointer;
}
.hatena-module-category
  input.category-toggle-checkbox:checked
  + .category-toggle-checkbox-label::before {
  content: "▼"; /* show */
}
.hatena-module-category label.category-not-to-toggle::before {
  content: "・"; /* not-to-toggle */
}
.hatena-module-category label.category-li-label {
  margin: 0;
}
.hatena-module-category label.category-li-label::before {
  margin-right: 0.3em;
}

ぶろぐパーツ②（CSS）貼り付け箇所（デザインCSS）

ぶろぐパーツ②（CSS）をコピーしたら同じ様にデザインCSSに貼り付けます。　

［ダッシュボード］→［デザイン］→［スパナマーク］→［デザインCSS］

カテゴリー階層化パーツ②CSSのデザインCSSに追記 — CSSをデザインCSSに追記

※コチラも追記です。記述を消したりしないように注意しましょう。　

ちなみにですが、CSSは後ろ（下）の方が優先度が高くなるので、同一のclass名が存在するとデザインが同じく反映されますので、多くの記述がある時は特に確認が必要です。

たまに同じのあったりします。　

書いたことをわすれんな！　

カテゴリー階層化ぶろぐパーツコピペ後

ぶろぐパーツの①と②を追記したらあとはカテゴリーの編集と追加だけです。　

だけって…これが一番時間かかるんじゃん…　

ここまできたらやるっきゃないっしょ！　

カテゴリー階層化ぶろぐパーツはカテゴリーの編集と追加が終わってからでも大丈夫ですが、稀に実装出来ない場合もあるようです。

なぜかはわかりませんが僕のは現在実装が外れて修復を試みています。　　

カテゴリー階層化ぶろぐパーツ機能説明

カテゴリー編集する前に階層化に必要な条件を解説します。　

ぶろぐを始めて間もない状態であればそれほど多くのカテゴリーは存在していないと思いますが、数ヶ月、数年とぶろぐを続けている方であればそれなりの数になっているかもしれません。

そんなときは紙に書きだした方がいいです。　

このカテゴリー階層化ぶろぐパーツでは、アンダースコアを二つ（　__　）付けることでカテゴリーの階層化を区別し、親カテゴリー、子カテゴリー、孫カテゴリーとそれぞれにカテゴリーリンクを付ける事も、付けないことも可能です。

※カテゴリーリンクはカテゴリー別の一覧に飛ばす機能の事

ちょっと何言ってるかわかんないです。　

大丈夫…俺も何言ってるかわかんないから…　

ふざけてんのか！　

カテゴリー編集、追加

カテゴリーリンクはカテゴリーの数だけ生成されます。　

はてなブログのカテゴリリンクというのはカテゴリーを作ったら生成されるので、カテゴリーが無ければリンクも存在することはありません。

図で見てみましょう。　

上の図のようにアンダースコア二つで区切ったカテゴリーを作ると、カテゴリー階層化ぶろぐパーツが実装できていれば、階層化された表示がされます。　

そしてカテゴリーリンクはカテゴリーの数だけしか生成することができないので、上記のように一つのカテゴリーの場合は階層化されていたとしても、リンク機能がついているのは1か所だけ（上記の場合は孫カテゴリー）となります。

子カテゴリーにもリンク機能を付けたいときはどうするんですか？　

二つのカテゴリーを作ります。　

上記では孫カテゴリーまでをアンダースコア二つ（　__　）で区切ったカテゴリーを作ってリンク機能は孫カテゴリーに付属される結果になりました。

と…いうことは？　

子カテゴリーまでのカテゴリーを作る！　

ちっ…正解だよ…　

子カテゴリーにリンクをつけたい場合はアンダースコアを二つ（　__　）で区切った子カテゴリーまでのカテゴリーを設定することで、リンク機能を付属させることができます。

これも図で見てみましょう。　

カテゴリー階層化のカテゴリー編集、子カテゴリーのリンク機能追加 — 子カテゴリーにもリンク機能を付属させる

カテゴリーに表示されるものは変わらず、子カテゴリーにもリンク機能が付属されています。　

さらに親カテゴリーにもリンク機能を付属させたい場合はアンダースコアを二つ（　__　）をつけずに親カテゴリーだけを追加するとOKデス。

カテゴリー階層化のカテゴリー編集、親カテゴリーのリンク機能追加 — 親カテゴリーにもリンク機能を付属させる

これで自由なカテゴリーの構築が可能になります。　

カテゴリー編集、追加する場所

はてなブログではカテゴリーの追加場所と編集場所が別々の場所に存在します。　

カテゴリー編集場所

今までつけたカテゴリーを編集する場合は［ダッシュボード］→［カテゴリー］→［編集］と進んだ先にあります。

ちなみにですが、無料版を使っている場合は見出し設定ができません…　

PRO（有料版）を利用されている方であれば見出しの設定が可能になっていますので、カテゴリー名を半角で記入し見出しへ日本語表記などで設定したほうが見栄えもよくなると思います。

もちろん任意で、僕は使用していないのでカテゴリー名のみの記入です。　　

オリジナル（Mineral先生の記事）では見出しの設定もされていましたので、気になる方はオリジナル記事もご覧ください。

カテゴリーの追加場所

次にカテゴリーの追加場所ですが、追加する場所が2か所存在します。　

まずは1つ目は［ダッシュボード］→［記事の管理］→［公開］→［チェック］→［チェックした記事にカテゴリーを追加］→［新しいカテゴリーを作成］と進むとカテゴリーを追加するためのボックスが出現します。

公開記事に追加しないと追加されないので注意です。　

※当たり障りのない記事もしくはそのままカテゴリーを使う記事に追加していきましょう。

二つ目は記事の編集画面です。

記事編集の画面で［］のマークからカテゴリーの追加ができますが、こちらも公開記事で更新しなければ追加できません。

どちらの方法でしても実装には問題はありません。　

綺麗にカテゴリー階層化する方法

カテゴリーの階層化は量が多ければ多いほど大変です。　

ぶろぐを始めて間もない方であれば数十分、小一時間程度あればできると思いますが、長期で運用していてカテゴリーが大量になれば丸一日の作業になる場合もあります。

僕の場合はそれほど多くはなかったのですが、整理しながらの実装でしたのでそれなりの時間を要しました。　

カテゴリー階層化作業前の準備

カテゴリーを階層化する前は必ず、他の媒体（紙など）に書き出したほうがいいです。　

上の図のように、どこにリンクを付属させる（付く）のかを考慮しながら階層化に必要なカテゴリーをまとめておくと実際に作業に入ったときにスムーズにすすめることができます。

また、意識するものがもう一つあります。　

パンくずリスト

パンくずリストを気にしない方には特に必要のない情報です。　

はてなブログでは基本的にパンくずリストはカテゴリーの先頭のカテゴリーがパンくずリストとして表示されるので、カテゴリーを階層化するときは、ピラミッド型を意識するときれいな形で記事のカテゴリーが並び、パンくずリストの表示も親カテゴリーの表示がされます。

※僕自身あまり気にしていませんがパンくずは親カテゴリーになるようにしています。

どこを表示させるかは個人の自由ですが…すべての作業が終わったらカテゴリーの階層化も終わりです。　

自身で納得のできるリンク機能の付属や階層化パターンに仕上げてみましょう。

あとがき

ここまで書いておいてなんですが…　

この記事はMineral先生のお許しがあって作成したものです。Mineral先生の意に反したものでないことを願っています。

が！・・・　

Mineral先生から書き直してと言われれば書き直しますし、消してと言われたら消します。でもMineral先生は優しい(面識はありません)ので絶対消してとは言いません…多分…

本当にブログパーツ使用の件ありがとうございました。　

あと名前沢山出してごめんなさい…　

それでは…今回はここまで…　

ありがとうございました。　

かまさんちのぶろぐ

［ぶろぐ］や［アフィリエイト］を楽しく続ける為のぶろぐデス。