塵積もりて山となれ

素人調べのメモであり覚え書きであり備忘録

【ブログ】カテゴリーの階層化

動機:カテゴリーを階層化したい。

参考

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

設定は次の4ステップです。

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

この手順に従います。

そもそも「パンくずリスト」って何? Wikipediaによると

ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。

であり、その名前は

童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソード

にちなんでいるらしい。今回の場合は、見ているページがブログ内のどの階層にあるかを表示したもの(トップ > ○○カテゴリ > △△ページ)のことだと思われる。パンくずリストには「パス型」「位置型」「属性型」の3種類があるそうだが、これは「位置型」になるのかな。
また、「GUIウィジェット」の「ナビゲーション」に分類されている。

参考

  1. パンくずリスト - Wikipedia


スクリプトの読み方 手順3と手順4では、HTMLによるスクリプトを設定するようになっている。これらの読み方くらいは最低限知っておきたい。

まず、フッタに設定するものは

<script src="(ファイルのURL)"></script>

という文。
<script>~</script>Java Scriptの実行のために使用されるそうだ。 タグに囲まれた部分に実行するスクリプトを記述するのが基本。 ここではその部分に何も記述されておらず、代わりに前半の<script>srcが指定されている。 "src"は"source"の略で、ここで外部のスクリプトファイル(のURL)を指定すれば、そのスクリプトが実行される。

次に、ヘッダに設定するものは

<link type="text/css" rel="stylesheet" href="(ファイルのURL)"/>

という文。
<link>は指定した文書を参照するものである。 基本形は<link rel="..." href="...">となっている。 "rel"は"relation"の略、"href"は"hypertext reference"の略。
relでは、この文書から見た参照先の文書との「関係」を指定する。今回は"stylesheet"を指定している。他にIndex(索引)、Next(次の文書)、Help(ヘルプ)などが指定できる。
hrefでは、「参照」する文書のURLを指定する。

ここではさらに、typeによって参照先の文書のタイプを指定している。"text/css"と書いてCSSを指定。他にも"text/plain"ならプレーンテキスト、"text/html"ならHTML文書、"image/png"ならPNG形式の画像、のように指定できる。

(最後の>の前にある/の意味はよく分からなかった。)

参考

  1. <script> - スクリプト - とほほのWWW入門

  2. <link> - リンク - とほほのWWW入門

  3. あのHTMLタグは何の略か知っておくと、タグの選択に迷いがなくなる。かも。 - 別冊webメモ

  4. type 属性(様々な種別を指定する) | HTML (HTML Living Standard) タグリファレンス | W3 Watch Reference


追記:配信元の停止に伴う再設定

参考:

  1. カテゴリーの階層化がなくなっていた - Someday Somewhere

カテゴリーの階層表示が機能しなくなっていた。
管理画面のデザイン→カスタマイズから、ヘッダとフッタに設定していたHTMLを修正する必要がある(やり方は参考ページを参照)。

備忘

参考ページの手順を一から追うこと。