hiroの長い冒険日記

主にコンピュータ周辺の興味を持った内容を綴ります

トップ > Web管理 > はてなブログのカテゴリーを階層化する方法 (パンくずリストの活用)

はてなブログのカテゴリーを階層化する方法 (パンくずリストの活用)

Web管理 Web管理-カスタマイズ

当日記ではアフィリエイト広告を利用しています

他のサイトを見ていると、記事本文の上に「今の記事が全体のどの位置にいるか」が表示されているページがあります。これはパンくずリストと呼ばれています。はてなブログにもパンくずリストの機能があり、有効にすれば記事の上部に表示されるようになります。しかし、はてなブログのパンくずリストは一階層しかなく「ツリー構造」ではありませんでした。私の日記にもツリー構造のパンくずリストを実装したいと考えて、他の実装例を参考にしながら導入してみました。

パンくずリストとは

「パンくずリスト」って、初見じゃ意味が分かりませんよね。Wikipedia で調べてみました。
ja.wikipedia.org

パンくずリスト（breadcrumb list）は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。
…中略…
「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

breadcrumb (パンくず) から想像されるイメージに「ヘンゼルとグレーテル」が出てくる人には素直に頭に入るのでしょう。私はイメージできませんでした。

先の引用部分をよむと「ツリー構造」、つまり階層化というのが「パンくずリスト」の肝となるようです。

はてなブログのパンくずリスト

はてなブログにはカテゴリーという機能があります。また、ブログの管理ページの「デザイン」->「カスタマイズ」->「記事」の中に「パンくずリスト」のチェックボックスがあり「記事ページにパンくずリストを表示する」の表記があります。カテゴリを設定すればパンくずリストが使えるような印象があります。

しかし、この「パンくずリスト」を有効にしても階層化されていませんでした。

  • 各記事毎にカテゴリーを設定できる
  • カテゴリーは複数設定できる
  • しかし、カテゴリー間には親子関係はない

全てがトップレベルのカテゴリーとなり階層化されていませんでした。これでは、私の必要としている機能を満たしていませんでした。

はてなブログのパンくずリストに階層化の機能を追加

そこで、階層化されたパンくずリストをはてなブログで使用できるようにする機能を公開されているページを探してみました。

blog.wackwack.net

こちらの WorldWorldWorld さんの「小さな星がほらひとつ」で紹介されている方法が他のサイトでも良く見かけました。はてなブログ公式のパンくずリストを改良して使用している事と採用事例も多い為に、今回はこちらの方法をやってみる事にしました。

導入手順

上記の WorldWorldWorld さんのサイトに詳しく書かれていますので、その手順通りに作業しました。

  1. はてなブログ公式のパンくずリストの有効化
  2. カテゴリーの階層化
  3. カテゴリーの表示設定
  4. スクリプトの設定 (フッタ)
  5. スタイルシートの設定 (ヘッダ->タイトル下)

細かな箇所を直していますので、以下に修正した箇所を書いておきます。

修正1　「4. スクリプトの追加」の jQuery を読み込む行をコメントアウト

jQuery は head で読み込んでいますので、こちらの行をコメントアウトしました。

<!--
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
-->
修正2　css を修正

使用しているテーマとの相性もあり、レイアウトや表示の一部が考えていた通りになりませんでした。次の項目を修正したいと考えました。

これらの内容を修正する為に、デザインCSS に追加で入れました。

/*
  記事上部に表示されている階層化カテゴリの
  表示を修正する。
*/
.breadcrumb-link {
  color: #444;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumb-child-link {
  color: #444;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumb-link :hover {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumb-child-link :hover {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}

#top-box .breadcrumb-gt {
  margin: 0 2px;
}

/*
   パンくずリストの高さを調整する
   複数行の場合には、高さを変更する
   border-bottom と border-top を付けることで
   上部のグローバルメニューと margin が一緒になる
   事を防止している。
*/

#top-box {
  height: auto;
  margin-top: 0;
  margin-bottom: 0;   /* margin-bottom が設定されている margin ではダメ */
  background-color: #ccc;
  /* 上下の margin と統合されないために border が必要 */
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
#top-box .breadcrumb {
  height: auto;
  margin-top: 9px;
  margin-bottom: 9px;
}

#top-box .breadcrumb-inner {
  max-width: 1024px;
  width: 90%;
  height: auto;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.3; /* 折り返し表示時の間隔　normal より少し離す */
}

chrome の検証機能で css を見ながら修正しました。初めての経験で Try & Error で作ったので、必要ない箇所もあるかもしれませんが、これで思う通りの階層化パンくずリストの表示になりました。

カテゴリーの再設定

既に書いた日記のカテゴリーは設定し直しになります。

  • 大元の親カテゴリー単独
  • 親と子のカテゴリーを '-' (半角マイナス) で繋げたカテゴリー
  • 親と子と孫のカテゴリーを....(以下省略)

という風にしてカテゴリーを作成し、「親」「親-子」「親-子-孫」の順で複数のカテゴリを設定すると、最後のハイフンより前が消えた状態で表示されます。

半角のハイフンが区切り文字となっていますので、これを含むカテゴリー(例えば Hyper-V 等)を作成すると誤作動しますので注意が必要です。

階層化カテゴリを導入する前から階層化を意識したカテゴリーを設定していましたが、流石に一度に直すのは大変なので、過去の日記は徐々に再設定していく予定です。

まとめ

はてなブログの元々の機能としてパンくずリストは階層化されていません。WorldWorldWorld さんの HTML と CSS を読み込む事によって、記事上部のパンくずリストの表示と、サイドバーのカテゴリー表示を階層化する事ができました。

ただし、WorldWorldWorld さんのサイトには次のように書かれていました。

ブログパーツ（スクリプトやCSSファイル）は、自前のレンタルサーバから提供しているため予告なく機能が停止する場合があります。

ご了承下さい。

なお、はてなブログで使える階層化パンくずリストは他にもありました。もし WorldWorldWorld さんの階層化パンくずリストが使用できなくなった際には試してみたいと考えています。将来の自分の為にリンクを書いておきます。
www.it-the-best.com