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

記事の種類	はてなブログのカスタマイズ
SEO対策	関係あり
SXO対策	関係あり
難しさ	かんたん
重要さ	重要

次のような方にオススメ！

• はてなブログのカテゴリーを階層化したい？
• はてなブログのカテゴリー階層化のカスタマイズを知りたい
• はてなブログのカテゴリーが階層化できない

ぴっぴ（@hiyoko_no_pippi）も、はてなブログのカテゴリーを階層化したいと思ったことがありました。

ところが、はてなブログにはカテゴリーを階層化する機能がありません。

しかし、ご安心ください。

カスタマイズすれば、はてなブログのカテゴリーを階層化することができます。

そのような訳で今回は、はてなブログのカテゴリー階層化のカスタマイズを紹介します。

カスタマイズと言っても、そんなに難しいコードを書く訳ではありません。

なので、はてなブログを始めたばかりの方でも簡単にカテゴリーの階層化はできますよ。

ぜひ挑戦してみてください。

ただし今回ご紹介するカスタマイズは、外部読込やコードの増加により記事の表示が遅くなるというデメリットがあります。

カテゴリーの階層化のカスタマイズを導入される際は、十分ご検討ください。

記事を書いた人

ひよこブロガー

• ・ブログ開始69日で合計1万PV
• ・ブログ開始75日で収益獲得
• ・アクセスの約90％が検索流入

応援していただけるとスゴク嬉しいです！

• 読者になる
• 詳しく見る

あらためまして、ぴっぴです！

現役のはてなブロガーで、本ブログでは「はてなブログ」に関する記事を書いています。

ぴっぴのはてなブログでアフィリエイトのコンセプトは、はてなブログのことで困っている方を一人でも減らすことです。

おかげ様で毎月4000人以上の方が、本ブログをご利用されています。

ブログのカテゴリーの階層化とは

ブログには、記事をグループ化する機能があり、これをカテゴリーと言います。

そしてブログのカテゴリーの階層化とは、カテゴリーの中にグループを作ることです。

例えば野菜というカテゴリーならば、その中に果菜野菜と葉菜野菜、根菜野菜というカテゴリーを作る感じ。

元のカテゴリーを親カテゴリー、その中のカテゴリーを子カテゴリーと言います。

階層化できない、はてなブログのカテゴリー

ところが、はてなブログのカテゴリーは階層化できません。

そのため、はてなブログのカテゴリーを階層化するにはカスタマイズが必要になります。

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

はてなブログのカテゴリー階層化の手順は、次のとおりです。

1. パンくずリストの有効化
2. カテゴリーの表示
3. スクリプトの設定
4. スタイルシートの設定
5. カテゴリー階層化の設定

このように5つの手順で、はてなブログのカテゴリーを階層化します。

カスタマイズ後は、こんな感じです。

ところで、はてなブログのカテゴリー階層化のカスタマイズは、ブログ「小さな星がほらひとつ」の「【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました」で紹介されているものです。

STEP

パンくずリストの有効化

まず、はてなブログのパンくずリストを有効化します。

はてなブログのパンくずリスト有効化の手順は、次のとおりです。

1. デザイン
2. カスタマイズ
3. 記事
4. パンくずリストをチェック
5. 変更を保存する

この手順で、パンくずリストを有効化できます。

詳しい手順は「はてなブログのパンくずリストを表示させる設定変更の仕方」をご覧ください。

STEP

カテゴリーの表示

サイドバーにカテゴリーを表示します。
カテゴリーの表示の手順は、次のとおりです。

1. デザイン
2. カスタマイズ
3. サイドバー
4. カテゴリー
5. カテゴリーの表示設定
6. 変更を保存する

この手順で、カテゴリーを表示します。
詳しいカテゴリーの表示の手順は「はてなブログのカテゴリーの表示」をご覧ください。

STEP

スクリプトの設定

続いてスクリプトの設定をします。設定と言っても、フッタに次のスクリプトを入力するだけです。

フッタにスクリプトを入力する手順は、次のとおりです。

1. メモ帳にコードの貼り付け
2. URL-1のコードをコピペ
3. URL-2のコードをコピペ
4. デザイン
5. カスタマイズ
6. フッタ
7. スクリプトの入力
8. 変更を保存する

この手順でスクリプトの設定を行います。

まずメモ帳を開き、次のコードをコピペしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>URL-1のコード</script>
<script>URL-2のコード</script>

すると上の画像のようになります。

次は、下記のリンク先にアクセスしてください。

https://github.com/quotto/HatenaBreadcrumbPlus/blob/master/public/v1.1/js/breadcrumb.min.js

アクセスしたら、上の画像の赤枠で囲っているボタンをクリックします。

これでコードをコピーできました。

メモ帳に戻り「URL-1」のところにコピーしたコードをペーストします。

続いて下記のリンク先にアクセスしてください。

https://github.com/quotto/HatenaBreadcrumbPlus/blob/master/public/v1.1/js/category_archive.min.js

アクセスしたら、上の画像の赤枠で囲っているボタンをクリックします。

これでコードをコピーできました。

再びメモ帳に戻り「URL-2」のところにコピーしたコードをペーストします。

メニューのデザインを押します。

メニューの表示が切り替わったら、カスタマイズを押してください。

メニューの表示が切り替わったら、フッタを押します。

メニューが切り替わったら、フッタのHTMLエディタを押してください。

すると入力できるようになるので、メモ帳に作成したスクリプトをコピペします。

STEP

スタイルシートの設定

スクリプトの入力が終わったら、スタイルシートの設定をします。

1. メモ帳にコードをコピペ
2. URL-3のコードをコピペ
3. デザイン
4. カスタマイズ
5. ヘッダ
6. スタイルシートの入力
7. 変更を保存する

この手順でスタイルシートの設定を行ってください。

新しくメモ帳を開き、次のコードをコピペしてください。

<style>URL-3</style>

次は、下記のリンク先にアクセスしてください。

https://github.com/quotto/HatenaBreadcrumbPlus/blob/master/public/v1.1/css/fulldisplay.min.css

アクセスしたら、上の画像の赤枠で囲っているボタンをクリックします。

これでコードをコピーできました。

先ほどのメモ帳に戻り「URL-3」のところにコピーしたコードをペーストします。

メニューのデザインを押します。

メニューの表示が切り替わったら、カスタマイズを押してください。

メニューが切り替わったら、ヘッダを選びます。

メニューが切り替わったら、ヘッダのHTMLエディタを押してください。

すると入力できるようになるので、メモ帳のコードをスタイルシートを書き込み（コピペし）ます。

STEP

カテゴリーの設定

最後にカテゴリーの設定を行います。その際、次のルールに従って設定してください。

• 「親カデコリ-子カテゴリ」という命名規則で、擬似的な階層を表すカテゴリを登録する。
• 「親カテゴリだけ」のカテゴリを必ず登録する。
• カデコリの並び順が「親カテゴリ」→「親カテゴリ-子カテゴリ」となるように登録する。

引用元：小さな星がほらひとつ「【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました」

このルールに従ったカテゴリーの設定の仕方は、次のとおりです。

1. 記事を書く
2. カテゴリー
3. 新しいカテゴリー
4. 親カテゴリーの登録
5. 新しいカテゴリー
6. 子カテゴリーの登録
7. 公開する（下書きを更新する）

この手順でカテゴリーの設定を行ってください。

カテゴリーを押します。

メニューが開いたら、新しいカテゴリーを押してください。

すると上の画像みたいに画面の上に小窓が表示されます。

親カテゴリー名を登録してください。

親カテゴリーの登録が終わったら、再び新しいカテゴリーを押します。

小窓が表示されるので、子カテゴリーを登録してください。

上の画像のように親子の順番になっていたら、「公開する」または「下書きを保存する」で記事を保存します。

ブログを表示し、カテゴリー名の左側に「▶」が表示されているか確認してください。そして「▶」を押します。

上の画像みたいにカテゴリーが展開したらOKです。

ところで、登録した親カテゴリーと子カテゴリーを記事に設定する場合は、次のようになります。

1. 記事を書く
2. カテゴリー
3. 親カテゴリーを選択
4. 子カテゴリーを選択
5. 公開する（下書きを更新する）

この手順で、すでに登録した親カテゴリーと子カテゴリーを記事に設定してください。

はてなブログのカテゴリー階層化のメリット・デメリット

はてなブログのカテゴリー階層化のメリットは、膨大な記事を細かくグループ化できることです。

そのためカテゴリーの階層化は、大きなテーマを扱う特化ブログや複数のテーマを扱う雑記ブログに有効な手段と言えるでしょう。

しかし、そんな「はてなブログのカテゴリー階層化のカスタマイズ」にもデメリットはあります。

それはスクリプトやスタイルシートを読み込みによって、ブログの示速度が遅くなることです。

このように「はてなブログのカテゴリー階層化のカスタマイズ」には、表示が遅くなりユーザビリティを損なうというデメリットがあります。

また、提供されているスクリプトやスタイルシートが、予告なく停止する可能性があるのでご注意ください。

ところで、先述のとおりカテゴリーは記事をグループ化する機能です。

ただ記事をグループ化しても、必ずしも記事が探しやすくなるという訳ではありません。

なぜなら記事がグループ化されるだけだからです。

カテゴリー機能によって記事はグループ化されますが、記事を五十音順やアルファベットに並べらません。

つまり、ユーザーの方に記事を探していただくという負担をかけてしまうのです。

このようにカテゴリーを階層化だけで、記事を探しやすくなるという訳ではありませんのでご注意ください。

ユーザビリティを考えるなら、説明の順番に沿って記事を公開したり、固定ページを使って目次を用意したりしましょう。

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

今回は、はてなブログのカテゴリーを階層化について紹介しました。

カテゴリーの階層化とは、カテゴリーの中にさらにカテゴリーを作ることです。

ところが、はてなブログにはカテゴリーを階層化する機能がありません。

そのため、はてなブログのカテゴリーを階層化するにはカスタマイズが必要です。

次の手順で、はてなブログのカテゴリーを階層化できます。

1. パンくずリストの有効化
2. カテゴリーの表示
3. スクリプトの設定
4. スタイルシートの設定
5. カテゴリー階層化の設定

このように「はてなブログのカテゴリーを階層化」のカスタマイズは、手順も少なくて簡単です。

また入力するコードも少ないので手間もかかりません。

しかし、はてなブログのカテゴリーを階層化するカスタマイズには、表示速度が遅くなるというデメリットがあります。

そのため、カスタマイズを行う際は十分ご検討ください。

⚠ 注意

2023年4月2日、参考にしていた記事「【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました」が「2023年4月2日、サーバーからのスクリプト配信を停止しました。スクリプトファイルはGitHub上で提供しておりますので、引き続きご利用される方はこれまでの設定部分を修正してください。 詳細は当記事内の手順4,手順5を参照してください」と更新されました。

それに伴い、2023年11月21日に本記事の内容も更新しました。

参考文献

今回の記事を書くにあたり、次の文献を参考にしました。

紹介の順番は、次のとおりです。

• 著者名でアルファベット順
• 同一著者の場合、発表日の順
• 著者名が不明の場合、文献名でアルファベット順

文献名	小さな星がほらひとつ
著者名	WorldWorldWorld
記事名	【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました
提供日	2016年9月22日
閲覧日	2023年11月15日