IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【簡単】カテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- | はてなブログ #説明

f:id:Surprisedblog:20190619185106j:plain

 

当記事は、階層カテゴリーを表示するために開発した機能の、おおまかな説明になります。

www.it-the-best.com

説明

階層カテゴリーについて

 ハイフンで書かれた階層カテゴリーは、「カテゴリータグ」では表示されないように処理をしています。

 

 サブカテゴリーでなくハイフンを含むカテゴリーを指定したい場合は、「"」(ダブルクォーテーション)か「'」(シングルクォーテーション)で囲みます。例)"box-shadow"
※囲まれていない場合は、それ以降にハイフンを入れてもサブカテゴリーと判断しません。

パンくずリストについて

 パンくずリストに表示されるカテゴリーは先頭に置かれたカテゴリーです。もし、そのカテゴリーが階層カテゴリーの一部であれば、パンくずリストは階層カテゴリーを表示します。先頭に置かれたカテゴリーを含む階層カテゴリーに分岐がある場合は、先に置かれている最下位までの階層カテゴリーが表示されます。

f:id:Surprisedblog:20190619191527p:plain

コチラの画像のカテゴリーの場合は、「はてなブログカスタマイズ」が先頭にあるので、「はてなブログカスタマイズ」を含む階層カテゴリーがパンくずリストに表示されます。

「はてなブログカスタマイズ」を含む最下位までの階層カテゴリーは、「はてなブログカスタマイズ-階層化カテゴリー」、「はてなブログカスタマイズ-パンくずリスト-階層化カテゴリー」の二つです。

「はてなブログカスタマイズ-階層化カテゴリー」が先に置かれているので、パンくずリストには、トップ>はてなブログカスタマイズ>階層化カテゴリー>と表示されます。

ファイルについて

CSSは、それぞれのページに対応する用に独自に設定する必要がある可能性があります。

category.min.jsがカテゴリーを階層化させるためのメインソースファイルになります。jqueryは、カテゴリーの階層化とは直接関係ありませんが、category.min.jsでコードを簡略化するために使用しているので必要です。

JavaScriptファイルの説明
  1. カテゴリーの表示を変える
  2. パンくずリストの階層化表示
    初期Scriptファイルのため、不備などがありあまり参考になりません。

 はてなブログのカスタマイズ設定について

パンくずリスト

パンくずリストの表示を設定していると、その位置に当処理で生成されたパンくずリストが表示されます。

設定していない場合は、記事の上に表示されます。

カテゴリー一覧

階層カテゴリーは最上位カテゴリーを置いた位置に表示されます。最上位カテゴリーを移動させることで階層カテゴリーの表示を移動させることができます。

 

www.it-the-best.com