ぴっぴのはてなブログでアフィリエイト

ブログ初心者ぴっぴが、はてなブログでアフィリエイトに挑戦中。

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

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

記事の種類 はてなブログのカスタマイズ
SEO対策 関係あり
SXO対策 関係あり
難しさ かんたん
重要さ 重要
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ぴっぴのプロフィールカード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

STEP
まず、はてなブログパンくずリストを有効化します。
はてなブログパンくずリスト有効化の手順は、次のとおりです。
  1. デザイン
  2. カスタマイズ
  3. 記事
  4. パンくずリストをチェック
  5. 変更を保存する
この手順で、パンくずリストを有効化できます。
詳しい手順は「はてなブログのパンくずリストを表示させる設定変更の仕方」をご覧ください。
STEP
カテゴリーの表示
サイドバーにカテゴリーを表示します。
カテゴリーの表示の手順は、次のとおりです。
  1. デザイン
  2. カスタマイズ
  3. サイドバー
  4. カテゴリー
  5. カテゴリーの表示設定
  6. 変更を保存する
この手順で、カテゴリーを表示します。
詳しいカテゴリーの表示の手順は「はてなブログのカテゴリーの表示」をご覧ください。
STEP
続いてスクリプトの設定をします。
設定と言っても、フッタに次のスクリプトを入力するだけです。

<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/breadcrumb.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>

フッタにスクリプトを入力する手順は、次のとおりです。
  1. デザイン
  2. カスタマイズ
  3. フッタ
  4. スクリプトの入力
  5. 変更を保存する
この手順でスクリプトの設定を行ってください。

デザインを選択

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

カスタマイズを選択

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

フッタを選択

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

フッタのHTMLエディタをクリック

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

スクリプトの入力

すると入力できるようになるので、スクリプトを入力します。
STEP
スタイルシートの設定
スクリプトの入力が終わったら、スタイルシートの設定をします。スタイルシートの設定も下記のコードをヘッダに入力するだけ。
<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>
スタイルシートの設定の手順は、次のとおりです。
  1. デザイン
  2. カスタマイズ
  3. ヘッダ
  4. スタイルシートの入力
  5. 変更を保存する
この手順でスタイルシートの設定を行ってください。

デザインを選択

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

カスタマイズを選択

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

ヘッダを選択

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

ヘッダのHTMLエディタをクリック

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

スタイルシートの入力

すると入力できるようになるので、スタイルシートを書き込みます。
STEP
カテゴリーの設定
最後にカテゴリーの設定を行います。
その際、次のルールに従って設定してください。
  • 「親カデコリ-子カテゴリ」という命名規則で、擬似的な階層を表すカテゴリを登録する。
  • 「親カテゴリだけ」のカテゴリを必ず登録する。
  • カデコリの並び順が「親カテゴリ」→「親カテゴリ-子カテゴリ」となるように登録する。
引用元:小さな星がほらひとつ「【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました」
このルールに従ったカテゴリーの設定の仕方は、次のとおりです。
  1. 記事を書く
  2. カテゴリー
  3. 新しいカテゴリー
  4. 親カテゴリーの登録
  5. 新しいカテゴリー
  6. 子カテゴリーの登録
  7. 公開する(下書きを更新する)
この手順でカテゴリーの設定を行ってください。

カテゴリーをクリック

カテゴリーを押します。

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

親カテゴリーの入力

すると上の画像みたいに画面の上に小窓が表示されます。
親カテゴリー名を登録してください。

再び新しいカテゴリーをクリック

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

子カテゴリーの登録

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

親子の順番なら保存

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

▶をクリック

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

カテゴリーが展開

上の画像みたいにカテゴリーが展開したらOKです。
ところで、登録した親カテゴリーと子カテゴリーを記事に設定する場合は、次のようになります。
  1. 記事を書く
  2. カテゴリー
  3. 親カテゴリーを選択
  4. 子カテゴリーを選択
  5. 公開する(下書きを更新する)
この手順で、すでに登録した親カテゴリーと子カテゴリーを記事に設定してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考文献

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

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

  • 著者名でアルファベット順
  • 同一著者の場合、発表日の順
  • 著者名が不明の場合、文献名でアルファベット順
文献名 小さな星がほらひとつ
著者名 WorldWorldWorld
記事名 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました 
提供日 2016年9月22日
閲覧日 2021年6月17日