IT the Best
新しく、カテゴリー・パンくずリストを階層化表示にする機能を作成しました。こちらの方が扱いやすく、不具合が起こる可能性も低いと思われます。
ほとんどの機能変更はありませんが、パンくずリストの区切り文字や階層化させるカテゴリーリストの選択など新たに独自カスタマイズができるようになりました。すべてのコードを見直し約5千行省略したためほんの少しですが軽くなりました。
しかし、大きな変更点として新しいScriptコード(ファイル)では、最初に表示されているカテゴリーをパンくずリストに表示するようにしました。
また、新しく投稿した記事の方がスマホからのカスタマイズも容易です。
当記事は、階層カテゴリーを表示するために開発した機能の、おおまかな説明になります。
説明
階層カテゴリーについて
ハイフンで書かれた階層カテゴリーは、「カテゴリータグ」では表示されないように処理をしています。
サブカテゴリーでなくハイフンを含むカテゴリーを指定したい場合は、「"」(ダブルクォーテーション)か「'」(シングルクォーテーション)で囲みます。例）"box-shadow"
※囲まれていない場合は、それ以降にハイフンを入れてもサブカテゴリーと判断しません。
パンくずリストについて
パンくずリストに表示されるカテゴリーは先頭に置かれたカテゴリーです。もし、そのカテゴリーが階層カテゴリーの一部であれば、パンくずリストは階層カテゴリーを表示します。先頭に置かれたカテゴリーを含む階層カテゴリーに分岐がある場合は、先に置かれている最下位までの階層カテゴリーが表示されます。
コチラの画像のカテゴリーの場合は、「はてなブログカスタマイズ」が先頭にあるので、「はてなブログカスタマイズ」を含む階層カテゴリーがパンくずリストに表示されます。
「はてなブログカスタマイズ」を含む最下位までの階層カテゴリーは、「はてなブログカスタマイズ-階層化カテゴリー」、「はてなブログカスタマイズ-パンくずリスト-階層化カテゴリー」の二つです。
「はてなブログカスタマイズ-階層化カテゴリー」が先に置かれているので、パンくずリストには、トップ＞はてなブログカスタマイズ＞階層化カテゴリー＞と表示されます。
ファイルについて
CSSは、それぞれのページに対応する用に独自に設定する必要がある可能性があります。
category.min.jsがカテゴリーを階層化させるためのメインソースファイルになります。jqueryは、カテゴリーの階層化とは直接関係ありませんが、category.min.jsでコードを簡略化するために使用しているので必要です。
JavaScriptファイルの説明
- カテゴリーの表示を変える
- パンくずリストの階層化表示
初期Scriptファイルのため、不備などがありあまり参考になりません。
はてなブログのカスタマイズ設定について
パンくずリスト
パンくずリストの表示を設定していると、その位置に当処理で生成されたパンくずリストが表示されます。
設定していない場合は、記事の上に表示されます。
カテゴリー一覧
階層カテゴリーは最上位カテゴリーを置いた位置に表示されます。最上位カテゴリーを移動させることで階層カテゴリーの表示を移動させることができます。
